Ksenia Krivor – trainer for the development of emotional intelligence in New-York. Ksenia teaches private and corporate clients emotional literacy to increase their chances to become successful at work and in personal life.
To create a virtual business card for people to get to know Ksenia and her service before working together.
- To develop a unique design for personal brand promotion that’ll translate positive and trustworthy images and encourage people to cooperate
- Make it possible to order services on a website and buy courses
- To use the website as a presentation for public speaking
Main focus has to be made on a visual site aesthetic which should translate Ksenia’s personal qualities: confidence, professionalism, femininity.
We’ve decided to create a web design that will break user’s old habits so we’ve chosen custom typography, complex animations, using 3D and vibrant illustrations. Websites start looking less like sites, they pull people in and become an interactive part of their reality. We followed this trend – gave up vertical scrolling, added more background videos and animations for the site to look dynamic and quaint so users would want to examine and enjoy every detail of it and get a new interaction experience.
Overcome the website identity crisis
In most cases sites for businesses from one branch look alike. They have identical block structure and the only difference is logo or, sometimes, color scheme. It looks something like this:
- Header navigation menu
- A block with general information
- A block of news or corporate blog
- A block with a trading offer and CTA
- Feedback form or subscription to newsletter
We’ve analyzed Ksenia’s opponents, examined contest winners of the best websites (using Awwwards as an example) and identified general trends: minimalism, bold typography, breaking business-as-usual customer journey map.
Horizontal scrolling adaptation
The main difficulty in development has become fullscreen scrolling: we had to consider that screen height can decrease to 650px because of browser bookmark bars, for example, while its width stays the same. Mobile version of the site was even more challenging – tapping on the screen while scrolling has to be distinguished from tapping when clicking on a link or filling out the form. Moreover we had to adjust fullscreen scrolling to laptop touchpads so it’ll scroll correctly not only up and down, but right and left.
We have adjusted Adaptive web design to different devices’ resolutions and aspect ratio because every content element has to appear on the screen while scrolling and not overlap each other. We tried to cover not only 1920, 1440, 1366 but transition points too.
Video support in older browsers
During Layout we noticed some problems with background video display: transparency effect and blurring didn’t work on some elements which are not supported by some older browsers when using mobile internet in converse internet bandwidth.
We’ve reduced resolution and added different layouts so video displayed in older browsers and on as many devices as possible.
Running line implementation
We’ve faced the difficulty with positioning elements on the Z axis, the running line was overlapping elements or vice versa. In some cases feedback form overlapped videos or logos. For that reason background SVG-elements spread out on the page and were hard to adjust.
We have established smooth animation on mobile devices, developed JS for touch events, added some styles and effects for browsers that do not support modern CSS properties.
The administrative panel set up
While setting up the administrative panel we’ve faced a difficulty with the necessity of fullscreen scrolling. It should’ve worked the way that client could easily fill the page with content while at the outer part content would not go beyond the visible screen
- We’ve limited maximum header length and output content in weblog cards
- Added essential hyphenations for long words
- Filled up an administrative panel with detailed instructions for filling out sections so the elements won’t distort when displayed on the screen
Personal qualities through the visual
We’ve examined Ksenia’s social medias and content she posts to translate her personal qualities through the website, and created a complete image based on the interview and brief:
Simplicity and lightness
There are very few thumbnails and complex illustrations on the website to translate light feelings through mild and simple visuals and let users concentrate on the content.
Smooth transitions and animations
In that case we’ve decided to use smooth horizontal scrolling. It usually looks like a PowerPoint slide show: set of screens scrolling to the left or right. We’ve managed to make smooth transitions without screens overlapping each other.
Clear edges and lines
Font «Jost» came in handy at this point. It looks interesting, has clear lines and is easy to read. We didn’t have to pick a font pair because «Jost» looks good in contrast with headers.
It is one of the main Ksenia’s qualities which should be reflected on all website pages. Therefore we’ve chosen dark dim tones with bright accent spots. Have you noticed already that a dark background creates a calm and professional atmosphere?
Sections and content
We’ve drawn up a technical assignment based on the client’s needs, describing site functionality, what it consists of and which information should be presented. Next we’ve created a prototype – visual core without any details just to see how it meant to look like.
In order for the site to present Ksenia as a professional and be suitable for selling services, we’ve designed special sections and filled them with content.
We’ve developed a unique website for Ksenia which is consistent with western trends and completes all given tasks:
- Translates personal qualities through the visuals
- Describes Ksenia as a professional
- Site is suitable for selling services
- Can be used as a presentation for public speaking
I’ve chosen «true.code» for their design skills. My request was a website with an appealing design which could translate my personality. Clients liked my new website a lot and said that it does translate my character and my work.