Say you are going to build a fairly large website. Would all the pages be design
ID: 649587 • Letter: S
Question
Say you are going to build a fairly large website.
Would all the pages be designed before they are built, or would all the pages be built and functional before they are graphically designed?
I am a programmer and a graphic designer. When build a new website I usually have a rough outline of all the pages I am going to need and how they are going to work. I then usually start to build the pages, as I build the pages I tend to design the graphical interface at the same time.
I am starting to think this is bad because each page ends up looking good, but not uniform. Or even if they appear uniform they really aren't. For example, on page A and page B the heading looks the same but on page A it has a 50px margin while on page B it has a 50px padding. The styling for the heading on page A is defined in one CSS file and the styling for the heading on page B is defined in another. Over time it can become a giant mess.
I need a new approach.
There are many ways I have learned to keep this kind of thing from happening in code (DRY). I don't really know how to apply them in this area though. Or maybe I just don't currently have the discipline.
One idea is, after the project outline is complete, create graphical designs of how all the pages will look before I build any. Then I should be able to design the styles before building the pages so I won't be introducing duplicate style definitions as I build.
The problem is, before I design a page with HTML/CSS, I design it in Photoshop. However, they don't always workout exactly the way I designed them in Photoshop. Sometimes I have to make adjustments to get it to look right on the page. Sometimes the adjustments needed differ from page to page. I don't see how I can plan this ahead of time.
What's the normal workflow for something like this?
Explanation / Answer
What you are looking for is the idea of Wireframing.
I use WireframeSketcher with great success on all the graphical components of all the projects we work on.
Whether it is a website, a desktop applicaton or a mobile application, the wireframing step is critical.
Next step is Mock Ups where someone actually does the graphics and other things in Photoshop or some other tool, to show what the graphics, colors and fonts will look like.
Then you do your development from the mockups.