I'm Zoia Bilash, designer. I make websites. Do prototyping, design, html/css layout.
I'll tell and show you. What we discuss with client before project starts. How and why I use prototypes. How I make decisions about structure and design of website. How finalization and approval with client goes.
Area of responsibility. Design solutions for the company's communication tasks:
About company. Digdata conducts researches of consumer behavior in the Ukrainian and foreign markets. It helps companies to study the market, find out the habits and preferences of consumers, evaluate the effectiveness of an advertising campaign.
Objectives. Refresh company's image. Make the site reflect the high status of the company. Attract new customers. Help prospective clients learn more about the company.
Solution. Updated the website design. Structured information about the company in such a way that the visitor would immediately find answers to key questions: what the company does, what problems it helps to solve. Conducted initial SEO analysis, found popular search words and phrases. Used them to tell more about the company's services. Made a Russian-language, English-language, Ukrainian-language versions of the site. As a result, the site traffic has increased more than 1.5 times, people spend more time on the website.
Disadvantages of the old company website: outdated design, complex text, illogical accents.
The advantages of the new page: expressive design, structured text, logical accents.
Problem. The company's old marketing materials had a number of flaws. The information was presented unsystematically, common phrases did not help to understand the essence of the proposal and make an informed decision about cooperation, the accents were placed randomly, the style of presentations was outdated.
Solution. Updated presentation design. Defined the pupose of the presentation: to help a prospective client learn more about the capabilities and advantages of the company. To make the story about the company's services more visually compelling I used illustrations, transitive headings, factoids.
Objective. Based on the results of the research, the analyst generates an analytical report for the customer. Often the analyst focuses more on the content of the report and thinks less about the visual component. If the company does not have uniform standards for preparing analytical reports, reports look unpredictable.
Solution. Developed uniform standards for the preparation of analytical reports. Provided instructions on how to design slides, set a modular grid, picked up colors and fonts.
Objective. We wanted to prepare something special for the company's employees as a present for the company's birthday.
Solution. We considered different options, including the classic ones: cups, T-shirts with the company logo and symbols. But it seemed that we better come up with something special. I offered to make a unique gift for everyone: I drew vector portraits of employees, ordered a print on a hoodie. What it looked like:
Objective. Present company's products and services and build trustful relations with potential cliets.
About company. The company sale land in the Moscow region and constructs houses and cottage settlements.
I sent a brief, asked the client to provide some information about the company. Let me explain in detail what information I collect when I develop website structure.
1. Information about the company:
Information about the field of expertise and about services that the company provides helps to better understand how the client lives. How his business is structured and functioning. It is important for me to understand what goals the client sets. And make the project help client to achieve the goals.
I look at competitors' websites, do initial SEO analysis. That is, I look for some statistics on attendance of competitors' websites. I try to understand what methods they use to attract and retain audience. I handle this information differently, depending on the request. Sometimes the client wants his website to look differend from those of his competitors. Sometimes he suggests that you borrow some good ideas from competitors.
I use information about the needs of the target audience to form the structure of the website. Interests of the audience is my main focus. I'm trying my best to make the website helpful.
2. Design preferences:
— I ask the client to indicate preferences in the form of general emotional characteristics (the site should be strict, elegant, provocative, graceful, glamorous, etc.).
This information will be useful when choosing a palette of colors and visual material.
3. Technical issues, site functionality:
The functionality affects the price. Each additional function increases workload, implementation takes time and effort.
4. Additional suggests and comments:
— the client himself focuses on what seems essential to him regarding website development.
I have formed the information structure of the site. I took into account the needs of the target audience, the tasks and goals of the project, the wishes of the client. The prototype contains sections:
I show benefits to grab attention and arouse interest.
I brought the infrastructure and communications sections to the top of the landing page for several reasons. Firstly, the client emphasised that developed infrastructure is one of the significant advantages of the village in comparison with competitors. The second reason is the benefit to the audience. Our audience is married couples with children, business owners, top managers with incomes above average. Those people are used to think a lot, analyze, make decisions, be responsible for others. They cannot be carried away by beautiful pictures and empty promises. They care first of all about the comfort and safety of their own and their loved ones.
I do not use photos of the village on the website. A good angle can greatly embellish a place and create false expectations. I show panorama, hoping it helps visitor to see what the village and surroundings really look like.
The classic way to increase the interest of a potential buyer and differentiate the company from the competitors.
I provide information about the company in order to increase the level of visitor's trust.
When creating the design I was guided by the general characteristics of the website that the client outlined in the brief: "informative", "forest", "environmentally friendly".
Objective. Help prospective clients to know more about company's services and products.
About company. The company supplies trucks and spare parts for trucks.
I prefer to get involved in a project at initial stage. I want to understand clinet's problems and objectives. Listen to the client carefully, study the context, get to know the audience, look at the competitors. That is, first collect information, and then start development.
But freelance projects are not always like this. Sometimes you join a project when all the analytical work is done. The project is half way to implementation, it remains to guess its trajectory and do what you can to bring maximum benefit. That is just what happened this time. The client provided materials for the project. The structure of the website was already agreed, the texts were grouped by pages and sections. The client's request was "to place the information presented in the file in a coherent, structured way."
Given the request, I worked on the site, to some extent, as an artist. I looked not only from the point of view of logic, but also from the aesthetic one. I carefully selected pictures, experimented with harmonious color combinations, and looked for interesting composition.
Thus, I had a text document at the input, website at the output.
Objective. Present company's services in the Internet. Provide information about the company for clients, casual visitors, or potential suppliers. Strengthen company's image.
About company. The company produces and distributes food products. Makes snacks, distributes snacks, sweets and groceries.
We discussed client's technical and design preferences. He provided text about the company, list of preferable sections, text to fill webpages.
Based on our discussion I prepared prototypes. We agreed upon website structure, position of information blocks and elements.
Client emphasised that he needs website not just to share information but also to make image of the company stronger. So I focused on making the website visually attracive and vibrant.
Main page is a show-window. Quick look at the main page gives you understanding what are the company's key fields of expertise. Text is structured in the same way as a content section in a book. It doesn't matter how interested you are, you see the big picture in seconds. You go from one heading to the other, and then dive deeper if you wish.
Page "About the Company" is crucial for new clients. I used text that was provided by the client, but then I refined upon it. Later I'll explain what improvements I made.
The structure and appearance of other pages take over those of the main page. I prefer to use less text and leave space for visual accents.
We discussed the client's preferences. Looked at competitor' websites. Discussed what visual solutions the client liked. Defined his dislikes.
The client's wishes for the design were mostly emotional: simple, laconic, bright. While working on the main page, we tried variations.
The first version was in shades that are classic for a snack theme. At first, the client considered this option, but later moved away from it for several reasons. The assortment of the company is more diverse. In addition, similar color solutions were used by competitors from whom the client wanted to distance himself.
The client suggested trying a design with an emphasis on sweets. We decided that a light theme is better than a dark one. But the client was also hesitant about this option. Still, I wanted the assortment of products to be presented more fully.
The third version was agreed with minor edits:
While working on other pages, I used the same principles — bright visual blocks, structured text, a minimum of information noise.
The page "About the Company" — is the semantic cernel of the website. A visitor interested in further cooperation comes here to find out more.
The client provided a text about the company: "The FoodMarket company has been producing products under the Partytime trademark since 2004. Our goal is to provide the consumer with a quality tasty product. FoodMarket holds a leading position in the sale of popcorn and chips in the Northwestern Federal District. Significant work experience makes cooperation with the FoodMarket company profitable and reliable. We are always ready to cooperate with new clients of the wholesale, network and retail segment. And are ready to offer more than 50 units of products under our brand. For our products, we use only high-quality raw materials that meet all the quality requirements for this type of product"
We agreed that the text was "raw". In order to use it on the website, it still had to be worked on. In the process of editing:
Decide who the audience is. The audience is diverse. An old client, a casual visitor, or a potential supplier can come to visit the website. Not everyone knows what the company does. I propose to write about the company in simple words. So that a newcomer could understand instantly what the company does and in what ways it could be helpful.
Address the visitor in a targeted manner, bind the text to the audience. We address customers and suppliers separately. For different audiences - different advantages and arguments.
Emphasise call for cooperation at the end of the page.
I created the design of the home page and other pages based on the fact that the site appeals more to emotions. For this page, it is different. The focus here is on information. Therefore, I pay special attention to the structure and accurate layout of the text. Headings and subheadings form a hierarchy. Each semantic block is separated by a background. I did everything to make it easy to read and not be distracted by anything.
At resolution, where there is not enough space for menu, I implemented a hamburger menu: