How to design a website

Do You Need a Website?  – contact us

 

The layout of the site, i.e. its graphics, must be consistent across all of its subpages. This coherence consists of:

  • the same colours used across the webpage;
  • size of the font used;
  • content formatting: the relation of titles to headings, for example, using bold or italics;
  • highlights (e.g. links) on the site;
  • readability, simplicity and implementation of the most important functions (registration, shopping, service);
  • form of naming;
  • logo in the right places;
  • the unique feature of the offer (Unique Sell Proposition) shown in the most appropriate places;
  • consumer path in the store displayed, i.e. bread crumbs or so-called trace from breadcrumbs.

Breadcrumbs help to maintain orientation in the area of the website. That way, the user or Internet robot more efficiently identifies categories, menus and subpages. It is easier to define links between pages and specify the internal structure.

 

 

Breadcrumbs can be divided according to the way in which they were created:

  • Location breadcrumbs show where the page is located in the website hierarchy, location breadcrumbs are static.
  • Attribute breadcrumbs give information that categorises the current page.
  • Path breadcrumbs show users the steps they took to end up on the current page.

A breadcrumb trail or path based on viewing history is typically rendered as below:

  • Page viewed 1 > Page viewed 2> Page viewed 3 > Page currently being viewed

Real example or small company website:

  • Home page > Services > About Us > Home page > Blog > Home page > Page currently being viewed

Typical breadcrumbs following a hierarchical structure are shown as follows:

  • Home page > Section page > Subsection page

Breadcrumb navigation is an important SEO factor. Google displays crumb traces in search results, so well-implemented crumb generation improves internal links and page structure.

 

Responsive Web Design and mobile apps

Did you know that designing every store page should start with a template for mobile devices?

Even Google distinguishes two separate indexes for the mobile version and prefers pages that are useful and efficient in this version.

A mobile page probably doesn’t contain as much information as a page intended for stationary devices. You can carry out such an experiment, but you will only get irritated by the excess information displayed. Also remember that in the case of mobile phones, for example, frequent scrolling with the thumb and quick browsing cancels the value of all marketing and USP techniques that work on the desktop.

RWD (Responsive Web Design) is a form of designing a mobile website that automatically adapts to the user’s device that is browsing it. As a result of your adaptation to RWD requirements, your store must have several graphic versions. Usually it is a version for desktops, mobile phones and laptops. Each of these devices has a different view surface and resolution, and is operated differently by the user. For example, a laptop usually uses a mouse or touchpad, a tablet is operated by hand, and a phone with your thumb or forefinger. The ideal solution is to hire an experienced UX / UI expert who will design each page separately for specific devices. Similarly, product pages, categories and static subpages. If you use ready-made graphic templates, usually RWD solutions have already been implemented, so you only need to focus on improving and optimising these templates according to your needs.

 

 

Like any solution, RWD has both advantages and disadvantages.

Advantages of RWD:

  • Saving time,
  • Higher efficiency,
  • Communication within one domain,
  • Lower costs of maintaining one version of the site,
  • Better site indexation
  • Comprehensive tracking of website traffic,
  • Analogous navigation and information architecture on every device.

Disadvantages of RWD:

  • Additional costs at the beginning of the project (adaptation of one project to different versions),
  • Unnecessary transfer on the user’s side,

 

Mobile applications.

A mobile application is a program that is installed on a mobile device (e.g. mobile phone or tablet) and which performs certain functions . Examples are games or banks that create dedicated applications installed directly on to our phones. By default, several mobile applications are installed on each phone. E.g. browser or mail.

In principle, most of the functions carried out by mobile applications can be performed through a browser, but must be tailored to the applications specific requirements (e.g. bank, auction portal, social media) .

 

Applications of this type are divided into:

  • Operating without internet access
  • Internet, i.e. requiring access to online networks
  • Tailored to customer needs, e.g. auction portals, banks
  • Internet games – operating both online and without access to the network,

The mobile application should be useful, easy to use and engage the user. The application should be available on the most popular operating systems – iOS for Apple and Android for Samsung and other brands.

 

Types of mobile applications:

  • Related to customer service, e.g. banks
  • For communication, e.g. WhatsApp, Messenger.
  • Social networking sites – Facebook, Instagram, Twitter.
  • Navigation, e.g. Google Maps .
  • Mobile purchasing tools, e.g. Allegro, Zalando .
  • Weather applications, e.g. Accuweather .
  • Product search engines, e.g. Rossmann.
  • Sports applications, e.g. Endomondo .
  • Music applications such as Spotify .
  • Code scanners, e.g. SeeMore .
  • Loyalty applications e.g. Rossmann, Starbucks .
  • Applications for taking and processing photos, e.g. Retrica .
  • Games like Bubble Shooter .

 

