The basics of web design - part 1: planning

As with any project, the better you plan your website, the easier it will be to get the results you want. It doesn’t matter if the website is for you, your company, or if you are developing it for somebody else – good planning is essential for success. For this reason, it’s advisable to set aside adequate time for brainstorming, drafting concepts, and making improvements. Taking the following points into account will help you create a more compelling and appropriate structure for your website.

Before the planning process of a website can begin, it is important to first know what you aim to achieve: what is the goal of your website? The project’s objective is the bedrock for your entire work process: every element of the homepage should be oriented on the task at hand. For example, a website can aim to increase the publicity of its content or, in the case of an e-commerce website, have the purpose of attracting the maximum number of clients in order to sell more products. As a general rule, websites should be considered the flagship portrayal of the company or institution they represent. Whatever the intention of your website, it is imperative that the goal of the site is reflected in both its layout and design.

Target audience and user expectations

Who are you trying to reach? Make sure to always focus on the assignment at hand when choosing the target audience for your website: when selling a product or a service, ensure that the target audience has been defined and that the web design has been tailored to its specific requirements. The same rules apply to information portals or theme-specific forums. Essentially, it is up to every website operator to be aware of whom they are addressing, no matter the purpose of the content.

Many fields already have an established style for their content. Shopping websites, for instance, generally feature search and sort functions for their products. Every sector and target group is characterized by its own unique set of qualities that shape their online presentation and content. Knowing your users’ expectations is crucial, even if your website is to perform beyond the typical range of functions normally associated with its intended purpose.

The sitemap’s structure

Sitemaps are diagrams that depict the links and page structure of a website’s individual pages. Whether with pen and paper or on your computer, creating a sitemap allows you to visualize the hierarchy of your website and gain a general overview of how the page should look. A well thought-out site map does not only structure content — it also determines the site’s navigation. Sitemaps also serve the purpose of laying out which links lead to which websites. Pages can be sorted in order of their importance, and descriptions for future content can also be drafted. As with every part of the web design process, the page structure should be neatly arranged and not contain too many subpages on a specific topic.

The site layout

In contrast to the sitemap, which plots the final design, the site layout deals with the arrangement and function of content on the site’s individual pages. The location of menus, how users access menu sub items, and where the site’s logo is positioned are all examples of important decisions that are made when hammering out the details of your layout. Knowing which additional aspects should be incorporated into the site’s layout depends heavily on the type of content that is displayed. Further website functions whose implementation need to be carefully considered are:

•  comment functions for visitors
• social media buttons that allow users to “like” and share content
• ads, banners, and videos of advertising partners
• affiliate links to partner companies that are advertising on your website.

It is additionally worthwhile to get an early start in thinking about whether to optimize your website display for various devices (PC, tablet, smartphone, etc.). It is often necessary for the site’s individual components to be rearranged to fit the specific needs of these different devices. The sitemap and layout are largely entwined with one another and should therefore be simultaneously integrated into the planning process.

Setting up an internet site is no longer an undertaking that needs to be left to the pros. Content Management Systems (CMS) conveniently remove much of the hassle commonly associated with carving out a convincing web presence.

CMSs offer users a graphical interface that gives professional and aspiring designers alike the ability to customize content by adding on and adjusting different components. Previous experience in programming languages, while helpful, is not required for use. The range of functions of these homepage toolkits varies quite significantly depending on the program. Most providers offer a range of different packages with varying prices depending on the desired performance. Freeware versions are also available, though their selection of features do tend to be limited and should only be used for rudimentary websites.

Those seeking to set up a professional homepage should be well-versed in the fundamentals of programming languages such as HTML and CSS. These programs give users more elbowroom for many of their design needs. It should be noted, however, that maintaining a site built directly on source code generally requires more time and energy than is needed with a conventional CMS. Outsourcing the construction of your site to a professional is also an option to be considered. Always be aware of which goals and expectations you have for your site prior to contacting a professional agency. These should be clear to both parties before work on the project starts.

As soon as you know the type of content your site is to offer and have worked out the details of its structure and design, the final step involves drafting a schedule for your web presence. For larger projects, it may make sense to subdivide your schedule into several different stages (e.g. drafting basic content, implementing foundational design, etc.). No matter how you decide to set up your timetable, it should always cover all the most important steps of the design process while remaining clear and easy to understand. Don’t forget that some individual portions of your project may need to be adjusted as you progress through the various stages; a good schedule always allows enough wiggle room for corrections.

Once the aforementioned steps have been completed and their various kinks have been ironed out, the scaffolding of your website should be starting to take shape. Now it is time to implement these points. Further aspects should also be considered when you finally break ground on your cyber construction site.

In the next part of our web design basics series we will be covering how to practice user-friendly homepage design and what things you need to be mindful of when using logos and colors.