With the immense quantity of websites out there, it matters greatly what's on it. An informative and well designed website stands or falls with its content. This is part II of the series "How to Build a Website". After we did the strategic planning in part 1, we now prepare our content.
Before we even look at the options to build a website, let’s gather the facts and materials.
You first need to know what you want to put on the website in order to make it. There are three aspects to prepare before even thinking about website tools:
- the structure you want your website to follow,
- the content you want to display, and
- the visuals (logo, pictures, illustrations, colors) you want to use.
Let’s look at each in more detail.
Structure
This is about the overall structure of your website. It should follow your reflections about the main message your website intends to communicate. Clarify what your website is about and who you address. A website works towards one fundamental Call to Action you want your visitor to perform. You may want them to “hire me”, “read more”, “contact me”, “try out”, “buy now”, “book now” or another similar action.
The Call to Action (CTA) defines what you need to show to convince the visitor to take action. Do you primarily need writing excerpts for the visitor to read your blog? Do you need to list skills and showcase a portfolio to get contacted for hire? Product images, descriptions and testimonials for customers to buy from you? Events to book? List everything you feel your website needs.
With these elements in mind, we jump into the initial design phase. Take a sheet of paper. A standard DIN A4 sheet in landscape orientation resembles a desktop window well. Pen and paper in hand, draw rectangles where on your website the elements could go. Does everything fit on one page or do you need multiple pages to better structure your content? Besides the principal pages there are complementary pages for Contact or the mandatory legal stuff like Terms and Conditions or Privacy Policy to account for.
When establishing a website’s layout, UX design integrates the user experience into design. The best looking website won’t do anything if it isn’t catered to the user. Where would the typical user look first, where second? Are the key elements of your message in these spots or do you need to rearrange things to make it more comprehensible? Here you lay the foundations for usability, a component of UX design centering on the ease for the user to handle your site. If you started with the desktop view in mind, how would your design translate to tablet or mobile view?
Involve other people in this process. It’s never too early to ask for the opinion of your friends, colleagues or a random person on the street. Fresh eyes which aren’t deeply absorbed in the process, are a good reality check. Do others understand the general idea?
Content
Now that your website’s skeleton is ready, you can go on with writing your content.
First, start with the headlines. Then, for each headline write out content. One of the most important things you need to clarify for yourself is: what keywords do people search for in their quest to find what your website covers? What search terms do they employ and how do they phrase them? This is called keyword research and part of the wide field of SEO, Search Engine Optimization. It’s what you need to do so that your website gets listed as far up as possible in search results – which will ultimately determine the amount of organic traffic you get on your site.
Identify the main keywords and integrate them into your headlines. In the content to follow, also use synonyms of these. Search algorithms – you know we primarily talk about one in particular – have become much better at semantic search and understand logically equivalent phrases. Thus, we don’t need to explicitly spell out every possible variant of a word to rank. Keyword stuffing, as this poor SEO tactic is called, is tedious to read. Yet, a broad vocabulary with synonyms has always been integral to good writing form. It spices up the reading experience. The content is the long form explanation of your headlines. Make your content concise and to the point. And, most of all, easy to understand for your human visitors.
Depending on how good of a wordsmith you are and how extensive your subject, this step can take a while. The words may fly to you with ease or you may brood over every single one and its order in a sentence. Be kind to yourself. Your content is not carved in stone. From now till your launch and even after, you can make adjustments any time.
For content writing the same applies as for the structure: include real people in your process. Ask for input and to proofread. Even the best writers have editors.
Visuals
Speaking of human visitors: text is only one part of your website’s content. Another important part, if not even the most important, is visuals. Your website needs pictures and/or illustrations. This is capturing the attention of your visitors, and makes looking at your website enjoyable. Even if your website’s topic is writing, pictures are a must for articles to visually break the text in chunks, capture attention and make it easier for your reader to follow.
If you don’t have your own pictures, you can use stock images or graphics. You can, for example, go to Unsplash for free stock pictures or to Mixkit for illustrations. If you use your own pictures, you can improve them a lot with photo editing. Even if you are not a photoshop expert, you can still make your images pop. You can find basic image editing tools e.g. on Apple’s Photos app, or in Google Photos online. They integrate nice basic photo editors, which are usually enough. A little bit of tweaking the brightness, saturation and clarity, or adding a filter goes a long way.
On top of editing, you can run your images through an image optimizer or compressor to reduce the file size while maintaining the quality. The smaller the files on your page, the faster it will load. This improves your site’s user experience and is rewarded by search engine algorithms.
Video is next level. Only use really good quality videos. Otherwise reserve them for YouTube or do Instagram Stories until you have gained enough experience and technical skills. Subpar video will not impress anyone and should not land on your website.
Whether you do this first or after gathering some image content, a recognizable brand or presence generally employs a characteristic logo, typeface and color scheme. You can try to match your images’ colors and styles with the recurring theme. Over time you find your own style.
Once you have a big chunk of this important and comprehensive groundwork done, it’s finally time to turn it into reality. Let’s build this page! 💪 This series’ third article sums up the idea and content finding process we’ve gone through and paves the way for you to walk your first steps in web development.