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.
Layout of book buying page.
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.
Dig Diner image was a combination of matte painting and vector shapes.
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.
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.
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.
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.
Desktop version, reading the story itself
Notice the left chapter menu, and the page turn icons on the right.
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.
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.
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.
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.
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.
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.
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.
Moisture Intrusion Solutions
Tilt shift is a photo manipulation technique where the alteration of the photo gives it a "scale model" look.
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.
Glimpses of Heaven
Glimpses is a site created to market a book written by hospice nurse Trudy Harris.
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.
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.
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.
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.
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.
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.
Miscellaneous Apps and Print created for myself or others.
A email blast flyer created for luxury real estate.