HomeCoding PortfolioDesign PortfolioContact Sally

Sally Gura Portfolio


Design
It is an industry joke that a programmer is often a pseudo designer, and a designer is often a pseudo coder. As long as you are willing to study, you can be fairly proficient in both. I either gladly work with designers, or work as a designer, as the job requires. I have created everything from 300dpi print media to animated pieces for various clients. I have years of experience in many design applications, and this combined with on-the-job training from other artists have brought me to my current skill level. 
Currently Tinkering with..
New digital drawing pad - getting used to Photoshopping sans mouse is really fun!
Jump Menu
 

Original Designs

Most sites have a design lifespan. The sites created below may be completely the same as when I designed or re-designed them, or may be totally different today. I preserved these screenshots of the original work for this portfolio.

Site design must take into account your SEO goals, and the ability to scale on multiple devices. Your designer should have knowledge to share about steering certain aspects of the design, along with catering to your taste, so that the best of both worlds - the owner's desires for the look and feel of the site, and the coder's expertise in SEO optimization and user experience, is fully realized on the project.

Vincent Martella     design work: layout tweak & css tweak of template + photo manipulations

Vincent is a television actor who plays best friend "Greg" in "Everybody Hates Chris" and voices the cartoon character "Phineas" in "Phineas and Ferb" among many other things. I revamped his site last year from custom PHP/HTML to WordPress so that his team could better manage the content. This is how it looked when I originally launched it Dec 31 2017. WordPress templates are sometimes ready-to-go or can take hours of css tweaking. This one needed tweaking.
Vincent Martella Phineas and Ferb


Trade Show Signage for MIS     Photoshop

Was asked to create some design mockups for trade show banners. Fun project!
Trade Show Sign design Trade Show Sign design Trade Show Sign design Trade Show Sign design



Seabreeze Island Grill     design work: 100% custom design layout

This was a site I had created that used a fun Gilligan's Island typeface for the top menu and banner slider. The slider images were super fun to create. The banner panels were HTML enabled, so that each panel design had to be split into icons and links that would be created with HTML and then the static background image behind that content.
Healing Hearts Ministries


WeSchool     design work: 100% custom design layout


Layout of book buying page. WeSchool is a custom PHP/HTML project that I tinker with in my spare time.
WeSchool Homeschool Book Shopping


Captain Tony's     design work: layout tweak & css tweak of template + photo manipulations

Captain Tony's Pizza is a franchise business. I was contracted to refresh their site in 2017 from custom PHP/HTML to WordPress. I was asked to keep as many of the original elements on the home page as possible, so I refreshed the design of some of them to better fit the site's scheme.
Captain Tony's Pizza Franchise


Claude Stuart     design work: 100% custom design layout

Claude Stuart is a stand-up comedian and comedy writer who lives in Los Angeles CA. This was a design I did for his DVD Cover for "Fandemonium", around 2010.
Claude Stuart Fandemonium


Chucklehead     design work: 100% custom design layout

Created a random comedy flyer for this venue.
Chucklehead Comedy


Don Leslie     design work: 100% custom design layout

Back when Flash was the big thing, I made a Flash site for actor Don Leslie. I love how this one turned out. The menu changes position on each page. It's unique animation for a web site and some of his actor friends have told him that is an extremely well done web concept, which he relayed to me, which was very cool to hear. Check it out.
Don Leslie Actor Sym-Bionic Titan


S and S Custom Interiors     design work: 100% custom design layout

A very cool car re-upholstery shop in Washington state. A very fun project to do. Making the grungy garage look was so very fun, I could do this all day.
S and S Custom


OD Promo / Office Depot     design work: 100% custom design layout

I was Sr Developer for this project for a few years. The miscellaneous screenshots below are of the MACRO ADMINISTRATOR CONTROL site, which allowed PPI and Office Depot admins to add products, add corporate logos, create new e-stores, and set pricing and margins. This project was made with ColdFusion
Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores



Healing Hearts Ministries     design work: 100% custom design layout

