The web graphic design process is a complex process of a UX/UI designer creating an effective product that combines functionality and aesthetics. Why is it so important?

A user who visits a website wants to receive immediate information or perform a specific action. Such an action may be: buying a product, registering, filling in a form, etc. If this task is not thought through at the stage of website development - the user will give up and go to the competitor's website. If the website is not intuitive and badly designed, the most beautiful graphics will not help to fulfil its goals.

In this article, I will take you through the entire web graphic design process.  From explaining who a UX/UI designer is, to the whole course of his work on a digital product.

Table of contents:

  1. Who is and what does a UX/UI designer do?
    1. What does UX design stand for?
    2. What does UI design stand for?
    3. What good practices should a pragmatic UX/UI designer excel at?
  2. How does the web graphic design process work?
    1. Project brief
    2. Sitemaps
    3. Wireframes
    4. Graphic design
    5. Preparing the final graphic design for the client and the development team.
  3. Why is the work of a UX/UI designer when designing a website crucial?
    1. What does the customer gain?
    2. What does the development team gain?
  4. How does the web graphic design process work? - summary.

Who is and what does a UX/UI designer do?

UX Design and UI Design are two areas of design that cannot exist without each other. While the UX designer is responsible for making the product as user-friendly and intuitive as possible by researching the user's needs and behaviour, and meeting the client's main objectives. UI designer is responsible for the look and feel of the interface through which the user will use the product.

The main difference between the two is that UI is the responsibility of the graphic designer, while UX is not necessarily. A person who understands the business, customers, their behaviour and expectations will do well as a UX designer. However, as UX and UI design strongly correlate with each other and because of that designers usually specialise in both areas.

What does UX design stand for?

UX, or "User Experience" - as the name suggests, this term is used to describe the sum of impressions and experiences of a user that accompany him or her while using a given product or service. This design is about researching and learning about user needs and solving their problems.

What does UI design stand for?

The aim of UI, or User Interface Design, is to design a visually consistent, aesthetically pleasing, readable and intuitive interface. This is how users will interact with the application. Each application, website, portal or online store (e-commerce) has a specific layout and appearance. The visual part of the interface consists of:

  1. typography,
  2. colour scheme,
  3. paintings and iconography,
  4. design of elements (buttons, forms, etc.),
  5. interaction of elements,
  6. animations

If you are interested in creating a website for your company, take a look at our offer.

What good practices should a pragmatic UX/UI designer excel at?

Jakob Nielsen in 1989 formulated the principles of the "discount usability" approach, which most profoundly influenced the way interfaces are designed. On the way of thinking about usability, intuitiveness and comfort in using interfaces of web and mobile applications.

Nielsen's 10 heuristics, and the graphic design process.

  1. Communicate system status. The system should inform users of what is happening, giving appropriate feedback. The timing of this response is also key. (messages about errors entered by the user into inputs; loaders; notification that a product has been added to the basket, etc.)
  2. Keep the system in line with reality. The system should speak the language of the user. Using words, phrases and concepts familiar to the user, rather than specialist terminology.
  3. Give the user full control.  Help the user to return to the previous action and move on. If the user gets lost, they should know how to get back.
  4. Stick to standards and maintain consistency. Use the same words for the same actions. Be consistent in giving styles to the graphical elements of the interface. Stick to one graphic style throughout the site, usually related to the company's visual identity (branding).
  5. Prevent mistakes. In an ideal scenario, interaction with the site should be so smooth that error messages are not present at all.
  6. Let you choose, rather than forcing you to memorise. A convenient website can give the user relevant information when he needs it. This way, he does not have to rely solely on his memory.
  7. Ensure flexibility and efficiency. Provide the ability to accelerate the user's path through the interface.
  8. Take care of aesthetics and moderation. Post only the information you need. The more information there is, the harder it is to read.
  9. Ensure effective error handling. If an error occurs, it should be clearly described. Information should also be provided on what the user should do next.
  10. Take care of support and documentation. The system should be intuitive, but you can't expect it to be so for everyone. Provide instructions in obvious places for users who get lost (use notifications, instructions, tooltips to point the user in the right direction).

How does the web graphic design process work?

Depending on the system of work in which the UX/UI designer works - the web graphic design process may differ in the division of responsibilities. In this article, I will describe what the graphic design process looks like when a designer works closely with a project manager.

Project brief

It all starts with communication between the project manager and the client. During this communication a project brief is created. The brief contains key information about the future project. What type of website will it be, why is it being created, what are the business goals, what is the target group, what differentiates the company from its competitors, what development plans does the company have in the future, etc.? The project brief also includes content and materials that the clients have and want to put on the website.

