My portfolio: 3. Design
Now to sit down to the nitty! (The next step is “the nitty gritty,” where one actually gets dirty in code up to your elbows!) At the design step, I sit down and look at all the work that I did in the first two steps (Information and Inspiration). I don’t know what it is about drawing boxes, but I like to do it a lot. It helps my process. So, I sit and draw boxes of the general layout I wanted on my site.
In my notebook, I sketch a rough idea for the design.
Of course, it never comes out perfectly on the first try. At least not for me. Maybe it’s the rookie in me but I scratch up my notebook paper repeatedly until I really like what I see. I have to be convinced that what I draw on paper is what I want to spend time making come alive using XHTML and CSS. Otherwise—if I don’t like the look and feel—my heart will not be in the coding aspect of it.
Once the drawing is close to what I attribute to “love,” I will typically create a wireframe mockup in either OpenOffice Draw (very similar to Visio, but I don’t have the mula to buy my own license… for now), or even just Powerpoint.
Now for my personal portfolio site, I didn’t create a wireframe. I think that part is more for a milestone to reach with a client. A low- or hi-fidelity wireframe to show a client might be a good step in your process. This way, you can show off your work to communicate how your design direction is going to meet the client’s needs.
Another milestone, perhaps, could be a meeting to show a hi-fidelity prototype, so that that client can view and interact with a more advanced version of the original wireframe. I’m not going into too much detail here about that now because I didn’t use prototypes for my portfolio project.