Tanya Sokolovskaya's blog: posts tagged Websites

Updated the House of Weddings website

Mon, 13 May 2019 23:05:00 +0100

Following the logo, I changed the website: I updated the homepage, added a pricing page and a blog section, and made the colour scheme less saturated.

Read also about the new logo and the first version of the website.

A presentation video appeared on the home page:

It is followed by a welcome block with a picture of Katya:

Also, for more clarity, there is a comparison slider in the decor section — now you can move the arrows left-right and see before-after photos:

There is now a page with prices (previously, the block was on the home page):

And a blog was started:

Project Members

Designer
Tanya Sokolovskaya

Layout and developer
Ruslan Burnyshev

Design psytranceguide.ru

Mon, 07 Aug 2017 22:08:00 +0100

Task
Musician Daniel Lesden came up with an idea to make a little psytrance music guide and asked for help with the design. I did!
psytranceguide.com

Psytrance Guide is a site with overviews of the main sub-styles of psytrance. There you can read about each style, listen to examples, and learn typical tempo. It’s an educational and entertaining resource.

Since this site is a single page and assumes identical blocks, I sketched out the design partially and finalised it in the course of the layout. The work was done in one breath, even did not have time to save the evolution of design :-)

For the headlines, I found a cool techno font, it fits perfectly into the atmosphere, and I matched the font of the main text to it. Look at them:

The large factoid indicates the tempo, which allows you to quickly orientate and find the right style

The colours are dark, but with bright saturated headlines, which fits perfectly into the world of psytrance.

The site is adapted for mobile devices as well:

Members of the project

Design
Tanya Sokolovskaya

Layout
Daniel Sokolovskiy

Site maryber.com — second version

Sun, 16 Jul 2017 22:17:00 +0100

Task
Revise the structure of the site, get rid of empty sections, rewrite the text information from the point of view of usefulness for a potential client and update the design.
maryber.com

Two years have passed since the launch of Maria Berezhnaya’s website. Now I look at the old site and realise that I made a big mistake back then — I “stuck” a lot of unnecessary things because “the client wanted it that way”. In addition, at that time I handed over the site without content, and it was assumed that Maria herself would be engaged in filling — this was the second big mistake. For two years the site had not been updated at all, and some of the sections were hanging dead weight.

First version of the site.

Getting Started

So, after chatting with Maria, we decided to completely redesign the site. Maria told me about her career progress, what she is doing now and how she plans to develop further, and I started to work.

First I defined the structure of the new site:

Main. Here I decided to tell at once what Maria does and show the main services.
Portfolio → inner page. General photo catalogue and inner page for each work.
About Me. This is where I put Maria’s story about her career path and who she can be useful to.
How much it costs. A page with prices for services.
Teaching MakeUp. This is one of the services Maria wants to emphasise, so there is a separate page for it.

Maria also wanted to add a “Blog” section, but after chatting we decided that she doesn’t need it for now. We also put aside the “Feedbacks” section for later.

The sections with articles, partners and events were not moved from the old site — they turned out to be unnecessary.

Design

Since Maria’s sphere of activity is connected with the beauty industry, I decided to make the design “like in glossy magazines”. This is how the main page has lettering, and the design of individual blocks resembles a printed layout.

For the photo catalogue in the portfolio, I made a grid in which the accents shift from one photo to the others. As the grid fills up, the grid is duplicated, so there’s a rhythm to flipping through and there’s always something for the eye to grab onto. Works can be filtered by basic tags.

The inner page is a gallery of project photos. You can also add colleagues who participated in the project and write a detailed description.

I decided to make the pages with prices and services with a free layout because Maria’s services often change and it’s impossible to fit them into a template.

The “About Me” page is also a partially free layout to be able to make quick updates.

The result is a compact website that maximises Maria’s expertise and adapts to all screen resolutions.

Project participants

Designer
Tanya Sokolovskaya

Layout and developer
Tony Realovich

Launched a website for Katya Keshchyan’s House of Weddings agency

Fri, 23 Dec 2016 16:12:41 +0100

Task
To tell brides why they need a wedding planner and why it’s better to turn to one than to do the wedding themselves.
dom-svadeb.ru

In developing the website, I paid special attention to informativeness: I told about the advantages of contacting an organiser, the process of preparing for the wedding, the difficulties of organising and the wedding day itself. Now brides can get a clear idea of the agency, and services and order the organisation of their wedding.

The site adapts to all screen resolutions:

Project members

Designer
Tanya Sokolovskaya

Layout
Daniel Sokolovskiy

Developer
Kodelnaya

Designed Epson’s partner website

Tue, 11 Oct 2016 22:16:24 +0100

