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 de­vel­op­ing it for somebody else — good planning is essential for success. For this reason, it’s advisable to set aside adequate time for brain­storm­ing, drafting concepts, and making im­prove­ments. Taking the following points into account will help you create a more com­pelling and ap­pro­pri­ate 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 at­tract­ing the maximum number of clients in order to sell more products. As a general rule, websites should be con­sid­ered the flagship portrayal of the company or in­sti­tu­tion they represent. Whatever the intention of your website, it is im­per­a­tive that the goal of the site is reflected in both its layout and design.

Target audience and user ex­pec­ta­tions

Who are you trying to reach? Make sure to always focus on the as­sign­ment 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 re­quire­ments. The same rules apply to in­for­ma­tion portals or theme-specific forums. Es­sen­tial­ly, it is up to every website operator to be aware of whom they are ad­dress­ing, no matter the purpose of the content.

Many fields already have an es­tab­lished style for their content. Shopping websites, for instance, generally feature search and sort functions for their products. Every sector and target group is char­ac­ter­ized by its own unique set of qualities that shape their online pre­sen­ta­tion and content. Knowing your users’ ex­pec­ta­tions is crucial, even if your website is to perform beyond the typical range of functions normally as­so­ci­at­ed with its intended purpose.

The sitemap’s structure

Sitemaps are diagrams that depict the links and page structure of a website’s in­di­vid­ual 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 de­ter­mines the site’s nav­i­ga­tion. Sitemaps also serve the purpose of laying out which links lead to which websites. Pages can be sorted in order of their im­por­tance, and de­scrip­tions 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 arrange­ment and function of content on the site’s in­di­vid­ual pages. The location of menus, how users access menu sub items, and where the site’s logo is po­si­tioned are all examples of important decisions that are made when hammering out the details of your layout. Knowing which ad­di­tion­al aspects should be in­cor­po­rat­ed into the site’s layout depends heavily on the type of content that is displayed. Further website functions whose im­ple­men­ta­tion need to be carefully con­sid­ered are:

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

It is ad­di­tion­al­ly worth­while to get an early start in thinking about whether to optimize your website display for various devices (PC, tablet, smart­phone, etc.). It is often necessary for the site’s in­di­vid­ual com­po­nents to be re­arranged to fit the specific needs of these different devices. The sitemap and layout are largely entwined with one another and should therefore be si­mul­ta­ne­ous­ly in­te­grat­ed into the planning process.

Setting up an internet site is no longer an un­der­tak­ing that needs to be left to the pros. Content Man­age­ment Systems (CMS) con­ve­nient­ly remove much of the hassle commonly as­so­ci­at­ed with carving out a con­vinc­ing web presence.

CMSs offer users a graphical interface that gives pro­fes­sion­al and aspiring designers alike the ability to customize content by adding on and adjusting different com­po­nents. Previous ex­pe­ri­ence in pro­gram­ming languages, while helpful, is not required for use. The range of functions of these homepage toolkits varies quite sig­nif­i­cant­ly depending on the program. Most providers offer a range of different packages with varying prices depending on the desired per­for­mance. Freeware versions are also available, though their selection of features do tend to be limited and should only be used for rudi­men­ta­ry websites.

Those seeking to set up a pro­fes­sion­al homepage should be well-versed in the fun­da­men­tals of pro­gram­ming languages such as HTML and CSS. These programs give users more elbowroom for many of their design needs. It should be noted, however, that main­tain­ing a site built directly on source code generally requires more time and energy than is needed with a con­ven­tion­al CMS. Out­sourc­ing the con­struc­tion of your site to a pro­fes­sion­al is also an option to be con­sid­ered. Always be aware of which goals and ex­pec­ta­tions you have for your site prior to con­tact­ing a pro­fes­sion­al 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, im­ple­ment­ing foun­da­tion­al 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 un­der­stand. Don’t forget that some in­di­vid­ual 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 cor­rec­tions.

Once the afore­men­tioned steps have been completed and their various kinks have been ironed out, the scaf­fold­ing of your website should be starting to take shape. Now it is time to implement these points. Further aspects should also be con­sid­ered when you finally break ground on your cyber con­struc­tion site.

In the next part of our web design basics [Llink] 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.