Flexbox Dynamic Line Separator

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

‍