Lately I’ve been working on other projects and have not had much time to devote to Earthlingquote but that should be changing soon. I started working on the HTML mockups today after finishing up with the main design in Photoshop.
My initial step involved creating a mind map using a free web based app called MindMeister. It’s really cool stuff and I generally find that it’s a great way to start a project. I use the mind maps to help with information architecture. Information architecture is where you work on the navigation, organization of content and application structure. It’s extremely useful for designers and developers to learn about. It’s one of the best ways to ensure you end up with a quality application.
Next, I whiteboard each of the main application pages to decide where I’m going to lay out all the important page elements. Sometimes I sketch on paper though I really prefer a whiteboard as I find it easier to make revisions. After I’m done I put it down on paper for reference at a later time. Some people use graphics programs like Photoshop but I tend to get carried away and concentrate on the details more than I should when I use a graphics program. At this stage I try not to think about colors, fonts, or any of those design elements.
After I’m done with whiteboarding I can start working in Photoshop and nail down the design. Working in Photoshop after finishing the sketches is really motivating for me. It makes it fun to work on the next stage (HTML and CSS) because I can really see my design coming to life.
HTML mockups come next. I basically slice up my Photoshop design and create all the markup. This is where I’m at right now, still have lots of work to do but the markup stage is progressing nicely.