How I design
Jumping into any design project before examining the problem or task at hand might spin the wheels, but won't get you very far. Any project, no matter how big or small, can benefit from research and planning before the work begins. Design is no exception.
Another helpful task in the process involves looking at pre-existing ideas and executions. Competitive analysis identifies the strengths and weaknesses of those existing designs. It can reveal gaps which still need to be filled and shortcomings which should be met. The ability to study what others have designed for the same (or similar) problem lends a sizeable advantage, since a great deal can be learned from their successes and failures.
When tackling a design project with limitless creative boundaries, I like to begin by creating lists of relevant words, topics, and phrases. Sort of a free-form brainstorming of thoughts related to the project at hand. Some are abstract and loose, some are concrete and tightly related.
Thumbnails capture the basic ideas for page composition, like header placement, column structure, and text alignment without allowing the temptation to focus on small details too early in the process. They can be quickly sketched allowing rapid idea iteration. Don't like the one that just took 30 seconds to draw? Start another one right beside it. To keep them general, I start with rather small sketches. Then slowly size them up as more details need to be worked out.
Once I had a few rough compositions I liked, I began studying typefaces and letterforms. To me, typography is a crucial element in setting the formalness or informality of a design.
selectively chosen photography or illustration can create enormous visual impact for a design, adding dimension, implication, and a deeper level of understanding far beyond a well-written headline or paragraph of text.
With a few rough comp ideas sketched out, and initial choices for typeface and imagery made, I began combining them in more developed digital sketches.
Execution and Implementation:
I start designing at a high-level, focusing on the layout structure, major backgrounds, and large regions of the page. Groups of elements were positioned in correct locations. Then I apply the necessary detail to each element, from the top of the page, down.These changes are possible because I, as the designer can make decisions on the fly about what was important to recreate exactly, what could bend a little, and where the flexibility existed for the design to evolve as it was coded. This unity of thought at the final stage of the process is a strong reason the designer and person responsible for generating the HTML and/or CSS need should be working together as closely as possible, if the two are not already the same person.