Website Design – The Design Process Part 1

Design. This term seems to be overused as of late. Design according to dictionary.com means ” to prepare the preliminary sketch or the plans for (a work to be executed), especially to plan the form and structure of.”  This step is vital in the creation of a website among many other things. If done incorrectly the website will run itself into the ground before it has even had a chance to be recognized. The design of a site is quite a different story than the development of the site. Development starts only after the design is completed. I tend to make the mistake of starting to develop (code) the site before I have a solid design in place. Much time is wasted in this process because you don’t really know what you want.

Purpose

The design process starts with the question of “What is the purpose of my site?”. For me in designing joeysegalla.com I knew that it was going to be my portfolio. People would be able to go there and see what I had created, my personal info and contact information and whatever tidbits I thought people should know. It was in essence my little corner of the inter-webs. The second question I asked myself was “How complicated do you want it to be?”. I easily answered this by deciding to make it a single page. A portfolio rarely needs to  be more than a few pages and I wanted to keep it short and simple. I didn’t want to go into it and lose steam halfway through so the one page was an excellent choice.

Navigation

The next thing was the actual design of the site. I   thought about it for a while and decided to go with something a bit different then I had previously thought up. I went with a vertical left-sided sidebar navigation. The navigation of the webpage is in my opinion the most crucial design aspects of the whole website. It is the core structure in which you move about the website and the major point of reference. It is also a primary factor in good UI & UX of your site. I have ran across several sites in which the design is beautiful but because the navigation was not given ample thought it was a UX nightmare. This is a reason why many people stick with a simple horizontal design with a boring-as-molasses hover effect. Don’t get me wrong, this can be done in a beautiful and simplistic way but is many times dry and mundane. I love going to a site and being pleasantly surprised by a refreshing yet simplistic design.

Color Scheme

Another very important beginning step in the design process is the color scheme. The color scheme will make or break your site. That is a truth. I can personally guarantee that every  single person reading this has ran across a site which had clashing colors which made you want to shoot yourself. The color scheme is more important than you know. Colors first of all have a psychological impact on human beings. Doing a bit of research on how colors affect people is critical. This plus the content and theme of your site will help determine your color scheme more thoroughly. You don’t want to come up with a theme that has nothing to do with the content. In example, I wouldn’t want to have a space theme if my site was talking about chimpanzees. That would be counterproductive and a very large UX inconsistency. Unless the theme was about the chimpanzees going into space it would be ridiculous. Unless the whole site was dedicated to chimps going into space it would not make sense to have a space theme. You want to theme the overall idea, not a specific detail.  There are many factors in determining the color scheme but the content should be the deciding factor. You want the content to look good so making it too colorful can be  catastrophic. You want the design to compliment the content. The site should be appealing but the purpose is not necessarily to have the prettiest site. The purpose is for the user to enjoy the design while being able to get access to enriching content, whatever that may be. Always remember “Content is King”.

Stay-tuned for more!

TERMS

UI – User Interface

UX – User Experience

 
Feel free to throw me a line on twitter  for further discussion, concerns or comments.