Task
Tell potential partners about the authorisation programme.
partners.epson.ru

Epson is a Japanese manufacturer of equipment and a world leader in projection equipment and printing technology. For the company’s Moscow representative office, the client’s team and I made a website with a story about the partner programme.

About the process

Any design starts with understanding the problem. To understand the problem and possible solution, I ask clients questions about their business. So the process of working on Epson’s affiliate website started with a conversation with a manager where I learnt a lot.

Usually, machinery manufacturers either trade directly through their affiliates and online shops or through partner networks. Epson works according to the second scheme.

The company created an Affiliate Zone for partners — a closed site with special programmes and media materials. The problem was that there was no information about the partner programme on Epson’s sites. Interested companies had to first look for contact information and then write to managers. The managers, in turn, had to tell everyone in detail about the authorisation procedure.

Thus, my manager and I formed the mission of the project: “to help potential partners learn about the Epson authorisation programme and decide whether to join”. For this purpose, we decided to make a one-page website with a step-by-step story.

Getting into the details

Studying presentations and documentation to understand the process:

Studying presentations, tables and documents on the Epson authorisation programme.

There is a lot of information, but I have an advantage: since I have not encountered the terms of the affiliate programme before, this allowed me to look at it through a beginner’s eyes.

Structuring

Structuring everything learnt into a coherent narrative:

Authorisation program — what it is
Why authorisation is needed
Benefits of partners
How to become a partner
Who to contact

Getting to work

Assembling the first “floor”. I show the authorisation categories for which companies become partners visually in the form of photos of devices in this category. Here I also decide to add social proof in the form of a factoid: 500 companies have already become Epson partners.

The first “floor” of the site tells about the programme and the authorisation categories

Next, I answer the question “Why authorisation is needed” and talk about the benefits of being a partner.

At first, I thought to illustrate each point with icons like fashionable landings, but then I realised that becoming a partner should be a balanced decision based on facts, not emotions. So let’s write honestly and without tinsel.

Advantages of a partner: everything is just business

Next is the most important part: how to become a partner. Here is the key useful action, so I highlight this block with a coloured background.

How to become a partner and selection criteria

Next is the contact information of regional managers. Usually in presentations and on company websites, this information is shown in a long list or table.

Studying, seeing what can be improved:

The usual way of presenting contact information used on websites and in presentations

The name, position and region of the manager will be called a contact card. I notice that there is a lot of verbal repetition in the cards:

“Sokolov Vasily (Partner Relations Manager) — working with dealers, corporate partners and customers of St. Petersburg, as well as Murmansk, Arkhangelsk, Vologda and Novgorod regions, and the Republic of Karelia.”

“Petrov Ivan (Partner Relations Manager) — working with dealers, corporate partners and customers of the Central Federal District – Belgorod, Bryansk, Voronezh, Kaluga, Kursk, Lipetsk, Orel, Ryazan, Tambov and Tula regions.”

First, I removed the posts because the word “manager” is in the title, and the fact that they work with partners is clear from the context.

↓

“Sokolov Vasily — working with dealers, corporate partners and customers of St. Petersburg, as well as Murmansk, Arkhangelsk, Vologda and Novgorod regions, and the Republic of Karelia.”

“Petrov Ivan — working with dealers, corporate partners and customers of the Central Federal District — Belgorod, Bryansk, Voronezh, Kaluga, Kursk, Lipetsk, Orel, Ryazan, Tambov and Tula regions.”

Then I remove the repeated phrase “working with dealers, corporate partners and customers” because it is an obvious entity. At the same time, I change the first and last names, because in Russian it is customary to address people by their first name.

↓

“Vasily Sokolov — St. Petersburg, Murmansk, Arkhangelsk, Vologda and Novgorod regions, Republic of Karelia.”

“Ivan Petrov — Belgorod, Bryansk, Voronezh, Kaluga, Kursk, Lipetsk, Orel, Ryazan, Tambov and Tula regions.”

It became twice as compact and informative.

From further communication with the company representative, I learnt that the Epson partner network has been so successful thanks in large part to regional managers — they promptly and expertly help partners in any situation and together think of ways to develop their business.

Based on this knowledge, I decided to make contact information of all managers with photos — to show the company’s face, literally.

It is easier for current partners to navigate through the list with photos because they know their managers by sight, and for potential partners, it is a way to increase trust.

Regional managers. When you move the cursor over the photos, they become coloured

Preparing a presentation and showing everything to the client. The client accepted the work.

We layout the site, adapt it for all screen resolutions, and test and launch it. Done!

Result of work

Project members

Designer
Tanya Sokolovskaya

Designer and layout
Daniel Sokolovskiy

