A great website is not always successful. Likewise, a successful website is not always great. To be clear, from a designer's perspective, a great website has nothing to do with site metrics and traffic (although those do need to exist to make the website successful).
A great website is a symbiosis of design and technical mechanics. Just as in nature, these two aspects gain mutual benefit from the other being done well, and correctly. Here are the steps our team follows when starting a new web design project.
1. Start with Research
Research the topic:
Whether for a personal project or for a client, researching the topic avenue will help you establish the visual direction for your project. In general, creative sites will differ greatly in structure from corporate websites, E-commerce sites will look differently from informational sites, and so on. Knowing your topic will allow you to better know your audience, which will help you better structure your new site.
Research great websites:
This stage is both fun and daunting. Without a doubt, you will come across amazing websites that you couldn’t dream of making. Don’t let that bring you down; use the fuel to launch your own creativity. Here is a great website for new ideas!
Research new web trends:
This step breaks into visual trends and technical trends.
- What is the current most used website width?
- Which fonts are new, or most used?
- Do people still utilize drop shadows?
These are the types of questions you could ask in reference to new web trends. One of our go-to resources is graphicdesign.stackexchange.com. (Click to Tweet!) You can ask questions, look up answers, and exchange ideas for free.
Another good practice is to research Technical trends to see how far you can go with a design. If you aren’t planning on programming your site, no need to worry about this part. However, if you are, here are some questions to ask yourself:
- What is the new CSS version capable of?
- Are there any tags that are depreciated?
- Is Flash finally supported on mobile? (Not really)
2. Plan for Success
Wireframe the website:
Wireframes lay the foundation for the future design. (Click to Tweet!) During this step, organize your major elements into blocks using simple shapes. There are several ways to wireframe a website. Two tools we use are notebooks and Google. Notebooks are a great way to quickly jot down ideas and layouts without needing a computer. On the other hand, Google has a pretty decent way to wireframe websites with Google Drawings located on Google Drive. (Click to Tweet!)
Block out the wireframe:
Time to take your wireframe into Photoshop. Using the wireframe in conjunction with all your compiled research, it's time to lay out the wireframe into various flat color blocks. Don't be alarmed if you diverge from the original wireframe; it really only serves as visual training wheels.
3. Execute your Plan.
Refine block out elements:
Now you're ready to bust out the main visual components.
Side note: If you are going to be a web designer, you need a stock photo account. (Click to Tweet!) Large background photos are “in” and we don’t think they’re going away. Also pulling images from Google will get you into trouble fast. At Inturact we use bigstockphoto.com.
Using an established color palette, you can rework the block out colors, add imagery, and establish font sizes and selections. Use imagery to break up the flow of content and keep the eyes of the user moving.
Add Details:
This is where you get the chance to add fine details and re-work some areas of the blocked out elements. An eye for spacing is essential for this step. You don’t have to fill every section with content; often times that just creates an overwhelming visual obstacle for the user. Subtlety is the way to go. Not everything needs a drop shadow, outline, or pattern. Here's a website example for great subtle background images.
4. Very Important Final Step
Walk away:
When you open up the layout again you may have some new ideas and notice details overlooked previously. Don’t become a Leonardo da Vinci though, it’s okay to finish your piece and move on. Do use web design testing tools to check the responsiveness of the website.
Well, how did you do? We'll be more than glad to take a look at your site design and marketing efforts. Complete the form below for a free assessment. We'll share marketing tips and suggestions tailored just for you.
