When we started writing these community service guides for people wanting to understand the basics of how to design a website, we swore we wouldn’t rewrite the book. We’re sticking by that, but we keep coming back to new basic topics that we’d like to explain, or cover from different angles.
So, in this article, we’ll talk about a few more preparation steps that you should always do before you start to design a website. Doing these steps before you actually start planning sizes, spaces and shapes will remove the risk of having to retool your designs when you start applying content.
Planning the Source
“Planning the source,” you say? “I’ve never heard of such a thing!” In fact, there are a lot of steps that professionals do that fall into this category, before they design a website.
- Create dummy CSS classes to handle expected content and element styles.
- Name your CSS classes with short, concise names that you won’t mistake for one-another.
- Decide which CSS float features you’ll use to make your layouts work smoothly.
- Decide which classes will be used in which pages, to optimize style sheet loading.
- Decide design elements such as image borders and use of captions.
This is only a handful of examples, and as you can see, most source planning work has to do with preparing to use CSS either correctly, or efficiently. What do these things have in common? If not handled early, they can become a source of lost time and retooling mid-way through a project.
Everybody hopes they’ll have a large number of eye-fetching images ready at hand when they start to design a website.
But when it comes time to put content in the layouts, you might find you don’t have the budget to secure rights to the images you want, or you can’t find enough subjects to photograph or don’t have the time to make it all happen before launch, etc.
In short, sometimes your content pieces don’t have the visual punch you want them to, because you lack images. This is even more of a problem when you design a website intending it to be heavy with content, and then find you can’t break that content up with eye candy.
Spend time collecting rights-free or royalty-free image libraries, and get familiar with those images before you start. That will help you know how to structure your site to be easy on the eyes, before you write and decide on navigation schemes.
Certain color schemes work very well with all-text and mostly-text websites, while other schemes will only work well if you have plenty of colorful images to balance things out. A website can be beautiful, but still cause eye strain, especially if there’s a lot of reading involved for the users. Choose your colors accordingly.
Once the colors are chosen, you can add those to your CSS definitions before you even start to design the website.