How we design a graphic project

Designing a website is a creative process which is carried out by complying a few very important
steps. Careful following these steps allows us to meet the substantial aspects of the website and
achieve all the established goals. The more accurately we know every detail, the better the outcome
will be. The profits of that effort may be incalculable in the future. This is why taking this matter
seriously is the key to creating a fully considered system which not only will be beneficial for our
client but also for their customers. Benefit for the website owner would be to gain new users and for
users, quick, comfortable search and ease at using the website. Let us take a closer look at all these

Preliminary introduction to the subject

This is the step where we think outside the box. We take a wider look at what we want to achieve. We interview our clients and it allows us to get to know the brand in which our client operates or intends to. We also study the products/services which will be offered on that website. What is more, we do separate research about strong and weak sides of that certain activity. It is also very important to take a look at our client’s competition and see what could distinguish the client from the rest.

Meeting the goals and expectations of the website

If we have the general draft of the company and we understand its activity, we can go a step further and define specific goals for our website. All of it will go for nothing if we don’t meet customer expectations. For example, the main aim can be to sell a product, therefore we need to focus on the best exposure and comprehensive description of that product. If our client already has a website, our job is to analyze it, find its weaknesses, think what to change and improve. It may be that even little changes can improve the conversion of the website. The next thing to do is to determine what are the business objectives for the website. There are different objectives for an online shop and different for a company which provides services. It is important because main purposes of the website should be displayed plain and simple to everyone’s attention. They should have a higher priority of displaying etc. What is also important is to get to know the group of website receivers. Their age, sex, habits and likes. Websites must vary due to different groups of receivers such as teenagers, adults or people with disabilities. They all require different design and functionality.

Structure of information

This is where we can bind elements together: design an appropriate flow of information, plan the logistics of how the website should work and test the user experience of using the website. This step allows us to avoid problems in the future, e.g. missing certain elements the later implementation of which could be troublesome and cause unneeded loss of time and money. A well prepared structure of information works like a map – it sets the direction and helps us not to drown in the ocean of information while using the website. The bigger the website is, the more its proper structure matters. The best way to find the ultimate design is to become a user and find any flaws that potential users may encounter. They should be able to navigate freely and intuitively find any information they need.

One of the best ways to present a structure of information is conceptual map:

OptArt - conceptual map eample

Creating functional models

If we already know how our future website and mechanism should work, we are good to go to the next step which is the creation of functional models. Such models can be treated as a formal specification of a project. They are a map of graphs which present the final functionality of the website. It is important on that step to already insert all the text data, headers and menu items. We group information here, separate modules and create a visual division between them. We prioritize elements whilst keeping in mind to design accordingly with the rules of functionality. It is good to determine on what devices our website will be displayed and, if necessary, there should be a mobile version of it. We cannot forget that the final graphic design is created in the next step so we should not focus on it right now nor treat it as final.

Models can be made on paper, chalkboard, flipchart or in any of free online applications available. What we use is completely up to us. Every single method has its perks and drawbacks. On paper it is hard to correct and in the same time keep the clarity of the project. On the chalkboard it is more effective to work with client since we can make quick changes if required.

OptArt - example of mockup

*Creating a digital prototype

In huge and complicated projects it is important to create a digital prototype based on functional models. It is nothing else than adding interaction to individual elements. Thanks to that, we can see how the movement on our website will look and how the elements are connected. However, this step is recommended for bigger projects. In smaller ones it can prove to be unnecessary.

Designing the graphic project

This is the step where we create the visual user experience of our website. If the user sees chaos – they will be discouraged. However, if our design will be pleasing, the user might get interested and stay a little bit longer. It gives us time to convince them to become our client! It is the most exciting step. To this very moment we coped with logistics and mechanisms but all what we do now will be visible on the final product. Now we can change the simple and raw models into a beautiful theme. We choose the pallets of neatly synchronized colors dedicated to certain receivers. We take care of the website responsiveness so it’s clearly visible on all types of devices starting from PC, through tablets and ending on mobile phones.

OptArt - example of project view