HomeCoding PortfolioDesign PortfolioContact Sally

Sally Gura Portfolio


Design
Often times, a programmer is asked to create a layout mock-up or completely design sites from scratch. 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 am a coder first. All coders and all designers fall within a skill range. My skill range for coding is higher than my design skill set, in my opinion, because I went with coding first, as a career. 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.

You know, I have learned a few things over the years about design. Whether a site is designed to have margins or stretches to the full width, whether it uses light text on a dark background or dark text on light background, whether it uses serif or sans serif fonts, or whether it has scripting to pop open content or only allows scrolling to see content, all of these things have been extremely geared toward the opinion of the owner of the web site. I have designed so many things (sites/ads/flyers/DVD covers) using the constraints of the design opinion of the "boss" that it does not ever surprise me when the guy or gal "swears" that "x" is the way things must be for their project. Having studied design concepts, and what trends are happening on the web every year, I think that you can have your cake and eat it too. If you want your site to be interesting and fun and unique, go with your gut, and go with your opinions, and go with your taste – your designer can create using whatever guidelines you give them. It's their job. So have fun asking your designer to create what you like, this is what makes the internet so fun to explore!

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

These examples are not in any particular order. Right-click on any and open in a new tab, you often can see the full size image, and more detail that way. Instead of scripting a pop-up to display a larger image view, I allow you to right-click because it allows you to zoom in on your phone as well. Ever try to zoom in on an image and because the larger view is scripted you are hindered on your phone? It's very frustrating. Web design theory is changing drastically because of the growing prominence of cell phone usage on the web, and it's wise to take this into consideration.

Dig Diner and The Dig U

Many web sites employ a nice banner on top, and then the rest is blog or text content of some kind. This Dig Diner and The Dig U are such sites, for now. 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
ThDigU Banner

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


Moisture Intrusion Solutions

This is a business site I designed and coded that has a cool tilt shift photography slider on the home page, and also snazzy map controlled by a database and admin system. Tilt shift is a photo manipulation technique where the alteration of the photo gives it a "scale model" look. For the map, an unlimited number of map pins can be auto-generated on x/y coordinates onto the map via an admin login. Employees are listed on the map with a yellow pin, and job sites on a blue pin. Site visitors can then use the pin popup to contact an employee or office in their area. The design is simple, and sometimes simple is best to convey a lot of information. This is a fantastic group of people, I highly recommend them to anyone in this field of business.
Moisture Intrusion Solutions Jacksonville Tilt Shift
Moisture Intrusion Solutions Charlotte Tilt Shift
Moisture Intrusion Solutions Employee Pin
Moisture Intrusion Solutions Job Pin

Author Site: 1001 Question to Ask

Book and Counseling site. One of the fun aspects of web design, is taking the requirements and desires of the owner of the site and figuring out how to present the information in an elegant, logical way. Monica was a big part of the process in helping drive how she wanted her site to look, as far as what icons or thumbnails should go on each page. It was really helpful. Here on the 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. It was really a fun project. Photo manipulation is so fun.
This is the home page.
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 had 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 fun.
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 2 or 3 mockups and he chose this one.
Vincent Martella Phineas and Ferb


Don Leslie

Back when Flash animation was the big thing, I made a Flash site for actor Don Leslie. He still loves it, and even though Flash is dying a painful death, Don can't bring himself to say goodbye to this fun animated web site..yet. I love how this one turned out. The menu changes position on each page, it's unique animation for a web site. Check it out.
Don Leslie Actor Sym-Bionic Titan


Captain Tony's

Captain Tony's Pizza was a site I designed several years ago. 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


Deep South Divers

Deep South Divers is a diving business and was a possible reality TV show in the making. They wanted a new site to handle their potential new traffic. The site displayed a random underwater background on every page load. The site rearranged itself to handle wide screen display, or narrower screens such as phones, using a custom made detection module I had created before I had learned bootstrap. The Logo was created by the owner, and the design was heavily driven by him as well. Diving sounds like a fun career, if I was not so afraid of drowning. I've dived once, in a pool with instructors. It was fun, once the panic subsided, but I've never been out in the ocean.
Deep South Divers


Glimpses of Heaven

Glimpses is a site created to market a book written by hospice nurse Trudy Harris. I really like how all of the elements came together.
Glimpses of Heaven Book


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. Made me giggle. A little ol' inventor trying her best to have some fun on the internet. I wish the product had soared, it would have been fun to see her eyes light up.
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


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


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 simple layout aged pretty well, there isn't too much I would change in the layout. I'd adjust colors though!
intranet

IWM Online

A email blast flyer created for luxury real estate.
intranet

OD Promo / Office Depot project was a huge endeavor that I was Sr Developer for over a few years. It is the story of creating around 40 Corporate Stores for Office Depot corporate customers, allowing Office Depot sales people to sit with the corporate customers and set up a store right from a sales call. It included multiple levels of administration to code, since everyone from the end corporate customer, to the Office Depot sales person, to our in-house product management team, and myself the developer, needed very different levels of access in order to work on the aspects of the project that they managed. From end-customer logo management, to product management, shipping preferences, adjusting sales margins for every single store, this was an extensive and very complex project. Here are a few actual project-completed screenshots that example creating clean and user friendly administration options within a complex environment, and managing a ton of data on one screen. It was a fantastic challenge, and I loved it.
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 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




Requested Photoshops, Before n After

Below are some casual Photoshops I have done for others. I've also done more serious Photshopping: mostly professional singer / actors photo retouching, stand-up comedian photo retouching, comedian and band DVD covers, and more seriously, babies who had died and the parents wanted the photos edited to take out hospital tubing. But 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, and creating web site e-commerce administration user manuals, and also using Photoshop to create DVD covers for comedians, 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 thingamacodes.com, where I used a very popular parallax template to create that site. This template has become an internet pariah because it is so overwhelmingly prevalent, but I wanted something slapped up fast at the time, so I used it.
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 help keep your SEO strong.
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 packaged file into a .swf file and embed the .swf file on a web page. So, a Flash file consisted of graphics and code packaged together. 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 cartoon stories, so we suffer and watch it die. HTML5 animation is a joke compared to the Flash environment. Yes, some sour grapes there. 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.