I've been involved in designing web sites and pages for a decade now and I've noticed several distinct development paths for web sites or webpages.
In one, a designer starts with a photoshop rendition of the final version. The layout, graphics, colors, fonts, and then the messages are all worked out up front. Then, the Photoshop image is chopped up into little pieces and some graphics and all the fonts are recreated in HTML.
In the other, a site is first wireframed which is essentially an outline of what the site or page layout will look like. Then it's filled in step by step adding the graphics, fonts, and so on with each addition being a step in the sign off process. I've found that with this process, there are sometimes "sign-offs", sometimes by me on design made in the early phase which have to be rescinded when I realize what that actually means once we try to fit our messages or key graphics into place.
A third path is do the site in a tool like powerpoint or Google slides so that a non technical person can change the design. This process is often used to kick off the photoshop process or to discuss alternatives in the other process.
Any thoughts on this?
Here's some tools used for the wireframing and prototyping process.
Wireframe - Balsamiq
Colored Mockup - Fireworks
Simulation of some of the interactivity - Invision,
Full simulation:
- Bootstrap which has the benefit of generating a real prototype with HTML & CSS,
- Sublime which has the benefit of generating a real prototype with HTML & CSS,
No comments:
Post a Comment