The brief serves as a fundamental and starting point for the designer to move forward in the design process.

Sitemaps

A design brief contains many different types of information. It is often difficult to understand how these should be organised and included. Without clear guidelines, it is easy to design a bad UX. Illogical content structure and poor navigation are two of the most common problems of websites. This leads to a bad user experience. The graphic design process in the next step consists of creating a sitemap.

What is Sitemap?

Visual sitemap is a hierarchical diagram. It presents the information architecture of the website. This architecture is a representation of the website organisation and the way particular sections and subpages are related to each other. To illustrate this better, let's imagine that we are creating a map for an eCommerce website. In the case of this site, a section might be a product category. And a sub-page could be a page containing detailed information about each item.

Sample sitemap - web graphic design process.
Sample sitemap - web graphic design process.

What are the benefits of creating a project sitemap?

  1. It is the only source of truth for the entire team involved in the project,
  2. Eliminates unnecessary pages,
  3. Eliminates repetitive content,
  4. Prioritises information,
  5. Minimises the number of steps required for the user to perform an operation,
  6. Simplifies the process of developing the website with future functionality.

Wireframes

The same view can be constructed in many different ways, but only a few will ensure that the information is conveyed correctly. This will make the software or website easy to use. Establishing a good interface structure is probably the most important part of software design. Therefore, the next stage after getting a design brief and designing a sitemap for a website is to create wireframes.

What are wireframes?

A wireframe, or mockup, is a diagram that is designed to help the client, developers and designers think and communicate about the structure of the software or website being developed. Wireframes at the initial stage, are most often created using a piece of paper and a pencil. At the final stage of wireframing, finished components are developed.

Example wireframes - web graphic design process.
Example wireframes - web graphic design process.

Wireframes - a step towards developing interface components.

Often, the base of components for interfaces is already prepared earlier by the designer. On the basis of such a base, the designer can select the appropriate components for the project, applying possible corrections resulting from the design arrangements made at previous stages of the website creation process.

What are the benefits of developing wireframes?

  1. help communicate between the team responsible for the project and the client,
  2. save time and enable subsequent corrections,
  3. They create easy-to-use interfaces,
  4. they help to determine the layout and visual structure of the interface.

Graphic design

Once the full structure of the website has been developed, it is time to visually design the interface. At this stage, the colour scheme, style, typography are selected. All these aspects for which the UI design area is responsible.

The appearance must be consistent with the theme of the site. Designers, when they start working on a website (based on materials collected previously), start to create a certain vision of the website in their head. One of the first things that arises in the designer's mind is the colour scheme of the site, to which they must match the rest.

The visual design starts with the homepage, as this is the page the user enters first. Before the designer moves on to the other subpages, the home page is sent to the client. This process may repeat many times until the style of the homepage meets the client's expectations.

Based on the style of the homepage, the other views will be designed, in active communication with the customer.

Preparing the final graphic design for the client and the development team.

The final graphic design of the website consists of all views developed according to the created interface structure (sitemap). And also the base of components (wireframes) which were used in the project. Additionally, the project may be extended, depending on the budget, with views in mobile and tablet versions.

Why is the work of a UX/UI designer when designing a website crucial?

Steve Jobs once said: "Design. Design is a funny word. Some people think it means appearance. But if you look deeper, it's really about how things work."

Without a properly developed design or its lack, creating a website is impossible. If we are talking about a website that is supposed to meet the business objectives of the company, but above all to be a user-friendly place.

What does the customer gain?

  1. It receives a design brief, in which all the design assumptions are written down,
  2. The structure of the website interface, which is a visual representation of how the site is organised and how the different sections are linked, The final graphic design
  3. The final graphic design of the website, with the components developed,
  4. Confidence that the website is designed in a professional manner,
  5. Consideration of good UX/UI design practices An open door for future website development.

If you are interested in creating a website, check out our offer.

What does the development team gain?

  1. graphic design created for the technology in which the website will be coded,
  2. all necessary materials in appropriate files
  3. development version of the project - this solution allows for easy coding and downloading files in various formats,
  4. constant communication with the designer

How does the web graphic design process work? - summary.

The whole process of graphic design of a website is very time consuming. Each stage should be approached with the greatest commitment. To make the project combine functionality and aesthetics.

If you are interested in the graphic design process and are looking for a professional web developer for your business, we invite you to contact us. Our team is hungry for challenges and our specialists will make going through the website development process a pleasant journey for you.

Are you interested in creating
your own website?