Case: Design of the website for passing psychological tests
Task and the begining of the work
With the creation of a design for this site, my cooperation with an Internet agency began.
At the first meeting, I received a task in the form of a link to the old site and an explanation that the old site was created by the customer on his own, and now it's time for its professional design. If my work on the main page of the site is reasonable, accurate and the customer likes it, then I will develop the design of all other pages.
I began my work by carefully studying the information available on the old site and its more structured placement on the main page.
Thus, the new arrangement of information gradually removes the questions of users who come to this page: what is it? what are the tests? how it works? why is it convenient? why take the test at all? and many others...
Font selection
In my opinion, font selection is a responsible task. If the font is chosen correctly, then it will help convey the idea of the site / its purpose. If the font does not hit, then it will rather distract.
For this project, I liked the Jost font. It is in the Google Fonts font library, the license allows its use. He attracted me with his correctness and roundness - the very thing for people who are interested in psychology and came for answers to their questions.
And for contrast and variety, the Nikonne font was chosen, it only says one word - Online.
Photos and colors selection
In order to decide on the title photo, I turned to statistics: the majority of those interested in psychology (70%) are middle-aged women.
Thus, if there is a photo of a woman on the main screen, most of the site visitors will be able to associate themselves with her.
To search for photos, Unsplash and Pexels photo stocks were used, since no photographic materials were provided from the customer.
As a result, two photographs were selected, on the basis of which three versions of the first screen were developed. One with purple buttons and accents, the other two with orange.
Purple is usually associated with creativity and fantasy. In design, deep purple colors create a feeling of richness and luxury.
Orange is a very bright and energetic color. Orange is associated with the change of seasons — which means it can represent movement. Orange is associated with health and vitality. In design, orange draws attention, but does not overwhelm, as red colour. It is often considered more friendly and hospitable and less provocative.
Thus, both colors fit the theme of the project and its target audience, and do not cause dissonance.
Together with the manager of the Internet agency and the customer, the second variant of the main screen was chosen for further development.
One of the requirements for the site was to leave space for advertising banners (vertical and horizontal) and text to further promote the site by 20,000 characters. (in the design layout, “LoremIpsum” is shown).
After agreeing on the main page and approving my work, it was decided to move on to the rest of the pages!
Other pages
In addition to the main page of the site, the following were developed:
Page with a list of tests (test selection)
Page of one test (its description and the ability to choose to pass)
Page with test questions
Test interpretation page (with graphical representation of test results)
Project page
Page with video of the author of the project
Personal account page
Pop-ups for entering and registering in your personal account
Final stage
After the design of all pages was approved, I put things in order in the graphic editor (organized the layers of the document), developed mobile versions of the pages and transferred the project to the agency for further development!
evgenia_180590@mail.ru
+7 (924) 304-5338
Facebook*: @evgeniabityutskaya
*META products are recognized as extremist in Russia
