Starting out in web design can be a little overwhelming. Over time, as you learn more and more, you realize there are a thousand different ways to build a website. I, along with my co-workers, have tweaked and tweaked our design process to a well-oiled machine of web development fury. Here is what it entails:
Immerse Yourself in the Industry
Before beginning any project, do some extensive research into the soon-to-be-client’s industry. Look at the best companies in their trade, as well as any great websites of related companies (not necessarily just the good ones). Keep these links bookmarked as you will, in the near future, rip them apart and use any good idea for your own gain! Not really…
But I feel any designer worth their salt can most definitely look to other designs for inspiration without crossing that invisible line of creativity theft. There are many times when I’ll use other site’s structure and feel as my foundation. But by the time the site launches, you wouldn’t know the two are related in any way because of their difference in look and feel. Think about high school art classes. They make you study and study Michelangelo and Leonardo da Vinci and the like to allow you the ability to grasp the big picture of what has been done before. Only then can you can move forward and develop your own unique style.
Sitemaps, Sketches and Wireframes
Depending on the budget, I’ll do one or three of the above. I will always do sketches. Sometimes literally 30 seconds of my time scribbling some lines on a piece of scrap paper… sometimes more elaborate. Those sketches save me hours of time when I sit down at my computer. Sitemaps and wireframes are extremely beneficial as well. But if the project is small and there isn’t as much time available, I can usually make due without these steps. I’d say the biggest advantage of sitemaps and wireframes are allowing the client to structure and priortize the information within the website without getting distracted with the design.
Font and Photography Dig
To get my creative juices flowing, and to equip myself with the necessary assets, I’ll dig through my font collection and the stock photo websites.
- iStockPhoto.com: These guys really work hard to ease the checkout process. Purchasing photos is quick and cheap!
- Stock.XCHNG: It’s awesome because it’s free.
Some might believe this step is a little bit overkill. But I’m a firm believer if you want to kick it up a little bit with a non-web-safe font, by all means, use image replacement and have some more control over the design.
Time to Begin
Once you have a plan on paper and in your head, it’s time to begin! It may seem a little cumbersome at first to plow through these preliminary steps. But the time you spend on the front end is priceless when looking at the project as a whole. I’ve wasted hours and hours of my time on past projects that I could have prevented if I had just done a little more planning in the initial phases of the development process.
So that’s my research process. Feel free to comment on anything I may have missed or if you see any areas that could use some improved efficiency.