Task
To create brand identity, logo, website (desktop and mobile), social media visuals.
The client provided complete freedom in
choosing the style and positioning in the market.
At the moment mobile version is not finished because of the war.
The client provided complete freedom in
choosing the style and positioning in the market.
At the moment mobile version is not finished because of the war.
Leonid Kozak is a young but experienced lawyer, who provides free legal services for Ukrainians and Crimean Tatars in Russia.
Logo & Branding
After market research and competitor analysis, I decided to make a short and meaningful brand name. And Leonid`s surname — Kozak was just what we needed.
The logo was to express confidence and strength of protection.
The logo was to express confidence and strength of protection.
The final variant.
It`s strict,
simple,
and reliable.
It`s strict,
simple,
and reliable.
White variants can also be used on b&w photos with a dark background.
Information architecture
At this stage I cooperated with the content-maker. Initially, there was twice more info on the main page and it was very long. But after discussion and corrections we left the necessary minimum.
The information architecture is built according to AIDAS formula:
A - attract the attention to Leonid (Hero image, About)
I - raise interest in services and advantages (Services, OSINT, Advantages)
D - convince customers that they desire the services (Clients Reviews)
A - action (Process, Order buttons)
S - make clients come back (Blog)
The information architecture is built according to AIDAS formula:
A - attract the attention to Leonid (Hero image, About)
I - raise interest in services and advantages (Services, OSINT, Advantages)
D - convince customers that they desire the services (Clients Reviews)
A - action (Process, Order buttons)
S - make clients come back (Blog)
Grids & layout
The website is made on a bootstrap 12-column grid.
Content is organized in widescreen blocks that are alternated with 2 column informational sections.
The pattern is: heading is centered, h3 heading is small on left, the main information is always on the right and takes half a screen.
Content is organized in widescreen blocks that are alternated with 2 column informational sections.
The pattern is: heading is centered, h3 heading is small on left, the main information is always on the right and takes half a screen.
Typeface
As the website is rather loaded with information the idea was to use an interesting font. Just have a look at that "a"!
As opposed to headings I chose well readable and sans serif body font.
In titles the indent is used to make text more dynamic. H3 headings are typed with 16 font so as not to attract too much attention.
The huge font is used to show numbered paragraphs.
As opposed to headings I chose well readable and sans serif body font.
In titles the indent is used to make text more dynamic. H3 headings are typed with 16 font so as not to attract too much attention.
The huge font is used to show numbered paragraphs.
Kharkiv Tone
42 pt
42 pt
Open Sans
16 pt
16 pt
Colors
Elements & icons
#687785
#687785
Text
#1d1b1b
#1d1b1b
Highlits
#dee2e5
#dee2e5
#ffffff
Buttons
#ef4e4e
#ef4e4e
UI elements
The elements as a whole website should be strict but still interesting.
Necessary words were highlighted with grey color on a white background or with white highlights on grey.
CTA buttons are red like SOS buttons that an average user associates with help.
Necessary words were highlighted with grey color on a white background or with white highlights on grey.
CTA buttons are red like SOS buttons that an average user associates with help.
Website pages
As the website is built on a white background, so the text is always black.
Slight fade-in-up animation was applied to text blocks and titles. Graphic elements are also with on-scroll animation.
Slight fade-in-up animation was applied to text blocks and titles. Graphic elements are also with on-scroll animation.
All the payment plans were categorized and structured into 4 plans. The most desired one for Leonid is slightly highlighted by red element.
OSINT investigations is rather new and interesting feature in the market so a section with info and 3 examples was dedicated to it.
In some clue words italic letters were used to attract users attention.
Submission forms
The main aim was to get leads from a submission form and send data to CRM. Fields included only name, phone and law category in a drop-down list.
There was also an application for an online consultation form, which included a date.
There was also an application for an online consultation form, which included a date.
Website
Check out all the details here.