Developer
client-side team

Updating daniellesden.com

Thu, 16 Jun 2016 22:17:35 +0100

Task
Adapt the site to any screens.
www.daniellesden.com

Last November the third version of musician and DJ Daniel Lasden’s website was released. It was a big update, in which my team and I overhauled the structure and updated the style of all the pages on the site.

First version
Second version
Third version
Adaptive version

Still, the site had a drawback: its size was fixed, so mobile phone and tablet users could not enjoy it to the fullest. This feature had to be sacrificed for a while to launch the site on time.

Today I’m pleased to present an update of the site specifically for mobile users. Now the site smoothly adapts to any screen: phone, tablet, laptop or desktop computer.

Separately, I would like to tell you about the innovations in the “Tips” section. Listeners and site visitors send the author questions on DJing, music writing and other music industry issues, and he shares his experience — that’s how the advice section works.

Initially, the design of the section was in the form of a news feed — new tips appeared at the top, and old ones went down. Everything seemed logical. But the fact is that the author writes useful articles that do not lose relevance even a year later — it is pleasant to return to them again and again. And new users may not have seen some previously published articles, because they went far down.

The original design of the section as a timeline

At first, we thought to make a search on the page, but this solution didn’t fit — often new users don’t know what to look for yet, so they need help.

We split all tips by topics: music writing, DJing, management, marketing, and business.

But on what principle to display tips — alphabetically, by date? And the most important thing — will it help new users? And will not harm the regular readers? The direction with grouping seems right to us, but we continue to think over the implementation.

Thinking:

— What if in the groupings by topic, not all tips are displayed, but only the important ones at the author’s discretion? And show them in a beautiful magazine layout with large pictures?

— And how does that help?

— Very simple: this is how we help new users to orientate themselves in the rubric. Instead of flipping through dozens, and soon hundreds, of tips, it’s as if we’re saying “Here, start reading with this one”. The articles themselves are tagged and linked inside so that if the user likes it, he will go on reading.

— Where will the rest of the articles live besides these important ones?

— All other tips will be at the bottom of the feed, no change with this one.

— So regular readers will have to scroll down to this feed every time to see if new tips have come out??

— No: at the very top we will show some new tips first, this will be convenient for both new and regular readers. Next will be useful articles by topic, and even further on will be feeds of all the other tips.

Sounds great. Let’s get to it:

Assemble a mock-up of the proposed idea

Watching, evaluating and continuing to reason:

— Good overall, but the right-most element in these blocks is confusing — it feels like the large headline refers to it, not the large illustration.

— How about we solve this with a loading animation? The three lower tips in the blocks will appear a little later, helping to set the visual emphasis.

— How’s that??

— It’s like this:

The pod load animation helps to set the focus of attention

This decision is what went into the final version of the site.

Project members

Lead designer
Tanya Sokolovskaya

Designer and layout
Daniel Sokolovskiy

Developer
Maxim Silnov

The third version of www.daniellesden.com

Wed, 25 Nov 2015 22:04:09 +0100

Task
Refresh and improve all sections of the website.
www.daniellesden.com

It is easy to break something and build a new one in its place. It is much more difficult to take an existing product and improve every aspect of it with almost surgical precision. This was exactly the task: to improve everything without changing the overall style and look of the site.

First version
Second version
Third version
Adaptive version

In the new version, the structure of the site has been updated and almost all pages of the site have got a unified look — now they are more predictable and orderly. The changes have affected absolutely all sections of the site: the main page, biography, discography, radio shows, mixes, performances, press mentions and others. There is also a new section “Advice” — it’s a weekly column in which the author answers questions and gives advice.

And also the top menu on the site now smoothly hides when scrolling down the pages, and also smoothly appears when scrolling up. It’s great! Try it yourself.

Project members

Lead Designer
Tanya Sokolovskaya

Designer
Daniel Sokolovskiy

Developer and layout
Maksim Silnov

Creating a website for the Digital Om Productions label

Tue, 27 Oct 2015 21:55:40 +0100

Digital Om Production — is a music label based in India and Nepal. The label releases contemporary electronic dance music in the styles of Progressive and Psychedelic Trance and also works as a booking agency for its artists.

The project was worked on together with a colleague. After communicating with the client, we clarified the task that the site should solve. Its goal is to help music fans buy music released by the label, as well as to introduce them to the artists. At the same time, for the musicians themselves, the site should become a “home page” with discographies, biographies and press kits.

We study the market, we look at the websites of other labels:

Other labels’ websites

The overall situation in the industry is sad: other labels’ websites are full of half-empty sections, unnecessary pages and terrible social plugins. We definitely don’t want that kind of thing. Instead, we offer the client to start small — only the basic and really necessary sections and functions, namely the release catalogue and artist roster.

