If you are getting lost in details and overwhelmed by the amount of data you have to deal with, this post will bring some sanity to your webpage design process.
Tools Required
Wall pads, scissors, colored pens, tape
What to Do
1. Buy a Post-it-Self-Stick-Wall-Pads from any office supply store.
2. Get all of your notes and lay them out into the big ass paper.
3. Arrange and categorize the notes into sections.
Structure
Focus on structure and copy existing design of a website that you like. In this phase you only worry about where different elements go in the layout. For instance, where does the screenshot of a feature go? Where does the headline and paragraphs go?
You can take screenshots of a website that you like and use Skitch to label different elements on the page. These labels could be just numbers. You can also blur or strike-out elements you don't want in your design in this phase.
You have to let your structure evolve over time by letting it marinate. Post it on the wall where you can look at it everyday and make quick corrections using red pen, using small sticky notes and pasting over the existing structure to note down some notes for yourself. Things does not have to be perfect the first time. The draft version can be approximate. It will be refined by revising it over a period of one to two weeks.
Content
Write down the content is smaller size paper and you can start pasting them over the existing structure.
Form
In this phase you focus on the font color, font size, font style, background grid colors etc. You make it more real.
Conclusion
This allows you to reduce confusion and clarify ideas before you can handover your design to a graphic designer. You can get a PSD file and hand it over to a front-end developer to create the HTML and CSS for the web page.
