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. All coders and designers fall within a skill range. My skill range for coding is higher than my design skill set. See below my design examples. I either gladly work with designers, or work as a designer, as the job requires.
Currently Tinkering with..
New digital drawing pad - getting used to Photoshopping sans mouse is really fun!

Original Web Design

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.

WeSchool

Layout of book buying page. WeSchool Homeschool Book Shopping

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


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.

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

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

Mobile Landscape 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


Desktop version, reading the story itself   Notice the left chapter menu, and the page turn icons on the right.
Read Stories 4


Mobile version, reading the story itself   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


Mobile version, reading the story itself - custom color choice   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
 



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

Author Site: 1001 Question to Ask

Book and Counseling site. Monica was a big part of the process in helping drive how she wanted her site to look. On her home page, she wanted all of the translations of her book to appear "above the fold" and of course the links to buy her book on various book selling sites. Her photo was not the proper size for this area, so I had to add to and edit the bush to make the photo work. Photo manipulation is fun.
1001 Question to Ask... Book and Counseling site


Seabreeze Island Grill

This site had a slider at top, sliding 5-10 slides displaying live event info, photos of their outdoor seating, their group room, and so forth. The content of each slide was full html, not simply an image slider. You can see in the image below the first slide has links to their social media. The "Delectable" section below displayed a random dish each time the page loaded. The typeface at top and in the HTML slider panels ("WELCOME") is "Gilligan's Island" which I thought was whimsical and right for this beachside restaurant.
Seabreeze Island Grill


Vincent Martella

Vincent is a television actor who plays best friend "Greg" in "Everybody Hates Chris" and the cartoon character "Phineas" in "Phineas and Ferb" among other things. I created 3 mockups and he chose this one.
Vincent Martella Phineas and Ferb


Don Leslie

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. Check it out.
Don Leslie Actor Sym-Bionic Titan


Moisture Intrusion Solutions

Tilt shift is a photo manipulation technique where the alteration of the photo gives it a "scale model" look.
Moisture Intrusion Solutions Jacksonville Tilt Shift
Moisture Intrusion Solutions Charlotte Tilt Shift
Moisture Intrusion Solutions Employee Pin
Moisture Intrusion Solutions Job Pin

Captain Tony's

Captain Tony's Pizza is a franchise site. It also had a bit of Flash. Unlike Don's site, the flash element was not the entire site, but just one piece of the home page - an animated banner. It's an animation of a pizza cutter rolling across the screen and becoming the "Any Way You Want It" button.
Captain Tony's Pizza


Glimpses of Heaven

Glimpses is a site created to market a book written by hospice nurse Trudy Harris.
Glimpses of Heaven Book


Healing Hearts Ministries

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


Healing Hearts Ministries Walkathon


Pixsit

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


S and S Custom Interiors

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


Premier School Agendas

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

OD Promo / Office Depot project was a huge endeavor that I was Sr Developer for over a few years. The miscellaneous screenshots below are of the MACRO ADMINISTRATOR CONTROL site, which allowed PPI and Office Depot admins to log in and add products, add corporate logos, create new e-stores, and set pricing and margins.
Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores


Office Depot Corporate Stores



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


Miscellaneous Apps and Print created for myself or others.
Purple Rain Sprinkles Book Cover
Phone App
Comedy flyer

IWM Online

A email blast flyer created for luxury real estate.
intranet




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. To protect privacy, only non-professional Photshops are shown below.
Print Material

My experience with print material includes: getting InDesign generated PDFs ready for press for public school policy manuals, creating web site e-commerce administration user manuals, creating DVD covers, flyers for stand up comedians, and designing print ads for real estate. If you need examples of print work, please let me know. I also have experience working with Illustrator, though I have not used it as a native app for creating print products for several years.
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.