What’s better? Mobile service or application?

There is no definitive answer to this question. It depends. To make the right choice (or opt for two solutions), you must carefully examine the similarities and differences, as well as the pros and cons of each solution.

The mobile service always requires a browser and an internet connection . If the link is too slow, the site may take a long time to load, which in turn may encourage users to leave the site. On the other hand, the mobile service has limited functionality and it doesn’t matter which browser or smartphone you use. In addition, the costs of designing the mobile version of the website are relatively low.

The user must first install the mobile application on their device to access it. Using it does not require permanent access to the Internet , although many functions and access to current information requires a network connection. The costs of creating an application are much higher than the mobile version of the website.

Finally, let’s summarise the most important information about websites and mobile applications in terms of the differences between them:

 

Mobile services:

  • Lower system requirements
  • Lower project cost
  • Greater data security,
  • No additional fees and commissions from operators and platforms,
  • Possibility to create one project for all mobile devices and browsers,
  • Easy upgrade
  • Positioning – easy to find by mobile search engines.

 

Mobile applications:

  • Fast access,
  • Application notifications about new products,
  • You need to create separate projects for individual systems,
  • The possibility of earning on applications,
  • Easy installation and subsequent access.
  • Advertising on mobile devices

 

How to choose good and useful graphics

What choice should you make? Which solution will meet both business and user requirements? Apply selected techniques for product design, development and testing, then repeat the entire synergic cycle once more. This time, let’s take the following factors into consideration:

  • Workshops ― Are a great way to develop an idea for a project. When you work as part of a team you’re likely to create more varied ideas. Together with the client you can decide which design solutions are the best.
  • User paths – The purpose of such paths is to determine if the tasks are properly designed and feasible, so they are useful when designing the process of using the product.
  • Digital product information architecture – Defines the basic product structures (content, names, category, navigation): materials related to information architecture are site content plans, site maps and page processes.
  • Sketches, skeletons and prototypes – Are used to generate and improve design ideas before building a product (tools allow you to evaluate, test and refine the design).
  • Usability tests – No one will assess the product more reliably than the real users, and it can be carried out in various forms depending on the time and financial resources. When conducting usability tests, you will look at the project from a different angle and you will see problems (or find inspirations) that you would never pay attention to yourself.

You can use free templates (templates, website designs), even for WordPress (https://pl.wordpress.org/themes/#). Use Google search by entering the phrase “free WordPress templates” and you will find plenty of them. Free templates like these have disadvantages that need to be mentioned.

Paid graphics page templates are also available. There are thousands of them, grouped thematically, for immediate download, for example on TemplateMonster (at https://www.templatemonster.com/) or ThemeForest (on https://themeforest.net/). The average cost of such a template for WordPress is $ 49.

If you do not find a suitable and ready-to-use solution for you, then you can order a template from scratch. For this you need a graphic designer who designs websites. For smaller projects, you can combine the budget for creating a template with the budget for User eXperience and web usability, but for more complex ones, I advise that  you hire a person who specialises in UX and graphics separately. Remember that creating a graphic design is only half of the work. After accepting the project, you still need to cut it, i.e. encode it for internet use, and you will often have to purchase the rights to the images used in the project.

templatemonster

 

Example of the category page

 

When ordering a website layout, you shouldn’t place all your focus on the home page. You will need to plan every page element that cannot be duplicated.

Usually, graphics are commissioned for the following elements:

  • home page;
  • category pages;
  • product presentation pages (landing page);
  • product list pages;
  • a shopping cart;
  • pages with texts (articles);
  • registration and login pages.

 

Landing Page

 

In the case of big websites or shops, it is good to build a team that describes the functionalities, graphic design (layout), and website structure. Large companies start building any website from the so-called UX sprint (User eXperience). A team of specialists are set up (usually in the fields of marketing, SEO, IT, User eXperience and User Interface) and create mock-ups of the most important functionalities. These mockups are put together by a usability specialist (UX) and only then will they reach the graphic artist who presents the first outline of the concept for acceptance.

Planning a good project in the User eXperience area will help you answer the following questions:

What are the business requirements?

What are the user requirements?

What will be the best design solution that will meet both the business and user requirements?

Even though you don’t have a team yet, you have a piece of paper, a pencil and scissors. List all the features of the project you are thinking about. Cut the pieces of paper you have written on into strips and place them on the table as you would like them to be presented on your website.

Related posts