This was a website project created for an International Christian Ministry to allow a client to work through material on-line, while a counselor also logged in and messaged them help and encouragement. I was the sole developer and designer. We also added a walkathon module, ability to send pre-designed pre-messaged & encouraging "keep going!" e-cards to clients, fundraisers such as dessert benefits, and a registration module and schedule for their annual international conferences. So, there was a lot of different types of design work to be done, which kept this project very interesting over the several years that I worked for this ministry.
Healing Hearts Ministries


Pixsit     design work: 100% custom design layout

Pixsit was a small tool you could buy to separate those hard-clomped together coffee filters bought from the store. Mouse over the little animals and they would wiggle, and the cow would stick out his tongue.
Pixsit


Premier School Agendas     design work: 100% custom design layout of one section of this corporate intranet - a training module

The job that started it all. The training / testing module I created for the Premier School Agendas intranet back in 2004. The company had a "theme" every summer, "Camp Premier" was the theme the year I created this module. My taste in colors have changed, that would be the only thing I'd adjust, so I'd say it aged pretty well.
intranet




 

Web Elements & Print

Captain Tony's Pizza

This site has random header banners that display on page load. I created them using available photos the owner had and artwork from image providers.
Captain Tony's Pizza Franchise Banner 1
Captain Tony's Pizza Franchise Banner 2
Captain Tony's Pizza Franchise Banner 3

This pizza icon was incorporated into several places to create some continuity.
Captain Tony's Pizza Icon sample 1
Captain Tony's Pizza Icon sample 2

Moisture Intrusion Solutions

Tilt shift is a photo manipulation technique where the alteration of the photo gives it a "scale model" look. The owner of this business liked the idea of his site's header banner looking different from his competitors' obvious stock photo look.
Moisture Intrusion Solutions Jacksonville Tilt Shift
Moisture Intrusion Solutions Charlotte Tilt Shift

Their Facebook page utilizes some photos I retouched. It only takes a few good edits to make a good photo look its best.
Moisture Intrusion Solutions NTS photo


Donasity

The Sales Department presented to me to a bar graph and asked me to make a web image version. I incorporated the look and feel of the site into the graphic, including color, font, and logo.
bar graph web version

I also designed many other elements for the site such as "City Giving" imagery, images for Events, and for various Fundraisers that we helped administrate for Donasity clients. The "City Giving" pages would list non-profits in that city. I was tasked with creating the system to generate these City Giving fundraising pages, and then to design a sample for certain cities so that the sales team could propose the concept to those cities. The system I made could toggle a title, font choices, page accent colors, allowed one to add social media icons, or not.. Some of the various options can be seen toggled on and off in the samples below.
Austin Gives

Orlando Gives

First Coast Gives

Leon Gives

A Donasity Fundraiser for earthquake relief.
Donasity Earthquake relief

The Dig U and Dig Diner

Many web sites employ a banner on top. The Dig U and Dig Diner are laid out that way. When this is the case, you want the banner image to be something interesting, something no one has really seen before. Something hopefully not stock photography.
The Dig U banner image was made with matte painting.
ThDigU Banner

Dig Diner image was a combination of matte painting and vector shapes.
Dig Diner Banner

Hot Cuba Travel

Owner Paul Prewitt had just a few photos to help supply content for his site, but mainly videos. So, I pulled stills from the videos to make the following panels for an animated slider.
Hot Cuba Travel Get to Know Cuban Architecture

Hot Cuba Travel Get to Know Cuban People

Hot Cuba Travel Get to Know Cuban Land

Hot Cuba Travel Get to Know Cuban Art

Hot Cuba Travel Get to Know Cuban Music

Hot Cuba Travel Get to Know Cuban Culture


Responsive Device-in-mind Design

Designing for devices

Bootstrap is a styling package that when applied to a site helps lay out a web page which automatically adjusts itself when desktop, iPad, mobile portrait, mobile landscape, or other device widths are detected. The designer needs to be aware of what every image will look like when scaled.



Designing for devices Desktop version

