A developer tries his hand at design (in his mind)
One of the things I have been trying to do is understand how my cohorts, the designers, do what it is they do. So here’s a quick mental exercise I did to see what I would do if I had to design a professional looking site trying to sell products online.
The first question I asked myself was, “Whom is this site for?” The answer, naturally, is for my clients. Now, I know to ask what do my clients want? They want to see a list of my products, be able to purchase those products, view my contact information and address, possibly testimonials from other clients, and lastly, though perhaps not as important, read some information regarding my company.
Straightforward so far, as a developer I know exactly what to do to make an inventory and purchasing system. So lets skip this step and say that I have a full system with the functions ready to go.
I’m assuming that since I only have a few pages, the menu will simply be a list sorted by importance to my target audience: products, checkout, contact us, testimonials, and about us.
Now, I would gather my content to fill those pages with, in this case the full catalog information for my company. Pictures for all the products and maybe a few of my employees and building. For contact information I would be sure to include a map and driving directions.
I know to make my page semantically correct so that page crawlers and people whom rely and accessibility software can understand what my site is about so we can skip this bit.
At this point I have very dull black and white pages filled mostly with lists, text, and tables. I ask myself, “I need to present this page so that it is more aesthetically pleasing and also relevant.” Since I have no color-sense, I’ll focus on relevancy for now.
Let’s say this page is to sell dog cleaning products. The first thing I would do is google “dog cleaning products” and see what other people have done.
After visiting a few pages I notice that all of them have a few things in common. Their page logo is always on the top left corner, search boxes are on the right, and the menu is laid out beneath both. Also their checkout button is locate outside of the main menu as button on the right side.
I mentally add to my todo list “Make logo and put it on the top left corner of every page.” Makes sense, since the top left corner is demonstrably the most important location on a webpage. At least for places where the audience reads left to right. I also make a mental note that I need to ask clients details about their logo. What feeling they want to illustrate when they look at it?
What else do I notice about these pages? Filters are on the left and sorting options are on the top. The main list of products are dead center. Seems like it’s the standard layout for shopping sites, so I probably shouldn’t break the mold and confuse my audience.
At this point my site no longer looks like a long list, but something more structured, if still dull. I also realize that I’ve only been working on the product catalog and not the front page. Which should help direct my audience to where they want to go.
Back to google I go and I find a very interesting article: http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples. Since I have no previous experience with front page layout I rely on my mantra of “keep it simple” and choose to follow the three box layout for my front page. The main square would naturally be article for sale, probably the week’s featured products. The bottom two would probably be a link to the testimonials and about the company. The footer would contain crucial contact information as it standard for most pages.
Now for the aesthetics. Since my knowledge of creating a theme is currently at “I only know if it looks nice or it doesn’t” I am forced to borrow from someone more creative than I. Again I return to my old friend google and search for some pre-made color and font themes and choose one that I like. I borrow heavily from it.
At the end of the day it may not have the wow factor that my full-time designer co-workers seem to be able to dish out. But this thought exercise definitely helped me understand what goes into designing a page, and hopefully it helped you too.
FIU Web Communications is a full service web team that provides support and consulting for departments at FIU. If you need help in implementing any of your web needs, please contact us.
If you enjoyed this post, please consider leaving a comment or subscribing via rss feed or email to have future articles delivered to you.