Estimation Download presentation

Ksenia Krivor

Trainings
New-York

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.

Services provided:
design, website development
Technology stack:
HTML, CSS, JS, JQ PHP, Wordpress, Illustrator, Figma
Team:
project manager, web designer, frontend-developer, backend-developer, tester, content-manager.

Main goal

To create a virtual business card for people to get to know Ksenia and her service before working together.

Tasks

  1. To develop a unique design for personal brand promotion that’ll translate positive and trustworthy images and encourage people to cooperate
  2. Make it possible to order services on a website and buy courses
  3. To use the website as a presentation for public speaking

Description

Main focus has to be made on a visual site aesthetic which should translate Ksenia’s personal qualities: confidence, professionalism, femininity.

Idea

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.

Challenges

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
  • Footer

Solution

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.

Solution

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.

Solution

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.

Solution

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

 

Solution

  1. We’ve limited maximum header length and output content in weblog cards
  2. Added essential hyphenations for long words
  3. 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.

Professionalism
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.

Results

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.

Ksenia Krivor
Ksenia Krivor
Emotional Intelligence Trainer
Thank you, your application has been sent
Something went wrong, please try again