Featured works

Creation services

Skills and tools

• User Experience Design
• User Interface Design
• Interactive Prototypes
• Mobile Adaptives
• Figma
• auto layouts
• components
• variants
• Heuristic Evaluation
• Competitor Research
• Carrd
• HTML/CSS Basics
• Pixelmator Pro
• Marketing

Design philosophy

About me

Resume

Information

BTS

Details

Design

^{Light theme}

^{Dark theme}

• Desktop prototype
• Mobile Prototype

Information

Work done

Details

Design + Prototype

^{Click to enlarge👇}

• Desktop prototype
• Mobile Prototype

Information

Heuristic Evaluation

Introduction 👐

Before redesign

Overall, the design was good before the redesign. From the good stuff:

However, there were still many details that could be honed.

After redesign

I took the fonts and colors from the version before the redesign. Next, I chose thematic elements - easy and understandable emojis. People use them in everyday life, so their use reduces the load on cognitive properties.By weaving them throughout the site, I managed to achieve a similarity.

Navigation 🧭

Before redesign

It was impossible to use the navigation after the first scroll because navigation was hidden. It's better to give the ability to go to other sections or fill out an application at any time. Wherever the user is on the page.

After redesign

That's why I provided a floating menu.

Try scrolling in the prototype 🔗

Hero image 🦸

Before redesign

The photo was difficult to interpret at a glance. It shows people rejoicing over parcels from an online store. Next to it, there are complicated, loaded diagrams that need to be deciphered.

It is possible to respond to the subject of the site more clearly and with less effort for the user. And take into account the Law of Prägnanz.

After redesign

I emphasized the headline with the main color and reduced the emphasis of the secondary text.

To place the elements, I used one of the classical schemes that visitors are already familiar with from other sites.

Services ⏳

Before redesign

These illustrations will be easier to perceive if they are consistent. Now it's screenshots on devices, a real object, and augmented reality. In different styles, sizes, and locations.

After redesign

I adjusted the color saturation for the illustrations and the brightness for the labels with the list of services.

I took the illustrations from unDraw. They are in the same style throughout the site and, together with emojis, reinforce the effect of similarity. This allows users to focus on their tasks rather than learning new models.

Portfolio 💼

Before redesign

Illustrations of projects may be more appropriate. Instead of items that characterize the activities of client sites, you can post screenshots of the agency's work.

After redesign

Instead of using new colors for the background, I reduced the opacity of the existing ones and used them.

I made screenshots the most important part of the cards. When you hover over them, the color changes slightly and the size of the screenshot increases. Try pointing and clicking on them in the prototype 🔗 from your computer.I also added labels to the cards to indicate the work performed. I transferred the labels in the same layout and colors as in the block with services. Another small, consistent detail to reduce the cognitive load on the user.

About the company 💬

Before redesign

In this block, it was possible to work with accents. Also, use the space more rationally.

For example, the letter “M” is almost not visible. And the play button with the inscription breaks up the information about the agency, while there is empty space under the letter “M”.

After redesign

I have emphasized the logo and key information.

To make them memorable.

Contacts 📇

Before redesign

And finally, it would be nice to do something about accents in contacts.

After redesign

In them, I used common elements for the site - emojis and illustrations. It turned out like this.

Conclusion 🎬

As a result, the layout of the elements, visual style, accents, and hover + click animations were developed. All contrasts were tested for accessibility.All this is necessary to achieve the aesthetic-usability effect.

Design

Before redesign

_{Click to enlarge 👆}

After redesign

^{Click to enlarge👇}

• Desktop prototype
• Mobile Prototype

Design

Before redesign

_{Click to enlarge 👆}

After redesign

• Desktop prototype

Information

Design

^{Home page}

^Catalog

^{Product Card}

• Visit Website

Testimonial