We lay the foundation — we think over the structure of the future site, breaking the development into several interactions. The following scheme emerges:

Site layout

Instead of the home page, which is traditionally where the work starts, we started with the internal page of the music release — most likely, visitors will more often go to these pages via direct links than to the home page.

Let’s think: “before buying music, listeners will want to familiarise themselves with a fragment. So you need to be able to post samples”.

Instead of writing our audio player, which would have taken a lot of time, we decided to use the API of SoundCloud, the leader in cloud music storage. For the client, this option turned out to be convenient — the label actively uses SoundCloud, and its page has more than six thousand subscribers.

Let’s get down to the design. We make a dark colour scheme to match the music genre but dilute it with colourful album covers and bright buttons.

Pondering: “Okay, so there are big, brightly coloured buttons at the top, links to shops where music is sold. But what if you add an album to the site that hasn’t been released yet? What would be in place of the buttons?”.

We decided to make a dotted outline with the word “Forthcoming” on it. This inscription will be automatically displayed if the album release date is a future date, so the site manager will not have to change it manually.

To avoid “dead ends” on the site, link all pages of the site with each other with the benefit for visitors: from the album or compilation page you can get to the page of related artists or other releases; on the artist’s page, you can see all albums or compilations in which he participates.

While thinking about these little things, in the meantime, draw the rest of the pages and sections: main page, artists, contact information and others.

Don’t forget about the 404 error page (this is when the user accidentally gets to a non-existent page, for example, when he makes a mistake in writing the address): so that the user who came here would not be bored, we place a small story about what “Om” is.

We make separate layouts for the mobile version of the site:

We collect all the layouts, prepare a presentation and show it to the client:

The client likes everything very much. We get down to layout, programming, scripts, setting up the administration panel, in short — putting together a working website from pictures.

The owner of the label is a real music lover, so he is also very enthusiastic about the site, constantly suggesting new additions. However, most of these ideas are not on the site.

The site was done in 4 weeks. It is maintained and filled by the label’s staff.

Project members

Lead Designer
Tanya Sokolovskaya

Designer
Daniel Sokolovskiy

Developer and layout
Maksim Silnov

Launched maryber.com

Mon, 27 Jul 2015 20:39:59 +0100

Task
Make a portfolio website for stylist-image-maker Maria Berezhnaya. To tell what Maria does and to whom she can be useful. Provide for the possibility of publishing thematic articles on the site.
maryber.com

The main section of the site is a gallery with works:

Section with a description of Mary’s services:

A page with information about Mary herself:

Maria is also involved in organising beauty events:

Separate page for partners with photos and contact details:

For convenience there are tags

Review page:

And the main became a rubric and collected all the updates that happen on the site:

Project members

Designer
Tanya Sokolovskaya

Manager
Daniel Sokolovskiy

Developer
Maksim Silnov

Second version of www.daniellesden.com

Wed, 25 Mar 2015 13:56:52 +0100

Task
Finalise all sections of the site and move the site to a new platform.
www.daniellesden.com

Daniel Lesden is a musician and DJ. As his popularity grew, so did the amount of content on the site, so it became necessary to expand the existing functionality. In total, more than 30 different changes were made, including a new platform for more convenient site management — in fact, we had to build the site from scratch.

First version
Second version
Third version
Adaptive version

Prominent call-to-action buttons appear on music release pages

There are also tabs for press, reviews and similar content

Press quotes right on the music release page

Testimonials from famous musicians

Materials from this category, such as remixes

The main page of the radio programme has also been updated

The mix pages now have attractive parallax images.

Photo albums are a new section on the website. Works and looks great on mobile phones too!

The press section can now be filtered by type of material: reviews, interviews and articles.

Interesting “404” page: typed 404 parameters on the midi controller display and Star Wars-inspired lettering :-)

Project members

Lead designer
Tanya Sokolovskaya

Designer
Daniil Sokolovskiy

Developer and layout
Maxim Silnov

Designing a website for musician Daniel Lesden

Tue, 26 Nov 2013 22:48:04 +0100

Task
Develop a musician’s website.
daniellesden.com

Daniel Lesden is a musician, DJ, and radio presenter. I developed a flexible and concise website design, allowing me to arrange all information about the artist: discography, radio programmes, mixes and recordings of live performances, news, photos, tours, press publications and much more.

First version
Second version
Third version
Adaptive version

Also made cosmic promo pages for the artiste’s album.

Project members

Lead designer
Tanya Sokolovskaya

Designer
Daniil Sokolovskiy

Development team leader
Maxim Silnov