Latest from our blog

As a newbie in UI/UX design, you might get lost in the sea of deliverables you have to produce at each stage of software design. Keep on reading! In this article, we decided to sort out all the tricky questions from the ground up.

Research

Depending on the product development stage (whether it's a brand new software product or the existing one that needs revamping), UI/UX designers conduct different kinds of research. For example, for a product from scratch, you're likely to research competitors, elicit business needs, and study potential users. To catch up with design of existing products, UI/UX designers conduct the UX audit, study business models, and analyze metrics to discover any bottlenecks and find room for improvement.

1. User persona

A persona represents an archetype that represents a certain behavioral model. Simply put, it's a description of a group of users with unique expectations, experiences, experiences, and pain points in one fictitious profile. It's very similar to a marketing persona that embodies a fictional character to relate to during creating marketing campaigns.

2. Customer journey map

A customer journey map (CJM) visualizes a customer's interaction with a product or service that helps UI/UX designers depict interaction with a product, touchpoints, and the way those interactions evolve over time. A customer journey map highlights potential bottlenecks that harm user experience.

3. Design references and moodboards

To tap into customers' expectations from the final design, UI/UX designers create moodboards and elicit design references. These artifacts help them discover client's preferences in color schemes, fonts, graphics, and other important visual elements.

Information architecture

Information architecture is the bread and butter of any interface. To simplify users' navigation through a website or a mobile application, information architecture organizes all the elements in a certain way.

4. Sitemap

Sitemap, just like the real map, represents the hierarchical order of all website pages. UI/UX designers create sitemaps to visualize the order of pages and bring the whole structure to a visibly digestible format for all team members, including stakeholders without any technical background.

5. User flows

User flows, also known as user scripts or UX scripts, illustrate user journeys to complete a specific action and possible alternative outcomes. Visually, it looks as a mix of the classic flowcharts and interface elements. The purpose of the user flow is to help designers assess the purpose of each process that helps end-users complete their goals and, if needed, optimize them.

Visual interface design

6. Wireframes

Wireframes, or low-fidelity prototypes, are vital artifacts in UI/UX design. A wireframe represents the layout of the future mobile application or a website, but it's black and white, just like an architectural drawing.

7. Prototypes

Prototypes, or high-fidelity prototypes, are head and shoulders above plain wireframes. They're very similar to a final webpage or a mobile app and represent the final navigation, information architecture, and its look and feel. UI/UX designers use clickable prototypes to demonstrate their work to clients since they resemble a final product.

8. Mockups

A mockup is a full-size representation of your design that demonstrates it will look in the real life, for example, on a laptop or a mobile screen. The key difference between a mockup and a prototype is that a mockup is just a template that allows you to insert the product you're designing and show some part of it. Mockups are widely used for marketing purposes like presentations, pitch decks, and alike materials.

9. Design systems

A design system is a collection of rules, components, and tools that help UI/UX designers create new websites or mobile apps quickly and improve the quality of the existing product. It usually consists of guidelines, basic components like colors and typography, library of reusable components, design patterns, content guidelines, and branding principles.

10. Microcopy

Guess what: your text matters too! Microcopy, or UX writing, is the text you put on navigation elements like buttons, notifications, error messages, statuses, and so on. A well-chosen microcopy simplifies navigation and ultimately improves user experience. In large companies, the role of UX writer is dedicated, however, in smaller teams, UI/UX designers write microcopy themselves.

As we already mentioned in a previous article – anything can be beautiful. We aim to see this beauty and catch inspiration for creating a web design with a magic touch.

Max Böck’s Technicolor Dream

There is so much exciting stuff to like about Max Böck’s website, but now we want to bring your attention to color schemes. Most websites have one color scheme.

Light and dark are the new normal, but as Böck himself writes in his blog post about the theme switcher, only Siths deal in absolutes. The site switches between color schemes seamlessly through the magic CSS custom properties. We recommend reading the full post linked above for a full breakdown of how it works.

It’s a fun twist on the traditional light/dark dichotomy and speaks to just how fluid sites can be nowadays. The same groundwork could allow you to adjust color schemes depending on where people visit the site, for example.

Overpass Sells Sales

Sales isn’t precisely a sector that screams innovation, but credit where credit is due. Overpass’s carousels bounce and shrink and expand so smoothly that it almost feels like you’re interacting with something tactile.

Here, the touch-action and translate3d() CSS functions are significantly used, making the cards container something that can be effectively dragged around the screen. When the container is grabbed, all cards use scale(0.95) to recede ever so slightly until the user lets go. It gives the carousel a lovely sense of depth and lightness.

The audio clips are a nice touch. Multimedia integration has been a running theme in these examples.

E-Commerce Meets Long Form Storytelling On Mammut

We already mentioned storytelling in design on our blog, and here is one more example of storytelling power.

Many e-commerce websites seem to have forgotten this, each serving up page after page of glossy products floating in front of perfect white backgrounds.

It’s refreshing then to see a company like Mammut going all in on storytelling to sell its hiking products. Their long-form expedition articles are as immersive as the most attractive New York Times feature, with audio clips, maps, and, naturally, stunning photography. Mammut gear features heavily, of course, but it’s done in a tasteful and authentic way.

Mammut puts human experience front and center. Yes, they still want to sell you stuff, but they also want to celebrate the adventures that stuff can be a part of.

Not everyone has the resources for something this cutting edge, but it shows that e-commerce doesn’t have to be sterile and lifeless.

Axeptio Makes Its Cookies Palatable

Instead of treating its cookie pop-up like a foul odor, web consent solution provider Axeptio walks the walk by making them look stylish and rather charming. With GDPR (and basic decency) to think about, it’s essential to weave ethical design into a website’s fabric.

Axeptio shows a great example of data transparency. No walls of legal jargon, no near-impossible opt-out system — just precise info on what the data is being used for.

A lovely touch is that it doesn’t pop up until users start moving around the site. Notice that they’ve also dropped the boilerplate cookie jargon in favor of something more conversational.

Granted, this may not make the mundane ‘extraordinary’ exactly, but it does make it a whole lot classier. It’s a slight touch, but one which makes an excellent first impression. Without even touching my mouse, I already have a sense of Axeptio’s attention to detail and commitment to quality.

As far as cookies and pop-ups are necessary, we may as well own them. The same applies to other unsexy staples of the modern web. Do legal consent forms, email signups, and privacy pages have to be ugly and elusive, or do we need to think a little differently?

Source: https://www.smashingmagazine.com/

‍

Stories are everywhere - in commercials, news, and business meetings because they make us care about the information. Designers also use storytelling skills to create positive user experiences, though it looks a little different when a story is a part of a product.

Human brains are built to find and understand stories. Therefore, it’s no wonder that a story can improve UX. UX is all about connecting an experience to a person’s mental model.

Let’s review several steps that can help you build a story into your user experience.

‍Identify your genre

Before beginning work on a product, it’s essential to identify the genre. But where an author calls it a genre, we might call it a “niche” or a “use case” in UX. This differs from an industry — it’s not enough to create something “for healthcare” or “for finances.” Your product “genre” is the space in which it exists and can make a difference for the target audience.

‍Add context to the experience

Context is everything that surrounds us. A UX designer also creates visual context by including headers at the top of screens or breadcrumbs to show someone on a website where they are in the grand scheme of things. Сontextmeans going beyond the moment someone uses your product. Make sure to ask these questions: who is my audience, where do they spend their time, and what were they thinking, feeling, and doing before seeing my product?

‍Follow the hero’s journey 

A good book — and a good product — has a flow that eventually ends. The author or UX team needs to know what that flow is and how to complete the experience gracefully.

‍Good writing is good editing

The same is true with UX. For an author, finishing the story is only the first step. They then work with an editor to get more feedback and make numerous revisions. In UX, we rely on user research, and instead of “revisions,” we have iterations. Usability testing, A/B testing, user research, and prototype testing are all ways to get feedback from the target audience.

In UX, we have a significant advantage - digital products can be adapted and improved even after launch. Websites get redesigns, and apps get bug fixes.

‍So to cut a long story short - storytelling is a powerful tool for any UX designer. It will help you to create your product and understand the people who use it.

While working on a UI, we needed to add a line separator between two sections. Here it is:

On smaller viewports, the line will become horizontal:

Let’s take a look at the HTML.

We have a section, with two main child items. Between them, we will have a line separator.

In CSS, we will use flexbox to handle the layout.

We added a 1rem gap between each one, and also each child item should fill 50% of its parent. Here is the result:

Next step, we want to center the two items vertically, so we will use align-items on the parent.

Now the two items are centered (we added the red line to make it easy to spot that). You might be asking, what does that have to do with the separator?

Adding The Separator

We wanted to add this as a pseudo-element, so we wrote this CSS. Can you expect the visual result of this without scrolling down?

Oh, what is that little square doing over here? Since the pseudo-element is only a 1px border from all sides, the result will be 2*2` square.

Let’s focus a bit here. This is the core of this little CSS trick.

The square comes from using the same color for each border. With different colors, it can look like this.

Why The Separator Looks Like A Square?

Since we added align-items: center to center the child items vertically, we removed the default behavior of flexbox stretching child items (stretching vertically, in this case).

Now it looks like the following visual:

Next, we need to reorder the flex items to make the divider appears between them.

And we’re done!

To make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.

Here is a video of changing the flex-direction. Notice how the separator changes!

‍

This works like magic because it’s a flexbox behavior.

When flex-direction: row is set, the cross-axis is vertical thus the pseudo-element stretches vertically.

And when the cross-axis is set to flex-direction: column, it will be horizontal and so the pseudo-element stretches horizontally.

Isn’t that neat? No need to use width, height, or anything else! It’s just a border being stretching via flexbox.

The Separator Thickness

Since the border value contributes to the four directions, we need to use 0.5x of the thickness we want. For example, if we want a 1px separator, then the border should be like the following:

Gradient Separators

This is another reason for us to pick the border solution above others. We can use gradients via border-image.

Dashed Separators

Given that we’re using borders, we can also have a dashed separator.

Another Way Of Doing It

If we haven’t taken the time to think about implementing this, then we might have used width and height. We are not saying the following is a bad solution, but it’s good to step out of solutions we took for granted and think of other ways of solving UI problems.

Source: https://ishadeed.com/

Ukraine is one of the most digitalized countries in the world. It's the first country to launch a digital passport and the fourth to introduce driving licenses in Europe. IT outsourcing is one of Ukraine's strong suits. If you're still wondering why you haven't worked with development teams from Ukraine yet, let's find out why you should consider hiring Ukrainian software developers.

Strong tech skills

Ukraine is a country of educated people: 83% of the population have a college degree. Moreover, Ukraine has one of the biggest shares of engineering degree graduates, which creates a perfect environment for tech companies.

Codebridge is a bright example of such a vibrant tech community. One of our competitive advantages is a large UI/UX design team with expertise in building software products from scratch. We follow proven guidelines and best practices to create products that not only fulfill business purposes but also improve user experience.

Common values and culture

Ukraine is located in the very heart of Europe, so we share the Western mindset and common values. IT outsourcing teams in Ukraine demonstrate excellent English skills and are great communicators, so remote cooperation isn't an issue. As icing on the cake, most local outsourcing companies are founded by savvy entrepreneurs who treat other clients' businesses as their own.

Let's take Codebridge, for example. Our company has its roots in the Big Four since most team members have long-term experience working at KPMG. This expertise allows us to quickly understand clients' business demands and find the ins and outs of complicated tasks, like winning the war for talents. To stay ahead of the competition, we've developed a proprietary automated personnel selection program that allows us to process up to 1000 candidates per month and bring extraordinary talents on board.

Optimal value to cost ratio

The legislative system of many Western countries won't allow companies to stay flexible in their hiring. However, hiring local freelancers might not bring desirable results either due to high hourly rates, lack of expertise, and little knowledge of your domain.

With IT sourcing, the world is your oyster. You can pick among narrow-specialized developers, affordable hourly rates, and specialists with comprehensive in your domain. Ukrainian IT outsourcing companies fit into this paradigm perfectly since they provide excellent services for reasonable prices.

Convenient time difference

There's an insignificant time difference between Ukraine and European countries. Only one or two hours, and you're good to go. If you're from the US, you can match your working hours with Ukrainian ones as well. For example, Ukraine is 9 hours ahead of the central US. Surely, this is a considerable time difference, but compared to Asian countries, you can still fit your cooperation into the schedule.

Availability of workers

The last but not least, Ukrainian IT outsourcers are simply available for hire. While American and European employees work between 32 to 38 hours per week according to the local labor laws, Ukrainian developers have a 40-hour working week. In Ukraine, there are fewer public holidays compared to most European countries, so you can rest assured your team will finish the project in time with mindful diligence.

We hope we debunked some myths about working with Ukrainian IT outsourcers. If you feel like launching a project with a reliable software development team from Ukraine, drop us a line and we'll get back to you promptly.

‍

Testing the design and its usability is a susceptible process. And there are many steps to moderate a usability test, but we collected a checklist of actions to ensure you don’t miss any important tasks or information.

Follow these six simple steps to make your sessions go smoothly.

1. Welcome the Participant

When the participant arrives at an in-person or remote session, please introduce yourself and thank them for volunteering to help with your research. Avoid the word “test” since it can make participants think they are being tested. (Remember: we’re not testing users; we’re testing the design!).

2. Inform the Participant About Observers and Recordings

Tell participants about observers and recordings during the recruitment stage, so they decide whether they want to participate in your study.

3. Ask the Participant to Sign the Consent Form

In a remote session, sending a link to an online form via the chat feature is the easiest method of handling a consent form. Participants usually sign a paper version in an in-person session, but you can have the participant complete it electronically if you prefer.

Tell your participants to ask you if they have any questions before they sign it. Do not rush participants.

4. Give Tasks One at a Time

Whether the session is remote or in person, you can deliver your tasks through a chat interface or on printed slips of paper. It’s a good idea to give the participant a written version of each task, especially if your tasks are scenarios that contain many details needed to complete the task. Allow the participant to keep hold of the task so they can refer to it again if they need.

5. Ask Follow-up Questions

After the participant has attempted each task, you may want to ask them prepared follow-up questions, such as:

1. Do you think about doing this activity on the website you just used?

2. Was there anything easy or difficult about doing this activity?

These kinds of questions give additional information about the task. It’s best to start with broad, open-ended questions (like 1) before you ask more-specific questions (like 2) about the interface.

6. Thank the Participant and End the Session

‍

Inspirational ideas in web design come so fast that it is very  easy to miss them. So we should be careful and always remember that the trick is often in the execution. Anything can be beautiful.

We collected some samples of extraordinary approaches that will widen your view at web design.

Clever way of the Glasgow International Pages

We’re used to plenty of scrolling these days, but the Glasgow International festival website has found a simple, clever way just  keeping pages short.

The Glasgow International homepage lines up its three main sections side by side and allows them to be scrolled through independently of each other.

On mobile, the same three sections form one big column. It’s a savvy solution to the mobile/desktop relationship, and a pretty stylish one as well.

The CSS behind this is suitably simple. The three sections sit inside a flex container, with all three sharing the values of overflow-y: auto; and height: 100vh; so that they always fit the desktop viewport. The really nice touch here is using scrollbar-width: auto; to remove the sidebar. Because the columns take up the whole screen you intuitively work out the way the page works as soon as you move your mouse.

Kenta Toshikura’s website: thinking in three dimensions

One of the sites of the week on Awwwards was this portfolio website by Japanese frontend developer Kenta Toshikura. It is simply breathtaking.

The landing page’s 3D carousel on Kenta Toshikura’s homepage is so elegantly done that you almost think it possible to fall through the screen and into an alternate CSS dimension.

If in doubt, the tendency is to lean towards flat, modular arrangements, but maybe we should be thinking in three dimensions a little more often. This is a fantastic example of lateral thinking transforming what could easily have been a column of boxes into something truly memorable.

Beautiful Stripe’s Documentation

Documentation is all too often one of the first casualties of the Web’s mile-a-minute pace. It needn’t be. I have no qualms calling Stripe’s documentation beautiful.

The instructions on Stripe.com are accompanied by fully fledged code previews, with different lines highlighted depending on the section you’re reading.

I’m sure most of us have ground through enough bad documentation to appreciate the effort put into this approach. Clear, hierarchical navigation for the content, bite-sized step-by-step-copy, and of course the code snippets. Dynamic previews of code across multiple platforms and languages is above and beyond, but then why shouldn’t it be?

There are few things more valuable — and more elusive — than quality learning resources. Stripe shows there is a world of possibilities online beyond the standard words on a page.

Source: https://www.smashingmagazine.com/

‍

‍

We know for sure that are some of the mistakes that can ruin your UI/ UX design. So let's avoid them! Check our recommendations below...

Many Animations

Animations can make the interface much more visually attractive, but make sure that animations are fast enough and there are not so many various motions.

Missing Contrast

It is one of the most common UI design mistakes. Make sure you check color combinations with contrast checkers like Figma plugin A11y – Color Contrast Checker.

Many Notifications

Send only relevant notifications to specific users. Also, be careful with notifications frequency.

Too Much Content

Provide enough white space and don't provide too much content on a single screen to provide a clear content hierarchy.

Ignoring Feedback

Working with constructive feedback is one of the essential skills of UX designers. Use feedback from your users to push the design forward!

‍

First, let's answer the question, "What does an onboarding screen do?". The main goals of the onboarding screens are to present to the user the product's most essential functions/aspects. But despite their simplicity, they are not always well designed.

So we would like to show you the optimal process for creating these screens:

The visual aspects: many users are visual learners, so add an optical element such as illustrations or photos that relate to the content to reinforce your message.

Add short & catchy titles that partially explain the functions shown on the screen.

A succinct description: the title alone is not always enough. People who are unfamiliar with technology may need additional information. Therefore, add a few-line description.

Add an indicator of the number of slides included in the process. This way, the user will know how many sliders are available and how many are left to complete the process.

Action buttons to create an account or login from the onboarding screen save the user from extra clicks.

‍