Three columns: menu, book details and book cover image. The book details and book cover image share the available page space in a ratio that looked best, giving more space to details, and less to the cover image.
Read Stories 1

Designing for devices iPad version

The top menu has changed, the font is larger, buttons smaller, condensed to one line. There are three columns, menu, book details, and book cover image. The book content area now is 50% 50%, both columns - the book details and book cover image share the available page space equally.
Read Stories 2

Designing for devices Mobile - Landscape version

The top menu is now an icon, the left menu is gone - its items now incorporated into the menu icon. There are only two columns, both book details and book cover image share the page at a 50% 50% ratio. In mobile portrait, there would be only one column.
Read Stories 3



Designing for devices Desktop - A story page

Notice the left chapter menu, and the page turn icons on the right.
Read Stories 4



Designing for devices Mobile - A story page

All navigation is now under the story page. So, once you've scrolled down to read the page, you'd click the next button. This page allows the reader to edit the color of the background and the text, so that if reading at night, the page can be made to read easier on the eyes.
Read Stories 5



Designing for devices Mobile - story page color selection

Designers and coders must work together to come up with solutions for the user. In this case, the "possible" color combinations were predetermined and are offered to the reader, simplifying their choices to make choosing a background and text combination much easier and faster.
Read Stories 6

Read Stories 7

 



 



Photo Retouching

Requested Photoshops, Before-n-After

Below are some casual Photoshops I have done for others. I've also done more serious jobs; professional singers and actors photo retouching, stand-up comedian photo retouching. Funny thing is, these folks don't really want anyone to see the "before" shots (!).. To protect their privacy, only non-professional Photoshop requests are shown below.

Animation

Cinemagraph: an animated gif that specifically takes a small movie clip, freezes all parts except allowing animation in one area, and then loops endlessly. The trick is to allow the animation to be clean, meaning that where you see water moving in this image, you should not see the hands shifting. Also, the loop should not "jump" - to avoid revealing where the clip end merges back into the beginning. These have movement to catch the eye, with none of the drawbacks of scripted animation such as hidden viruses. The only drawback to animated gifs is that they can end up being large files. This one is 2.7 meg.


Below are two ad examples someone else made, showing the usage of this simply beautiful form of animation (2-5 megs each though). Right click and open in a new window or tab to view full size.
HTML5: using HTML 5 or using Parallax is a coder's way of creating movement. It is a way of taking a few image items and layering them and dictating via code where each moves to make animation on a page. When you do so, you potentially create different outcomes based on the reality that a hundred different browser/OS configurations will be visiting your page and no coder can make a scripted element work the exact same way for every user. There's a spot of HTML5 animation on www.mommatown.net at the top, the blimp flies in via this method, and parallax is used on www.thingamacodes.com, where I used a very popular parallax template to create that site, when I needed something slapped up fast at the time.
Gif: A great way to provide a little spark on a page is to create an animated gif. Used sparingly, and keeping the file size small, will help channel visitors where you want them, and will not be a detriment to page load. Being selective about what objects are animated gifs, such as not turning your entire navigation menu into gifs, nor all page section headings, will protect your SEO.
Flash: a package system where you import jpg/gif/png (raster) pieces, or create the pieces in Flash (vector), and then use a script inside Flash to animate each piece. Then you'd export this script and image package into a .swf file and embed the .swf file on a web page. Nothing could beat Flash for animation creative control. Unfortunately, it is dying out due to issues that have little bearing on animators who simply want to create fun cartoons, animated web elements, or fun web effects. So we suffer and watch it die. HTML5 animation is fun to experiment with, but it is a joke compared to the powerful Flash environment. Still, many huge companies still use Flash. These days, if you visit a Flash site, you either see: nothing, a blank spot asking you to click to watch Flash content, or the Flash content runs normally. Visit Actor Don Leslie's site to see some complex Flash I had created. I'll get a page up to archive all my Flash work some day. I have made some really fun stuff with Flash and I am going to miss it tremendously.
I have tried to post images that are the most indicative of my current skill level. Thank you for visiting my design portfolio.