free consultation
Skilful selection of photos is not everything. We should start designing websites and working on a graphic design with an analysis and asking about the purpose of building the website.
So how is a page created? We start designing websites from planning and talking together. See this short guide.
Websites that meet the expectations of the company and its customers require an in-depth knowledge of the company and the team. The planning of the website is done together with the client.
Workshops and a joint conversation are the basic point in the implementation of a website that meets expectations. A meeting and at least two iterations with the client is necessary to be able to rely on facts and evidence, not guesswork. It is here that we collect information about the project, determine the method of communication and the course of work.
During the first iteration, we get to know the client's company and team. This is the most important stage on which the consistent and proper preparation of the user's path and the creation of the product concept depends.
At this point, we learn about the business model, strengths and weaknesses of the company that should be taken into account when designing the website. Thanks to getting to know the company's values, we are able to personalize the logic of moving around the website (user flow), select appropriate functional and visual solutions, and add value.
Attention to detail and consistency. All this so as not to create another version of a 'clone' of your competition's website. The user is bombarded with hundreds of websites that are confusingly similar to each other, from the banner layout to the colors and often also a set of photos.
It is worth approaching the process of website development in a unique and creative way to be able to extract 'that something'. It is on the basis of added value (be it a useflow solution or an approach to the UI graphic layer that will positively surprise the user) that we have a great chance to distinguish and interest the user in the company and its offer.
It is worth thoroughly discussing the expectations and first visions of the client's team for the product being created.
Second iteration.
Meetings that seem one-sided help to establish the facts. The collected information will be used to define the assumptions, illustrate the first vision and goals that are set for the designed website. It is here that we often learn about the challenges set for us by the team, but also the reasons for changing the website or building it from scratch
Stage effect
You will get to know the profile and needs of your client (end recipient of the service) better. Together we will set the assumptions and goals that your website will achieve. We will determine the added value and uniqueness of your business, which is worth translating into the final product.
Get to know the competition from the inside
It is also worth finding out what squeaks in the grass. Getting to know the competition's websites and the solutions they use will help to verify the assumptions and perhaps draw new conclusions. By carrying out the competition analysis in terms of SEO, we will be able to draw conclusions as to the technical and qualitative parameters of pages for key phrases in the TOP10 of Google search results. At the same time, it is a great way to spot trends, and thus the graphic design of the website will be more effective and efficient.
The effect of the page design stage
You will learn about the competition, the advantages and disadvantages of the solutions implemented by them.
Logo design, an important element of brand building
If you are creating your brand from scratch, it is worth taking care of a comprehensive approach to building the brand image before starting the website design. For this purpose, before starting work on the website, the brand strategy, visual identification and logo should be created first. See product design in our digital agency.
Learn about the process and webdesign process in our agency.
We got to know the business goals, the end recipient and his expectations. We know who the main competition is. It's time to meet the assumptions made during the workshop.
Learn about good web design practices, building the UX layer. See what UX design is.
Usability of websites
What is it and how to define it.
To be able to talk about usability and user experience design, let's define the concept itself. Usability, i.e. efficiency, effectiveness or user satisfaction with the use of the product. Used interchangeably with the word functionality, i.e. ease of use to accomplish a specific task or goal. (see what UX is)
Designing userflow diagrams
What is userflow?
Userflow is a diagram, a visualization of the process of the path that a user must follow on a website to achieve a goal or perform a task, e.g. from entering the website to submitting a query.
A well-crafted user journey:
- is the basis for the proper functioning of the website
- allows you to achieve the highest possible conversion,
- will allow you to avoid mistakes and save time at subsequent design stages.
It is worth realizing that the basis is the usefulness and intuitiveness of the adopted solutions. Even the most beautiful website without a properly implemented userflow will not convert, on the contrary, it can become a nice but useless product.
When designing a userflow, we ask questions about the purpose, about motivations for making a certain decision by the user, about the necessary information on a specific node of the process.
We focus on making the adopted solutions easy to use, intuitive, trouble-free for the user, because positive experiences affect higher conversion.
The use case diagram, which is the fastest way to the goal, will help to develop possible scenarios of the customer's path leading to the goal.
Possible scenarios
At this point, let's also consider use cases and user scenarios, i.e. possible paths for the user to achieve the best possible conversion.
An example page conversion could be, for example:
- carrying out the purchase,
- transactions,
- stay on the site as long as possible,
- registration on the portal,
- subscription to the newsletter,
- filling the form,
- contact from the website (sending an e-mail or telephone)
More about micro and macro conversions and their tracking in Google Analytics.
What is information architecture?
AI, i.e. organizing and designing structures. It is the organization and arranging of information in appropriate categories so as to obtain the best usability of the product.
Structured data allows you to find information better and has a positive impact on the SEO optimization of the website. It allows you to gain valuable traffic from the search engine
The website structure designed by the UX designer is the organization of information in the form of appropriately selected types of subpages, e.g. product, entries, services, main pages and subpages containing detailed information.
Due to the best possible results in SEO optimization, the structure of the website and the subpages used should be equipped with appropriate types of key phrases related to the type of subpage.
Proper arrangement of content into categories (silos) is also an important aspect of SEO optimization and website usability. Each silo is a cascade of nested subpages containing information from general information at the top level to detailed description of given related issues on subsequent subpages embedded below.
Links between the subpages of a given silo are made by means of internal linking, creating thematic silos.
What is worth remembering when designing themed silos?
Links between the subpages of a given silo are made by means of internal linking, creating thematic silos. It is worth remembering that well-designed internal linking can bring several benefits:
- creates the page structure,
- keeps the user on the website, because he is led from one text to another, and his long presence on the website is read by robots as information that the website is interesting, so it is worth showing it to other users → climbs up in the search results,
- stops search engine robots that visit (crawl) the website also through internal linking → they get to know its thematic scope better, scan keywords and phrases, so they can position it more effectively,
- leads the customer from the entry page to the order placement page, while properly designed internal linking will lead the customer regardless of the stage of the sales funnel to its narrowest part, i.e. until interest in the purchase and taking action.
That is, designing a wiframe and a prototype (prototyping).
Mock-up of the website is a stage that allows you to visualize the user journey process in a quick and simple way. Properly implemented sequence of mock-ups in the lower (lowfi) and higher (hifi) form allows for a gradual transition from diagrams to visual blocks.
The development of mock-ups enables efficient product testing before further work. (see UX prototyping tools)
At this stage, the UX designer visualizes all previously developed assumptions and use cases.
When designing the user experience, we try to answer the following questions:
- is the transition of the process simple and intuitive for the user?
- can the process be made simpler?
- Did the user get what they came for?
And speaking of wiframe, what is it?
This is nothing more than a diagram that describes the structure and user interface. During this stage, only grayscale elements are used - lines and boxes. Elements such as video, text, graphics or images - they are placed only in the form of symbols.
Only at the next stage will they be replaced with actual graphic elements.
Preparing a wiframe mock-up gives you many benefits:
- allows you to visualize the project and give it specific shapes;
- allows you to understand the web design;
- helps in estimating the cost of website design;
- helps to estimate the amount of work needed to finalize the website design;
- gives a great chance to make corrections after consultation with the client.
So the final interface of the website is designing the website (product). It is a communication tool used to achieve goals. This final stage of translating the prototypes made by the UX designer into the visual UI layer. The designed graphics, i.e. the UI layer, is responsible for the final appearance of the website.
Website graphic design - UI
That is, web design and final website interface, product. It is a communication tool used to achieve goals. This final stage of translating the prototypes made by the UX designer into the visual UI layer. The designed graphics, i.e. the UI layer, is responsible for the final appearance of the website.
Moodboard, i.e. a board containing collected inspirations for the created graphic design of the website.
Before starting design work, it is a good idea to do some inspiration research, which will serve as benchmarks for the graphic design.
Boards with inspirations help the UI designer to show the direction in which he wants to go when talking to the client. Such a visual presentation of the concept of style allows for faster and often accurate decision making and narrowing down of the style, colors, type of font and other graphic elements used in the project.
Designing UI websites includes preparation of the final appearance of the product, website, store, application through, among others:
- creative and modern solutions of mechanics and functionality from prepared mock-ups and prototypes,
- choosing the right color
- visual development of navigation elements, forms (zero and active states, e.g. after hovering),
- development of switches, buttons, components, all kinds of sliders, sliders, icons, notifications, progress bars or message windows,
- selection of the font for the project, size and weight,
- arranging the content in the sections of the page,
- maintaining and consistency of the chosen style for all elements of the project, which makes it coherent,
The design system in website design is a set of rules and good practices. Consistent image of products of the same brand. For larger projects, it is worth implementing and building sets of rules and dependencies and guidelines for further product development. Thanks to this, we do not have to design elements anew (or copy from previous projects, which is often marked by human error).
The design system, similarly to the brandbook, unifies once designed graphic forms, describing them to give consistency and one style for the entire line of designed products. The system itself is often not only a visual layer and a set of developed dependencies, but also the company's vision and communication.
Also check :
At this point, it is also worth stopping for a moment on the issue of colors, because at this stage you do not use the gray scale anymore, but the full palette of colors used in the project. Their selection cannot be accidental.
Consider:
how many colors to use on the page?
what will the colors be?
why exactly like this?
what are they supposed to convey and what effect do they have on the user?
As to how many colors to use on a website, there are no clear guidelines and rules. However, it is worth avoiding extremes, i.e. excess and deficiency. In the first case, the page will be motley, in the second, grey.
The creators of fashion and interior finishing follow the rule: 60-30-10 and it is worth taking this rule from them. According to it, the dominant color should occupy 60% of the page area, the second - contrasting - 30%, and the third 10%. The last color is only to complement, emphasize the dominant or contrasting color.
See our offer:
There are three methods of selecting colors for a website. The first is based on the taste of the owner. This determines the dominant color, and based on color theory, a contrasting and complementary color is selected. The second method is to choose a dominant photo that will characterize the page. It is from it that the dominant color is derived and then, according to the color theory, it selects the rest. The third method is based on color psychology.
According to it, a color is chosen that is supposed to cause a certain effect.
Here are some examples
red - energy, love, dynamics;
yellow - joy, optimism;
green - trust, credibility;
blue - professionalism, confidence, stability.
When choosing colors for graphics and page layout, you also need to remember about the color of the font.
How to choose a font color on a website?
It's very simple here. A very dark gray will be best. Why? Because users are used to it and they think it's black. Such texts are also easier to read and scan faster. Keep black for headers. First, that thanks to this they will stand out more, and two: they will facilitate the aforementioned scanning of the page.
Don't forget the white color. It allows the reader to "breathe" and is an excellent counterbalance to dark text. Texts that are composed in contrasting colors are best read. So if you want to reverse the situation, white letters must be found on the black background of your page.
Interestingly, the reversed situation (black background and white letters) is also very useful.
If your page will be displayed on mobile devices, it will use less battery than a white page, and your readers' eyes will tire much less while reading.
How to arrange colors in a graphic design?
The colors you choose on the website must emphasize what is important to you and the user. The most important elements must therefore be accompanied by the dominant color. The complementary color must be placed where you post additional information. The third color is only for visual supplementation, i.e. it can be used to color frames, highlights, etc.
Digital Agency Hauerpower
Copyrights 2010-2022
