# data[].attributes.attachment_link.description
Material Design is a design system or visual language that enables designers and developers achieve a unified UI/UX across devices and products. It’s perhaps Google’s first serious focus on design, rather than technology alone. By giving app creators design guidelines and tools, Google hopes to brin…

# data[].attributes.attachment_link.readable_text
25 photos (and PSD mockups) featuring hands of all shades, shapes, and sizes

Before launching Nappy, we were designers, marketers, and entrepreneurs looking for one thing... "normal" photos of Black people.

Of course we've seen the stock photos of the Black businessman with his arms crossed or the infamous "diversity" photos of team members sitting at a conference table that featured one Black or Brown person.

But we weren't looking for those photos. We were looking for normal photos of Black fathers and their daughters. Photos of Black people drinking coffee. Photos of Black couples getting married. You get the picture.

That's why we launched Nappy -a stock photo website with the sole purpose of breaking down stereotypes and improving representation for Black and Brown people.

So, we were excited when product agency, MetaLab, reached out to us to partner on our next "normal" photo collection-Black and Brown hands interacting with devices that we use every single day. Designers use this kind of photo to show how an app looks in context on a phone, tablet, or computer.

According to a 2015 Nielsen study, Black/Brown consumers owned tech at a larger rate than white consumers. But still, the majority of product mockup shots feature white, young, abled-body hands.

So, together with MetaLab, we'd like to introduce All Hands, a photo collection of hi-res product mockups that features Black and Brown hands. The collection is free and available for download now. In addition to the photos, we've also created PSDs that make it easy to add mockups, as a smart object layer, on the device screen.

In addition to focusing on diverse skin tones, we wanted this collection to also represent accessibility, gender fluidity, age, and body positivity. To execute this, we worked with 9 Black and Brown models of various ranges of age, body type, etc.

This collection is not the end-all, be-all solution for representation, but we hope it gives designers, marketers, and entrepreneurs the tools to connect with their audiences and better represent them in their designs.
View the collection
If you want to mockup your designs on a device, check out the layered PSD files.

# data[].attributes.attachment_link.description
25 photos (and PSD mockups) featuring hands of all shades, shapes, and sizes Before launching Nappy, we were designers, marketers, and entrepreneurs looking for one thing... "normal" photos of Black people. Of course we've seen the stock photos of the Black businessman with his arms crossed or the infamous "diversity" photos of team members sitting at a conference table that featured one Black or Brown person.

# data[].attributes.attachment_link.readable_text
Skip to main content

Ready-made Google Font type pairing palettes available to use instantly, for free, in Figma.

Montserrat Font Pairing

Inspired by an old neighborhood, Montserrat was created by Julieta Ulanovsky in 2010. It pairs well with Source Sans Pro, Fira Sans, Karla, Hind, and Inconsolata.
Get this pairing

Lato Font Pairing

Lato is an open source, sans-serif font originally developed by Łukasz Dziedzic. It supports 100+ Latin-based languages and pairs well with Abril Fatface, Karla, Merriweather, and Francois One.
Get this pairing

Raleway Font Pairing

Raleway is an elegant san-serif typeface developed by Matt McInerney in 2010. It pairs well with Merriweather, Bitter, Cabin, Hind, and Inconsolata.
Get this pairing

Open Sans Pairing

Open Sans is a sans-serif font developed by Steve Matteson. Its optimized for print, web, and mobile and pairs well with Montserrat, Bitter, Source Sans Pro, Domine, and Alegreya.
Get this pairing

Roboto Font Pairing

Roboto is an open source, sans-serif font originally developed by Google for Android. Its a modern, crisp typeface that pairs well with Archivo Black, Lora, Rokkit, Nunito, and Raleway.
Get this pairing

Source Sans Pro Font Pairing

Source Sans Pro is Adobes first open source typeface, designed by Paul D. Hunt. It pairs well with Merriweather, Bitter, Cabin, Roboto, and Open Sans.
Get this pairing

Nunito Font Pairing

Nunito is a sans serif typeface created by Vernon Adams. Its a rounded terminal sans serif font for display that pairs well with Alegreya, Lora, Open Sans, and Roboto.
Get this pairing

Ubuntu Font Pairing

The Ubuntu font family is a sans-serif typeface funded by Canonical and developed by Dalton Maag. It pairs well with Rokkit, Lora, Kreon, Cabin, and Source Sans Pro.
Get this pairing

Josefin Sans Font Pairing

Josefin Sans is an elegant, geometric, vintage typeface meant to be used at larger sizes created by Santiago Orozco. It pairs well with Cardo, Abril Fatface, Yeseva One, Lato, and Playfair.
Get this pairing

# data[].attributes.attachment_link.description
The top 10 Google font combinations, beautifully designed and available for free with Figmas ready-made type pairing palettes

# data[].attributes.attachment_link.title
Figma - Mobile Upload | Snap photos with any phone and send them directly to Figma. Great for notebook sketches or white...

# data[].attributes.attachment_link.description
Figma Community plugin - Snap photos with any phone and send them directly to Figma. Great for notebook sketches or whiteboard brainstorming sessions!

# data[].attributes.attachment_link.title
Graha - Collaborative design review for any website.

# data[].attributes.attachment_link.description
Graha is a real-time visual feedback website collaboration tool. Express your design ideas with a simple no-code css editor, Edit a live website copy, and leave a comment.

# data[].attributes.attachment_link.title
Figma - Mockuuups Studio | Super-easy mockup generator with over 1000 various scenes. The plugin is packed with everything y...

# data[].attributes.attachment_link.description
Figma Community plugin - Super-easy mockup generator with over 1000 various scenes. The plugin is packed with everything you need to create product mockups, outstanding marketing materials, even visual content for social media or blog posts. Instant Preview Select a frame, and Mockuuups Studio takes care of the rest. T...

# data[].attributes.attachment_link.description
Turn prototypes into usability tests and get user feedback before moving to dev. User tests include video, audio & insights, perfect for user interviews & remote testing. Get started for free!

# data[].attributes.attachment_link.readable_text
The different font families have specific benefits:

Serif fonts compared to sans-serif are easier to read on high-resolution media (such as printed books or 300 ppi displays), because the visual difference between the letters is higher.

Sans-serif fonts compared to serif ones look better, however, on low-resolution media and before technologies such as ClearType existed. With low resolution, small details are easily lost, which means that simpler fonts win.

Monospace fonts compared to non-monospace ones are great when one needs to either work with rectangular selections, or when mistakenly taking one character for another could have serious consequences. This is why monospace fonts are commonly used for development. Can you spot two errors in "const log = logger.create(global,appCorreIationId);"? Now what about monospaced font?

const log = logger.create(global,appCorreIationId);

The difference is subtle, but it is slightly easier to see that a dot was replaced by a comma, and a lowercase letter "L" became a capital "I" in "correlation." For the same reasons, some fonts go further to differentiate characters which look very similar, such as 0 vs. O: an oval with a dot (or a slanting line) is a digit zero, while a slightly differently looking oval with nothing inside would mean a capital letter "O."

Last but not least, monospace fonts are used in some fields because of the predictability of how much text there is on a page.

Monospacing makes Courier a consistent representation of the "one page equals one minute" rule. If we were to use a proportional font, the mixture of spacing would make that rule less accurate.

Source: Why We Use Courier for Traditional Screenwriting Font
I'm not sure about the validity of the claim. Not only I'm not convinced about the predictability for a monospace font (one page of a movie script can contain lots of dialogues, which can be read in a matter of seconds; another page could contain a long description or a long monologue, meaning much more words per page), but I would like to see some statistical data to compare monospace fonts vs. proportional ones in terms of number of words per page. My impression is that proportional fonts would be more predictable.

Additionally to that, designers may use one font or another to lead to a feeling. Show a picture of a dark screen with light blue or white monospaced text going in all directions, and a reader immediately thinks about hackers. Here's an example from a well-known video game about hackers:

Monospaced green text on dark green background makes immediately think about mainframe terminals. Here's an illustration from a popular video game where the player finds himself in a parallel world with technologies stuck in the sixties:

And naturally, monospaced font, black on beige background, makes immediately think about typewriters. Here's an illustration from another video game where the story happens during the Second World War:

In your case, you identified that the users like the typewriter feeling. However, there are no technical benefits to use monospace fonts in your case:

The readers don't need to do rectangular selections.

They don't need to focus on typos either.

And they don't need, I believe, to know how long would it take to read a block of text. If they do, you can add an algorithm which would show it at the top of the page-something a lot of blogs do nowadays. Example: "Aug 6, 2020 · 11 min read."

Since monospace font is more difficult to read (take a long piece of text, say twenty pages, and print it using a monospace font; then print the next ten pages using a serif font, and see by yourself), I agree with your choice of not using monospace font for the long chunks of text, such as the description on your screenshot.

Now, when it comes to short pieces of text-headings, authors, labels, etc.- I personally find it strange to use a monospaced font here, but this may be explained by my background: I'm a software developer, and so most of the time I see short pieces of text using monospaced fonts, it corresponds to the pieces of source code, or system names of machines, or other technical stuff. Therefore, from my perspective, seeing "Ernest Hemingway" in monospaced font is very surprising; it's less surprising for the labels, and even less for the button, where I haven't noticed the font at first (I was more annoyed by ALL CAPITALS; don't yell at your users; you're not Steve Ballmer).

Persons with different backgrounds may actually find it cool to have small pieces of monospaced font. In order to find it, don't ask them straight what they like; instead, do two separate versions: one with monospaced fonts here and there; a second one with serif fonts everywhere. Then do A/B testing to determine which version is better.

# data[].attributes.attachment_link.title
Is it a good decision to include monospace fonts in UI?

# data[].attributes.attachment_link.description
The different font families have specific benefits: Serif fonts compared to sans-serif are easier to read on high-resolution media (such as printed books or 300 ppi displays), because the visual difference between the letters is higher. Sans-serif fonts compared to serif ones look better, however, on low-resolution media and before technologies such as ClearType existed.

# data[].attributes.attachment_link.description
Weekly FREE UI resources straight to your inbox.

# data[].attributes.attachment_link.readable_text
Sharing our work in progress and getting feedback on our UI designs helps us become better designers. But so many designers miss out on getting useful feedback because they're not asking in the right way.

Maybe you are exploring different UI ideas or layouts, colors or flows. It could be early in your design process with wireframes or A/B testing more high fidelity flows. Maybe you're just having trouble wrapping your head around a UX concept or getting stuck in your workflow.

Most of the time when I see UI/UX designers asking for feedback online it looks something like this:
"What do you think of my homepage design??!" "Just did a redesign of this app. All feedback welcome!" "Would love to hear what you think of my app design."
The problem with this is the more general or vague your request the more often you can end up with feedback that is difficult to derive meaningful actions from.

the more general or vague your request the more often you can end up with feedback that is difficult to derive meaningful actions from.

So to combat this, here is my simple 6 step process for how exactly to ask for UI/UX design feedback that will result in valuable and actionable input that will actually help you improve your design work.

6 Steps to Better Feedback

1. Who - Decide who you are asking

Asking designers in general, online on Dribbble or Linkedin or in Facebook groups is going to get you a lot of general responses that might not be what exactly what you're looking for and may be difficult to derive useful insights from, that's because some designers might be more qualified or experienced to provide feedback in certain areas or might be looking at things from a particular lens.

If you are working on a fin-tech dashboard for example someone without any experience working on financial data input or flows might not be thinking about the intricacies that could be most useful to you.

What types of designers are you requesting feedback from?

Should they have experience in a certain area or industry?

Should they be from a certain location?

So you might say: "Anyone with experience designing fin-tech dashboards...

2. Stage - Describe what stage your design is in

The purpose here is to make sure that the designers looking at your work are critiquing it accordingly. If you are just in your first draft and are using placeholder text you don't want your viewers to spend their time examining your copy. So make sure to let them know what stage of the process your work is in.

Is this the ideation stage?

Is this your first draft before adding copy and final imagery?

Is this an A/B test of two versions?

Is this a prototype or a redesign?

Is it a final high-fidelity design that you are handing off to developers?

So you might say: "I am in the ideation phase of a possible solution for managing personal finances..."

3. Context - Present the context or problem

You'll want to provide your viewer with a little bit of important information about the situations surrounding your designs.

Who is this design meant for?

What is the problem that you are trying to solve with the design?

What type of users will be using this?

What stage of the user journey will they be in

So you might say: "...for millennials who don't have a lot of financial literacy."

4. Goals - Outline what your objectives are

One of the most important aspects of UX and product design is understanding our goals and objective and what our visuals are intended to convey or achieve. This is also a very valuable exercise for helping designers clearly articulate the value behind the visualize.

What are you trying to achieve with this design?

What task should the user be able to accomplish with this flow?

What is the ideal or intended outcome?

So you might say: "My goal is to help the user explain their current relationship with money through my onboarding flow."

5. Constraints - Include any possible constraints or project requirements

It's helpful if your viewer is aware of any limitations, constraints or unique project requirements that influenced your work so that they can temper their expectations and feedback accordingly.

Did you have to work with legacy designs or colors from an existing design?

What were the time or budget constraints?

Did you have specific business requirements from stakeholders?

So you might say: " I only was able to interview 4 users because I had only had a week to analyze and gather user data."

6. The Ask - Request exactly what type of feedback you are looking for.

Depending on the above steps it will be more clear to you the type of feedback that would be most helpful to you within the stage and context of the work you are doing, so make clear what you want and don't want.

Are you looking for input on the visual hierarchy, the colors, the layout, the flows the usability?

Is there something specific about the process that is stressing you out and you'd like to hear how others handle it?

Is there anything that you don't want them to focus on?

So you might say:" I'd appreciate your input on the onboarding flow. Does it make sense? Do you think the placement of the elements in the data table exhibits good usability? You can ignore the colors because I haven't nailed down my color palette yet."
Putting it All Together
" Anyone with experience designing fin-tech dashboards, I would appreciate your feedback. I am in the ideation phase of a possible solution for managing personal finances for millennials who don't have a lot of financial literacy. My goal is to help the user explain their current relationship with money through my onboarding flow. I only was able to interview 4 users because I only had a week to analyze and gather user data. I'd appreciate your input on whether or not you think the flow makes sense and if you think the placement of the elements in the data table exhibits good usability. You can ignore the colors because I haven't nailed down my color palette yet."
Now string each of those phrases together in order:

The Formula

So the simple formula is = Who + Stage + Context + Goals + Constraints + Ask

Crafting this type of direct and specific request makes it very clear to the viewer exactly what you need help with and helps them better provide you with more constructive critique. Taking the time to outline these 6 areas for your viewer also respects their time and makes them much more inclined to offer their help.

Just one targeted paragraph like this will result in valuable, actionable, and usable feedback that is actually worth asking for!

Need feedback on something? Post your designs on social media and mention @designerupco on Instagram or Twitter so we can practice together!

Want to learn UI/UX and Product Design in our completely custom program? Check out our Product Design Master Course

# data[].attributes.attachment_link.title
Stop asking for UI design feedback, do this instead

# data[].attributes.attachment_link.description
Sharing our work in progress and getting feedback on our UI designs helps us become better designers. But so many designers miss out on getting useful feedback because they're not asking in the right way. Maybe you are exploring different UI ideas or layouts, colors or flows.

# data[].attributes.attachment_link.readable_text
World's first design-system-as-a-service platform

Supernova manages the entire design system lifecycle in one place, without making your team change tools or maintain self-built workflows and integrations. Automate everything to fit the way you work already.

Kick adoption of your design system into overdrive

Designers, developers, product owners and stakeholders - everyone has their own tools, workstyles, and something to contribute.

Let them work the way they want to, using the tools they love.

Explore Design System Management

Deliver the documentation you always wanted

Documentation is the key to broad adoption of your design system.

Supernova gives you new power tools to create an unparalleled resource that teams can rally around.

Learn more about documentation

Annotate everything

Create an additional layer of data on top of your Figma imports to enhance your design system - add descriptions, comments, custom properties, statuses and more.

Automate design system delivery

Publish design system changes in Figma - your documentation updates, and pull requests open - automatically. Without any human intervention required, following the rules you set.

Discover ways to automate

Supernova gave us a powerful engine for our documentation, so we don't need to build a custom one. We now have much more time to focus on what is important - building a design system that people want to use and adopt.

Jan Toman - Design Systems Lead - Productboard

# data[].attributes.attachment_link.title
Supernova.io - World's first design-system-as-a-service platform | Supernova.io

# data[].attributes.attachment_link.description
World's first design-system-as-a-service platform Supernova manages the entire design system lifecycle in one place, without making your team change tools or maintain self-built workflows and integrations. Automate everything to fit the way you work already. Kick adoption of your design system into overdrive Designers, developers, product owners and stakeholders - everyone has their own tools, workstyles, and something to contribute.

# data[].attributes.attachment_link.description
Deep dives into powerful Figma features. Skip the basics and learn prototyping, auto-layout, systems, and illustration with your instructor, Pablo Stanley.

# data[].attributes.attachment_link.description
Figma tutorials from Figmatic. We build premium Figma plugins to turn designers into superhumans.

# data[].attributes.attachment_link.readable_text
Enhance workflow consistency

Venus can help you to enhance workflow consistency. If you have a large spread of stylistic preferences or if you want to increase your UI work speed, Venus is the best solution.

Build professional & performance projects

Venus can be the best solution if you are tired of wasting time starting from scratch on every project and if want to speed up your workflow and that of your fellow designers & developers.

Work together with your team

Using Figma's cool feature of collaborating on projects, Venus can help you and your team to collaborate at the same time on the same projects.

Access to modern UI components

Venus comes with over 2000 modern states of UI components. We used the latest and most elegant design from 2021 to make it easier for you to adapt to the new design styles.

Easy-to-use for both designers & developers

Best solution for both designers & developers who want to get better at designing & prototyping.

# data[].attributes.attachment_link.title
Premium Design System tool for Figma with variants and more than 2000+ components states, 250+ Global Styles & many more features!

# data[].attributes.attachment_link.description
Enhance workflow consistency Venus can help you to enhance workflow consistency. If you have a large spread of stylistic preferences or if you want to increase your UI work speed, Venus is the best solution.

# data[].attributes.attachment_link.title
Accessible Colors | WCAG 2.0 AA and AAA color contrast checker

# data[].attributes.attachment_link.description
Test your background and text contrast ratio based on Web Content Accessibility Guidelines (WCAG), and automatically find the closest accessible colors.

# data[].attributes.attachment_link.readable_text
Normal Text

The five boxing wizards jump quickly.

Large Text

The five boxing wizards jump quickly.

Graphical Objects and User Interface Components

Web accessibility testing can be difficult! The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.

Learn more about WebAIM Evaluation Services

Explanation

Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. The Lightness slider can be used to adjust the selected color.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Hint: Colorzilla is an excellent tool for extracting the color value from any page element. Additionally, WAVE can analyze contrast ratios for all page text elements at once.

Use our link contrast checker to evaluate links that are identified using color alone.

# data[].attributes.attachment_link.title
Figma - Contrast | Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Con...

# data[].attributes.attachment_link.description
Figma Community plugin - Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG).

# data[].attributes.attachment_link.readable_text
The highlighted text (right) shows the alt text of the image on the left. Source.

Since images can be a major accessibility barrier to the visually impaired, adding alternative text to your images is one of the most basic web accessibility principles. For those users who rely upon assistive technologies such as screen readers to navigate the web, these technologies essentially allow the user to "hear" the web by converting text to speech. Though primarily used by those who rely on screen readers, alternative text is also important for people who have slow internet connections, particularly in developing countries where bandwidth is limited. Turning off images helps pages load faster, and alternative text ensures that users don't miss out on any important information that those images convey.

When writing alternative text, aim for concise and descriptive rather than saying something superfluous. There is also no need to include "image of..." or "photo of..." in your description.

Further, alternative text is indexed by search engines (meaning in can be shown in Google search results, thus improving your SEO). It also displays on the page if the image fails to load, as seen in the image below:

How Alt Text appears when an image fails to load.

Do all images need alt text? The short answer is no. Images in the accessibility world are classified as either decorative or informative. Decorative images are just that, there to make the page look pretty and increase the aesthetic. Informative images convey some type of information that adds value. To determine whether your image is decorative or informative, remove it from your design. If the lack of photo results in missing information, it means your image was informative and requires alt text.

An example of running your colors through an accessibility checker to meet the AA standard.

To ensure users with visual disabilities are able to perceive your content, you'll need to provide sufficient contrast between your foreground and background color.

To achieve Level AA conformance, make sure that your regular text has a minimum contrast ratio of 4.5:1 and that large text (18-point or 14-point bold) has a minimum contrast ratio of 3:1. You can see that the ratios get smaller as the font gets larger and heavier, since it becomes easier to read. In case you're wondering if there are certain colors designers should avoid using, it's not so much about avoiding certain colors as it's ensuring that the colors you choose have sufficient contrast.

To check the color contrast quickly, tools such as WebAIM color contrast checker or Accessible Colors will get the job done. They'll help you determine whether or not your combinations meet the minimum accessibility thresholds, and also allow you to change the color values and text sizes - and see results in real time. At the design level, there are plugins such as Contrast (for Figma) that allow you to easily check the contrast ratios of colors as you work.

Color is undoubtedly a powerful visual means, since it can convey mood, add presence, and help to distinguish information. However, relying on it as the only visual indicator is a mistake - especially when communicating something important. Some people who have visual impairments can't perceive color at all, so if information is only provided through color it will be unavailable to these users.

To make information available to those who can't see color, provide another cue such as text and/or meaningful labels for links and menus that can be easily understood without needing instructions. You can also consider adding a visual cue such as font weight or underlined text to help text links stand out. Adding patterns into your fills is another way to make them more differentiated.

A quick test you can do to see if your page makes sense without relying on color is to print your page in black and white. Does the information and instruction still make sense?

As I wrote in my other article about good form design, avoid using placeholder text. Its low contrast makes it difficult to read and it tends to disappear once the user has clicked the text box. Further, screen readers tend to skip over placeholder text altogether.

Your goal should be to use clear, top-aligned labels that sit above the input field. These will be announced by screen readers and improve usability. Instead of using placeholder text, you can position hint text above the input field so that it won't be missed by screen readers.

The different levels of headings, <h1>-<h6>.

Headings are an effective way to organize content within a page and are used as a way to provide structure to readers. When you look at the headings on a page, ask yourself, in the absence of body text would your headings provide the reader with the main ideas the page is trying to convey? If not, you should probably reconsider your headings.

Accessibility is also largely a matter of code, and the way a page is structured. Visually, readers benefit from a hierarchy of headers - the bigger and heavier font size allows them to better understand the order of the content. It's extremely important for developers to use the correct markup (i.e. <h1>, <h2>, <h3>, <h4>, <h5>, or <h6>) for the purpose of screen readers, so users can "listen" to the headings then decide whether or not they want to hear the body text. Screen readers also rely upon true headers to navigate web pages in a hierarchical manner. Proper heading structure allows those using screen readers to listen to a list of all the headings, jump the content by title or navigate directly to top-level headings (i.e. <h1>).

For designers, this means creating a hierarchy of headers from the start so that it can be easily communicated to developers. It's not just the job of the developers to make everything compliant, it's on both ends to design with hierarchy, and develop with structure.

I'm sure I'm not the only one whose parents need a text size on their phone that's large enough to use on street signs. The reality is that most of us will be at this stage one day since our vision changes over time and as we get older our vision gradually declines.

While most devices and browsers allow users to resize text, it is still recommended to use relative units (such as percentages, rem, or ems) to specify text size rather than absolute units (pixels). Relative font sizes provide more flexibility in modifying the visual presentation by enabling the text to scale depending on the user's screen size and other present content.

Some users navigate the web using a keyboard rather than a mouse, which is why keyboard accessibility is essential for web accessibility. For example, users who have motor impairments may have difficulties with the fine motor movements required for using a mouse and users with visual impairments may rely on screen readers since they are unable to see where to click the mouse.

One of the most common ways of navigating using a keyboard is with the Tab key. This allows users to navigate through all the interactive elements on a page - such as buttons, links, and input fields - until they reach an element of interest. A good practice is to test your site for keyboard accessibility by navigating using Tab key and pressing Enter to select an element. This will also allow you to ensure that the navigation is logical and follows the natural visual flow of the page.

For users to be able to navigate the web using their keyboard, there needs to be focus states that indicate to the user that a visual element is selected. By default, focus states have a blue outline around interactive components (i.e. links, inputs, and buttons). You can choose to design your own focus states, but keep it simple so they aren't hard for developers to code. If you choose to design your own focus states, your goa l should be to create something that is both aligned with your brand and clearly visible with lots of contrast.

# data[].attributes.attachment_link.title
Accessibility: The art of designing for everyone

# data[].attributes.attachment_link.description
Since images can be a major accessibility barrier to the visually impaired, adding alternative text to your images is one of the most basic web accessibility principles. For those users who rely upon assistive technologies such as screen readers to navigate the web, these technologies essentially allow the user to "hear" the web by converting text to speech.

# data[].attributes.attachment_link.readable_text
In terms f Accessibility, empathy is understanding that not all users navigate the web the same way. Individuals with special needs need to use assistive technology to move around.

What kinds of assistive technology are used? There are many. Before we can design for people with disabilities, we need to get to know the tools they use. The most common tools are:

1- Screen Readers: A software that reads content out loud for people with sight impediments.

A common screen reader with buttons to move around and braille display

2.- Screen Magnifiers: Used for people with sight impediments to enlarge the content on their screen.

3.- Switch Controls: Allow people with motor impairments to use a device without a touch screen, keyboard or mouse.

A switch control that allows the user to use a device with the mouth

4.- Closed Captioning: Used to make videos accessible for users with hearing impairments and users that have problems understanding speech.

Netflix's Closed Captioning with the movie 'Monty Python and the Holy Grail', the best comedy movie ever. (If you have a different opinion, DM me.)

Accessibility: Required by Law

Empathy isn't a UX designer's only motivation to keep Accessibility in mind. According to the Americans With Disabilities Act, Title III: "Websites and apps are places of public accommodations"[1].

This means that having a website or app without options for people with disabilities is like having a building entrance without a wheelchair ramp; it would be considered discriminatory.

In 2016, Domino's Pizza was successfully sued by a blind man named Guillermo Robles because he wasn't able to order a pizza on their website[2]. This case was a wake up call for every online company regarding Accessibility: they would need to make sure that everyone could use their product or service without an issue.

Debunking Myths About Accessibility

Whether we are approaching Accessibility from passion or practicality, there are many myths about Accessibility that are far from the truth. The two most common myths are:

Myth #1: Accessible design is only for people with disabilities.

Microsoft has a manual for inclusive design called "Inclusive 101". Here they explain how Accessibility can benefit everyone, not only people with disabilities[3].

They propose three types of disabilities: Permanent, Temporary and Situational. For each type of disability, Microsoft develops situations in which people may need the help of Accessibility.

Microsoft's Inclusive 101. The three types of disabilities: Permanent, Temporary and Situational

An example of a permanent situation would be someone who doesn't have an arm, whereas a temporary situation would be someone with a broken arm that will heal over time. A situational disability would be a parent holding a baby with one arm and using a mobile device in the other.

Finding an Accessibility solution for any one of these three scenarios would be a solution for all three - Accessibility for one is Accessibility for all.

Myth #2: Accessible design makes things better only for people with disabilities.

The original intent behind closed captions on video was to help people with hearing impairments or speech comprehension problems to better understand what they were watching. But closed captions are also convenient for people who may be in a noisy environment or would like to read what they are hearing when practicing listening comprehension in a second language.

This is called the "Curb-Cut Effect", the notion that Accessibility improves the overall experience for every group of people, not just those with disabilities[4].

Web Content Accessibility Guidelines (WCAG)

You may be asking yourself, "I want (and need) to design for people with disabilities, but how do I even start?" A good place to start is by understanding the WCAG.

The Web Content Accessibility Guidelines (WCAG) is an internationally recognized standard for Accessibility features. It explains a set of rules that we must follow in our designs for them to be approved[5].

The WCAG is an extensive guideline that can be intimidating, but it can be broken down into four easy to understand parts, commonly known as "POUR Principles". Your product or service must be:

1. (P) Perceivable: introducing the information and components of our site in a way that all users can understand.

2. (O) Operable: offering different ways in which people with disabilities can operate and move around your content.

3. (U) Understandable: make sure that our web content is understandable by people with disabilities so they can use our interfaces.

4. (R) Robust: The content must be robust enough that it can be interpreted by a wide variety of users, including the ones that use assistive technologies.

How The WCAG Works

In the guideline, each criteria is marked with three levels depending on how difficult they are to achieve. The levels are A, AA, AAA.

AAA is considered the Gold Standard of Accessibility and will help us to better reach the best possible experience for all users. As one might expect, it is very hard and expensive to reach. The minimum accepted level of Accessibility is the AA.

# data[].attributes.attachment_link.title
UX Accessibility: How to Start Designing for All

# data[].attributes.attachment_link.description
In terms f Accessibility, empathy is understanding that not all users navigate the web the same way. Individuals with special needs need to use assistive technology to move around. What kinds of assistive technology are used? There are many. Before we can design for people with disabilities, we need to get to know the tools they use.

# data[].attributes.attachment_link.title
Accessibility guidelines for UX Designers

# data[].attributes.attachment_link.description
As a UX designer, it is important to build empathy and celebrate accessibility requirements as a set of design constraints to build a…

# data[].attributes.attachment_link.description
Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before.

# data[].attributes.attachment_link.readable_text
Hier, nous vous soumettions un article sur la théorie de la Gestalt. Mais puisque les lois ne sont jamais mieux comprises que quand elles sont illustrées, voici 6 posters sur les lois respectives de la Gestalt. Accrochés dans votre bureau, votre intérieur ou seulement téléchargés sur vos postes et téléphones, ces posters vous accompagneront au quotidien. Ils sont disponibles gratuitement en téléchargement à la fin de cet article !
UN SIMPLE RAPPEL

La Gestalt est une théorie née en Allemagne au début du XXe siècle, cherchant à expliquer notre façon de percevoir le monde qui nous entoure. Les formes se manifestent à notre vision dans leur ensemble et non pas dans une multitude de détails.

Comme pour un morceau de musique, nous entendons la mélodie et pas les notes les une après les autres.

Posters réalisés par Cyrine, UI-Designer @UX-Republic

# data[].attributes.attachment_link.title
UX-Posters : Les 6 lois de la Gestalt illustrées - UX-REPUBLIC

# data[].attributes.attachment_link.description
Hier, nous vous soumettions un article sur la théorie de la Gestalt . Mais puisque les lois ne sont jamais mieux comprises que quand elles sont illustrées, voici 6 posters sur les lois respectives de la Gestalt. Accrochés dans votre bureau, votre intérieur ou seulement téléchargés sur vos postes et téléphones, ces posters vous accompagneront au quotidien.

# data[].attributes.attachment_link.readable_text
La création d'un Design System est un projet ambitieux

Récemment, j'ai eu la chance de travailler pour un groupe international spécialisé dans les services de restauration.
Dans un contexte de transformation digitale, un nouvel écosystème numérique a été créé. Au vu des problématiques observées, j'ai présenté les nombreux bénéfices d'un Design System pour ensuite le mettre en place. Une partie difficile certes, mais très intéressante. Voici mon retour d'expérience en 10 points à aborder avec les équipes.

Un Design System, c'est un référentiel UX/UI partagé par les designers et les développeurs pour créer et développer un service ou des produits digitaux.

LES 3 COMPOSANTES CLÉS

En UI, le style visuel, soit les éléments qui composent votre interface
En UX, l'usage, l'expérience utilisateur que vous avez défini et le langage, la façon dont vous vous adressez à vos utilisateurs ( UX-Writing).
Un Design System est vivant, cela veut dire qu'il va évoluer au fil du temps. Il est agnostic, car il s'adapte aux technologies et non l'inverse. Il repose sur le principe de l'Atomic Design.

Les avantages du Design system

C'est un référentiel unique et universel, permettant garder une cohérence à travers les différents produits d'une marque.
Il facilite les évolutions grâce un système de partage de versions et fait gagner du temps aux équipes en plus d'être Agile, car partagé par tous.

AVANT DE CRÉER UN DESIGN SYSTEM

#1 VÉRIFIER L'ÉTAT D'AVANCEMENT DU PROJET

Lorsque j'ai commencé à créer mon Design System, il manquait certains parcours utilisateurs. Je me suis adaptée en proposant plus de composants que prévu, mais j'ai dû travailler à l'aveugle ce qui ralentissait un peu mon travail.
Pour mettre en place votre Design System, essayez d'avoir des wireframes et un parcours utilisateur terminé avant de commencer. Même si un Design System est amené à évoluer, vous gagnerez du temps à le commencer à ce stade.

#2 ÉCOUTER LES BONNES PERSONNES

Lorsque je créais mon Design System, plusieurs personnes m'ont fait des retours de manière informelle. Mais certains commentaires étaient contradictoires. Je ne savais plus qui écouter car tout le monde avait l'air important dans le projet et certains choix étaient sensibles.
Quand vous avez un doute, faites un point avec votre responsable de mission. Vous saurez qui écouter ou non en vous référant à une personne précise.

#3 ORGANISER UNE RÉUNION DE RESTITUTION, EN AVANCE

Dans les grands groupes, les processus de validation interne sont parfois lents et compliqués. Ils passent souvent par email et finissent en chaine de commentaires. Alors comment faire pour présenter votre travail à tout le monde et pour récupérer un feedback rapidement ?
Organisez 2 ou 3 semaines à l'avance une réunion qui sera la restitution de votre Design System.
Invitez tous les acteurs du projet ! Les décisionnaires hauts-placés doivent être la car ce sont eux que vous devrez convaincre. Demandez de l'aide au Products Owner sur ce point pour être sûr de n'oublier personne. Les équipes accueillent volontiers ce genre d'initiatives et seront impatientes de voir votre travail de manière concrète.

PENDANT LA CRÉATION DU DESIGN SYSTEM

#4 EVANGELISER

Au début de la mission, lorsque j'ai commencé à parler de Design System, j'ai remarqué que je perdais l'attention de mes interlocuteurs. En pleine transformation digitale, les employés du groupe dans lequel je travaillais étaient assaillis de nouveaux concepts : Design Sprint, Méthode Agile, Stand Up Meetings...
Ils venaient de changer de méthode de travail et n'étaient pas en mesure de comprendre les complexités de tous les autres métiers. Je me suis vite rendue compte que je devais évangéliser pour les intéresser au Design System.
Expliquez les basiques d'entrée de jeu :
La différence entre Ux et Ui, les grands principes du Material design, ou encore l'atomic design...puis la valeur ajoutée d'un Design System en terme de souplesse et de temps. Vos collaborateurs seront ravis de recevoir ces informations de manière simple, et vos échanges n'en seront que meilleurs.

#5 FAIRE UNE PRÉSENTATION DE SUIVI DE MISSION

Ce que vous faites de votre temps n'est pas forcément concret pour tout le monde. Comment expliquer votre démarche rapidement ?
Présentez dès le début un suivi de mission à votre responsable. Vous y mettrez le contexte, les acteurs, les enjeux, et surtout un planning de ce que vous êtes en train de faire. Vous lui enverrez autant de fois que nécessaire pour qu'il suive votre évolution. Si quelqu'un de votre équipe souhaite voir votre travail en cours, ayez toujours cette présentation sous la main pour expliquer votre démarche au global.

Régulièrement, les membres des équipes Product Owner, Product Managers, UX Designer, Techno Lead... jetaient un oeil sur mon travail.

J'en profitais pour les évangéliser. J'avais toujours cette présentation avec moi et je la montrais pour expliquer mon processus. Ils voyaient dans quelle direction j'allais, et même si je n'étais pas préparée, je pouvais présenter mon travail à n'importe quel moment de manière concise.

#6 MONTRER DU CONCRET

Votre client ne se projette pas, il n'imagine pas la manière dont vous allez travailler ni l'aspect de votre rendu.
En plus de votre suivi de mission, montrez à vos interlocuteurs ce que vous faites. Montrez comment vous construisez vos fichiers dans sketch et parlez leur du Material Design. Si votre interlocuteur ne connaît pas, montrez-lui les grands principes :

Material is the metaphor / Bold, graphic, intentional / Motion provides meaning.
Ouvrez le Material theme editor et montrez leur comment ça fonctionne.

#7 LISTER LES ÉLÉMENTS MANQUANTS

J'ai rencontré de grosses difficultés à récupérer les icônes de la marque pour laquelle je travaillais. Ceux-ci existaient, mais personne ne les avait.
Dans le cas ou vous avez des éléments manquants, listez-les et demandez quelles sont les ressources pour en créer. Pour mon cas, une personne a été missionnée spécialement pour recréer les icônes nécessaires au Design System.

#8 VOIR LE RESPONSABLE DE LA MARQUE LE PLUS POSSIBLE

Comment être sûr que votre Design System s'intègre parfaitement dans l'image de votre marque ?
Si vous travaillez pour un grand groupe et que vous avez une charte graphique existante, rapprochez-vous de la personne responsable de la marque. Elle vous guidera dans l'élaboration votre Design System. Cette personne validera vos choix et vous aidera à trouver des solutions en cas d'impasse, car elle connaît la marque mieux que personne.

Des rendez-vous informels de 15 minutes tous les deux jours suffisent.

#9 CRÉEZ VOTRE DESIGN SYSTEM

Un Design System c'est compliqué ... les atomes sont des symboles qui sont imbriqués dans les molécules qui sont des symboles qui sont imbriqués dans les organismes qui sont des symboles qui sont imbriqués dans les templates... HELP !
Pensez Atomic Design
L'Atomic Design consiste ranger les éléments d'un design par ordre de taille du plus petit au plus grand en : atomes / molécules / organismes / templates. Cette méthode de design, largement diffusée par Brad Frost, va aider le designer a créer un système flexible qui s'adapte sur tous supports.
Listez tous les éléments dont vous avez besoin et rangez le de cette manière :

Atome : Il est irréductible. un logo, une couleur, une typographie...

Molécule : Elle comporte plusieurs atomes, elle peut être responsive. un champ de recherche, etc..

Organisme : Ce sont des combinaisons de plusieurs molécules et d'atomes. un header, etc...

Templates : selon Brad frost, ils sont développés en code, peuvent être sans contenu et servent à tester le fonctionnement du design system en responsive.

Pages : Ce sont des templates évolués avec du contenu.

Construisez votre fichier dans sketch avec des symboles.
Personnellement, je m'inspire du material theme editor pour créer ce fichier.

LE JOUR DE LA PRÉSENTATION

#10 ADRESSEZ VOUS AUX DÉCISIONNAIRES

Voici quelques tips pour arriver à capter l'attention de tout le monde pour convaincre et récupérer des feedback rapidement.
De la convivialité
Achetez de quoi grignoter, selon le moment de la journée prévoyez des viennoiseries, des bonbons, des gâteaux... et avant de commencer, remerciez toutes les personnes présentes d'être venues.
Du contenu accessible et pédagogique
Reprenez les bases et évangélisez un peu en introduction. Dites vous que si vous devez la montrer demain matin à votre cousin qui ne connaît rien à l'UX, il doit tout comprendre.
Un peu de storytelling 😉
Racontez leur une histoire, celle de leur projet, avec vos erreurs vos recherches, vos croquis...vous les captiverez !
De l'entraînement
Vous devez être au point le jour J.

Take away

Communiquez avec tout le monde, c'est la clé du succès !

N'oubliez pas qu'un Design system est vivant. Ce qui compte, c'est la démarche et si votre design system n'est pas parfait du premier coup, c'est normal.

Dites vous que la théorie et la pratique sont 2 choses différentes.

C'est la manière dont vous allez vous adapter aux contraintes qui fera de votre Design System un outil utile pour l'entreprise.

Inspirez vous des grands ( et pas des concurrents, ni du voisin ! )

Leslie, UI-Designer@UX-Republic

[row] [one_third]
[/one_third] [two_third]

Du 12 au 16 Novembre 2018
UX-Republic - Paris Saint-Lazare

5 Jours | 5 Cours | 5 Certifications | 1 Diplôme international
Pour la 1ère fois en France, UX-Republic Centre de Formation Digitale vous propose, dans ses locaux à Paris, une formation inédite en collaboration avec Nielsen Norman Group.
[/two_third] [/row]

# data[].attributes.attachment_link.title
Retour d'expérience : Le Design System en 10 étapes - UX-REPUBLIC

# data[].attributes.attachment_link.description
Récemment, j'ai eu la chance de travailler pour un groupe international spécialisé dans les services de restauration. Dans un contexte de transformation digitale, un nouvel écosystème numérique a été créé. Au vu des problématiques observées, j'ai présenté les nombreux bénéfices d'un Design System pour ensuite le mettre en place.

# data[].attributes.attachment_link.authors[].name
Wendy Carré 25 février 2021 |
8 minutes - Temps de lecture

# data[].attributes.attachment_link.title
UX Design d’application mobile : le guide complet pour des killer apps

# data[].attributes.attachment_link.description
Dans ce guide, découvrez comment créer une application mobile mémorable grâce à l’UX et l’UI Design, à l’ergonomie et à la personnalisation.

# data[].attributes.attachment_link.embed_code
UX Design d’application mobile : le guide complet pour des killer apps

# data[].attributes.attachment_link.title
Figma - Figmotion | Figmotion is an animation tool built right in Figma. This makes the entry into animation easier a...

# data[].attributes.attachment_link.description
Figma Community plugin - Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as...

# data[].attributes.attachment_link.title
Figma - Visual Flows Previews | Beautiful user flows. Brainstorm, explore, and document your workflow. Map out key user paths fas...

# data[].attributes.attachment_link.description
Figma Community file - Beautiful user flows. Brainstorm, explore, and document your workflow. Map out key user paths fast and identify opportunities to reduce friction, improve the experience of using your planned or existing site or app. Get Visual Flows Pro version

# data[].attributes.attachment_link.title
Visual Flows for Figma - Brainstorm, explore, and document your workflow | Product Hunt

# data[].attributes.attachment_link.description
Visual Flows is user flow kit. Map out key user paths fast and identify opportunities to reduce friction, improve the experience of using your planned or existing site or app.

# data[].attributes.attachment_link.readable_text
Have you tried communicating your designs to your colleagues and stakeholders, only to realize later they've misunderstood what you meant? Have you found yourself stuck in a design, unable to see alternative approaches? Are you sure you're working on the most optimal solution, or are you working with the only available design? One humble tool - sketching - can help you address these issues! Let's see how.
Sketching is a distinctive form of drawing which designers use to propose, explore, refine and communicate ideas. As a UX designer, you too can use sketching as your first line of attack to crack a design problem.

"... there are techniques and processes whereby we can put experience front and centre in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching."

- Bill Buxton, HCI pioneer and partner researcher, Microsoft Research

In the digital age where it's easier than ever to create flawless graphics, flowcharts and interfaces, sketching holds its own.
In this video, ace designer and illustrator Mike Rohde highlights why nothing can replace the power of paper.
Sketches are easy, fast, and cheap to create, iterate, and if needed, even discard without much effort. Unlike written or verbal communication, sketches sidestep rules of grammar and help clearly communicate ideas, all but eliminating misunderstandings. And the best part, they are a joy to create and document!

Sketches vs. Prototypes

Some designers may assume the role of sketches in the design process is the same as that traditionally associated with low-fidelity prototyping, but that is not the case.

Sketches and prototypes have distinctive roles in the development of a design concept and its refinement. You should use them at different stages. Draw sketches first in the exploratory stages of a design to propose, refine, communicate and critique your ideas in a "tangible" format. Later, use low-fidelity prototypes to test broad concepts and specific features.

The role of sketches and prototypes is complementary, but not interchangeable. Because prototypes demand a larger investment, we can't and shouldn't produce as many prototypes as sketches.

The design funnel below illustrates the iterative and exploratory nature of sketches during the ideation stage of the design process. As the right design comes clearer into focus (the narrowing shaded trapezium), the costs of the product development cycle (arrow) increase. Increased costs prevent you from fundamentally altering your design choices. Use sketches during the initial, ideation phases. Towards the later stages of the design process, apply usability engineering on more refined and costly prototypes that can simulate the expected functionality.

Getting the Right Design

Use sketching in the early stages of the design funnel to explore multiple design directions at low cost. Refrain from developing low- or high-fidelity prototypes at this stage. Discard promising leads that, upon closer inspection, are unable to meet your problem requirements.

If you focus on a single design idea prematurely, you narrow your opportunities. While it's possible that you may identify a good design from the development of a single idea, you cannot confirm whether other ideas (that you never explored) may have provided a better solution to your problem.

Moreover, if you present only one design to users, they will provide a biased input. They will try to be polite and not offend you, even falsely praising your solution, instead of comparing different ideas and sharing genuine feedback.

Getting the Design Right

Once you have identified the right design, you should continue revising and reviewing your chosen design through additional sketching to ensure it's an optimal design solution to your problem.

At this stage, you should apply usability engineering iteratively to build, test and evaluate your selected design. Every usability cycle would thus ensure the design converges on the optimal solution without major changes.

Design and usability processes are complementary but not the same. Design explores a space of possibilities to identify the right design or solution to a problem from competing alternatives. Usability engineering sharpens the selected design, ensuring it satisfies all relevant usability criteria (i.e., getting the design right).

Ideas, Not Art - The Five Elements of Drawing

Sketches help you propose, explore, refine and communicate your design ideas. Not all drawings are sketches. As Mike Rohde emphasizes in the next video, your goal is to communicate ideas, not create art.

Sketches are:

Quick: Don't invest a long period producing them.

Timely: Produce them when and as the need arises.

Disposable: Rely on their usefulness to explore a concept and not on their production costs.

Plentiful: Produce sketches as a collection that explores different aspects of interaction over time.

Minimalist: Use sketches to clarify one concept at a time.

Grab a pen and paper and get started with sketching along with Mike Rohde:
Enhancing Sketches - Annotations, Arrows and Notes

Your sketches and accompanying text must communicate your entire design rationale to you and your team. All the following elements play their part in explaining your sketches and the objects, actions and emotions they represent.

Annotations - These are names, labels and explanations located next to different parts of a sketch to expand and clarify the meaning of any element depicted. Tie annotations to different elements in your sketch using arrows, braces, numbering and spatial proximity. Write your annotations using a different color that contrasts with the sketch proper.

Arrows - Apart from pointing to specific elements in a sketch, use arrows to illustrate interaction flow, a sequence of events, movement and direction.

Notes - Any text, long or short, that provides additional insight into your sketch is a note. Use notes to do the following:

Provide detailed explanation of the action or sequence illustrated.

Describe an idea derived from an illustration.

List unresolved issues.

Explore design elements not depicted in the sketch.

Clarify the purpose of each element you present, especially non-static ones.

Keep a record of your thought process when you first draw a sketch.

Build Your Sketching Muscle Memory

The best way to gain confidence in sketching is to practice. Use sketching to capture the ideas and/or designs you encounter in your daily activities. Other people's designs are concrete examples of solutions posed to challenges under different constraints. Add them to your knowledge bank to remix, influence, inspire or steer your own ideas in different - and perhaps unexpected and innovative - directions. To help you in this process, we introduce below two simple approaches to collecting virtual and real-life designs.

1. Scribble Sketching

The idea behind this technique is to capture, as fast as possible and with the broadest of strokes, the essence of the object, design or action you are trying to preserve. Leave out non-important details, decorations, text and other non-essential elements. Include textual annotations (see previous section) in your scribble sketches to clarify functionality.

Make a habit of always carrying a notebook to keep a record of objects, designs and actions that provoke or inspire you. Since you are the main audience of the scribble sketching technique, don't feel forced to strive for fidelity. You should only provide a level of detail that is good enough to prompt your memory afterwards. Those rough etchings thus serve as a bank of ideas and skeletons you can eventually refine into powerful final versions.

2. Sampling with Cameras

The goal of this technique is to use still photos and video to capture some features of the world. You can easily capture samples during your weekly grocery shopping, while running your favorite route, on your commute to work or when you meet friends for dinner. Capture objects, designs and actions that delight, inspire and irritate you.

Create a Record of Failed Design Efforts

Keep a record of failed design efforts. Gather objects and situations that annoy you. Write down the reasons behind this negative effect. This exercise will help you develop a critical eye. A critical eye will allow you to identify even the shortcomings of your own work. In doing so, you will develop and show more sophisticated design skills.

Create a Record of Successful Design

You should also keep a record of successful design. This will help you draw inspiration from multiple domains to ground your design work on features other than those of the digital realm.

The Take Away

Sketching is a time-tested approach to propose, explore, refine and communicate your design ideas. Sketching should be your first line of attack when faced with a new design challenge. Unlike prototypes, you should produce sketches in abundance, on a very low budget and with just the right amount of detail in the early stages of the design process. Use sketches to explore multiple design directions simultaneously. Refine your chosen design with the standard tools of usability engineering to ensure it satisfies all relevant requirements. Sketch, sketch, sketch!

References and Where to Learn More

Researchers from the University of Toronto and Microsoft Research conducted an experiment: They compared " usability testing of a single interface versus three functionally equivalent but stylistically distinct designs" and found that users were more reluctant to criticize a single design, than when presented with the same design in a group of three. For more on this fascinating study, read this paper, "Getting the Right Design and the Design Right: Testing Many Is Better Than One."

For more on sketching in UX design, we recommend the following books:

Sketching User Experiences: Getting the Design Right and the Right Design by Bill Buxton

Sketching User Experiences: The Workbook by Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton.

Images

© Interaction Design Foundation, CC BY-SA 3.0

# data[].attributes.attachment_link.title
Learn How to Use Sketching as an Ideation Method

# data[].attributes.attachment_link.description
Ever tried communicating designs to stakeholders, only to realize they've misunderstood what you meant? One humble tool can help avoid this in the future. Learn about the power of the humble sketch.

# data[].attributes.attachment_link.readable_text
Live Sketching, Live Scribing, Storyboarding, facilitation graphique... autant de concepts qui animent les ateliers et les conférences. Pour autant, sont-ils bien compris. Nous vous proposons de revenir sur le Live Sketching avec les experts de La Sainte Paire, agence de communication visuelle.

Exemple de Live Sketching par La Sainte Paire

"Une image vaut mieux que mille mots"

Si l'image est la meilleure des synthèses, faut-il savoir trouver l'image pertinente et pouvoir la retranscrire sur papier aussi bien que dans notre esprit !
C'est un des défis auquel se confronte au quotidien UX & UI Designers.

Live Sketching : simplifier par le dessin la complexité d'un message

Le Live Sketching est aussi connu sous le nom de Live Drawing ou Facilitation graphique. Il s'agit d'une pratique visant à faciliter l'appréhension de sujets complexes, de par leur nature ou leur forme, en proposant une visualisation adaptée.

Live Sketching - UX Breakfast par UX-Republic

Ce processus de collaboration est aussi un Art. Il offre l'opportunité à un groupe de personnes, à travers ces outils graphiques, de partager et de construire une vision collective.

Ainsi, la Sainte Paire le décrit comme un compte rendu visuel illustré qui vient simplifier et rendre ludique un sujet ou une réflexion. Ils veillent à être compréhensible rapidement par le plus grand nombre.
Le live Sketching se pratique souvent lors de conférences, de séminaires, d'ateliers d'idéation ou de brainstorming.

Comment se déroule un Live Sketching ?

La récolte

La première étape d'un Live Sketching, est la "récolte" des supports de communication de l'entreprise pour comprendre leur univers, et la thématique abordée.
Cela permet aux live sketchers de préparer le titre du"live sketching", le format ainsi que le support. Généralement, le format est adapté selon le temps de la prestation.

Live Sketching UX Breakfast Design Sprint

Le matériel

Peu d'outils sont nécessaires, le talent est le plus important ! Dans la trousse d'un live sketcher vous trouverez généralement : posca, feutres couleurs, post-its, pâte à fixe ...

La composition

"Live Sketcher : tout un art". Bien dessiner, n'est pas suffisant. C'est un art difficile à maîtriser pour différentes raisons :

Comprendre des sujets, parfois (très) complexes

Se préparer à des sujets de réflexion qui ne sont pas figés

Être rapide dans la vitesse d'exécution au regard du temps imparti

Détecter la bonne vision pour une meilleure interprétation.

Il varie selon la période de réalisation. Les principaux sont :

le plus commun : "journée"

le cas express : "2 heures d'atelier"

le "Live" sur un évènement

la "restylisation" des illustrations

Live Sketching dans un smartphone pour l'UX Breakfast Tests Utilisateurs

Pourquoi et quand faire appel à du Live sketching ?

Nous vous partageons quelques réflexions et retours d'experts et de clients au sujet du Live Sketching :

Embellir et synthétiser les comptes rendus

Rendre rapidement accessible et ludique des sujets complexes

Apporter de la gamification

Participer à la conception d'un jeu vidéo

Proposer un autre format de publication d'un article sur un blog ou les réseaux sociaux ...

Se rendre compte des freins et des faiblesses

Créer de l'intimité client, créer ou prolonger l'ADN de la marque

Partager la créativité auprès de notre client

Une technique à ne pas confondre avec ...

Live Scribing

C'est la modélisation graphique en temps réel d'une discussion.
Aussi appelée " graphic recording " ou " discussion mapping ", cette technique a pour objectif de faciliter une discussion en cours en mettant en place un système de feedback entre le groupe en discussion et le facilitateur graphique.

La Minute Scribbing - Design Thinking by La Sainte Paire

Storyboarding

Ces "histoires dessinées", sont des dessins d'une histoire sur papier et décomposés en différentes séquences.
Etape obligatoire pour mettre en scène une histoire avant de l'animer, il est souvent utiliser en UX Design afin d'illustrer les émotions de l'utilisateur avec un produit ou service dans le scénario d'usage du produit.

Il faut être patient pour savoir bien dessiner et pour avoir les bons réflexes.
Alors, petit conseil de la Sainte Paire : "C'est en forgeant qu'on devient forgeron" ! Dessinez un peu tous les jours en commençant par les reproductions...."

Take Away

Bien se préparer avant son Live Sketching : support, format, outils et thématiques

Ne pas confondre Live Sketching avec d'autres techniques sous peine d'être hors sujet !

Le Live Sketching est une discipline qui demande de la créativité mais aussi de la rigueur et de l'itération

Caroline, UX/UI Designer @ UX-Republic

[actionbox color="default" title="" description=" UX-REPUBLIC Centre de Formation Digitale est un centre de formation agréé. Découvrez notre formation Design Sprint pour se former sur 2 jours" btn_label="Devenir facilitateur" btn_link="http://training.ux-republic.com" btn_color="primary" btn_size="big" btn_icon="star" btn_external="1″]

# data[].attributes.attachment_link.title
Live Sketching, la pratique qui sublime vos ateliers clients - UX-REPUBLIC

# data[].attributes.attachment_link.description
Live Sketching, Live Scribing, Storyboarding, facilitation graphique... autant de concepts qui animent les ateliers et les conférences. Pour autant, sont-ils bien compris. Nous vous proposons de revenir sur le Live Sketching avec les experts de La Sainte Paire, agence de communication visuelle.

# data[].attributes.attachment_link.description
Laws of UX is a collection of best practices that designers can consider when building user interfaces.

# data[].attributes.attachment_link.title
UX/UI: How Important Is It for Developers?

# data[].attributes.attachment_link.description
In this article, I’ll show you 4 reasons why you should, as a developer, and learn UX/UI.

# data[].attributes.attachment_link.provider_name
Le bloc-notes, UX & Design d'expérience utilisateur

# data[].attributes.attachment_link.readable_text
Voilà, ça fait 6 mois, depuis le début du confinement en fait. Oui 6 mois que je travaille pour beta.gouv.fr et dans l'environnement des startups d'états.

Il y a un peu plus de 6 mois, je travaillais pour une des startups du ministère de Transition écologique quand j'ai eu l'occasion de postuler pour l'équipe des designers transverses de beta.gouv.fr. L'occasion faisait le larron, un passage sur Paris au MTE m'a permis de rencontrer Amandine pour un entretien juste avant le confinement. La réponse positive est arrivée rapidement et a coïncidé avec le début du confinement.

L'équipe et beta.gouv.fr

Alors déjà c'est quoi beta.gouv.fr ? C'est des incubateurs qui ont pour objectif d'améliorer les services rendus aux citoyens, aux entreprises ou aux collectivités sur des sujets ayant un périmètre bien défini. L'idée étant de montrer qu'il est possible de mener ces projets, avec un budget et un délai raisonnable, en dehors des lourds processus que l'on rencontre trop souvent dans l'administration et d'aboutir à un résultat significatif. Mais beta.gouv.fr reste une presque-ile au milieu de l'administration et d'autres projets centrés sur le design.

Donc au sein de beta.gouv.fr, chaque startup est autonome sur son sujet et son budget. Initialement, beta.gouv.fr avait une culture très orientée développement et agile. Avec le temps, l'arrivé de coachs et de designers, la culture du design centré utilisateur à commencé à infuser, mais il reste encore beaucoup à faire.

D'où le recrutement et la mise en place d'une équipe de designer transverse qui vont justement avoir pour mission d'aider les startups et de faire progresser globalement le niveau du design au sein de Beta.gouv.fr

Comment est construite l'équipe ?

L'équipe est composée de 6 designers, à mi-temps, avec des compétences complémentaires. Mais complémentaires comment ? En fait pour cela, Amandine s'est appuyée sur le modèle de compétence en T que j'ai déjà expliquée. Et donc ça donne l'équipe suivante :

Amandine Audras

Aurélie Jallut

Anne-Sophie Tranchet

Marina Wiesel

Jérémie Cook

Et moi

Par exemple, Anne-Sophie a un passé de développeuse, notamment sur du front à un donc un très bon niveau sur ces aspects et sur l'accessibilité. Aurélie a une forte expérience en design, en communication et direction artistique. Donc sur un projet, nous allons être capables d'apporter une expertise forte pour l'ensemble des phases de conception de l'expérience utilisateur. Si nous cumulons toutes nos compétences, ça donne ça :

Qu'est-ce que nous faisons ?

C'est là que ça devient intéressant. Dans une mission classique, le contrat que vous signez stipule assez clairement ce que vous devez faire, souvent avec déjà un découpage et des jours attribués. Sauf que là ce n'est pas le cas ou plus précisément nous avions des pistes, mais nous ne savions pas comment nous allions faire précisément.

Donc initialement nous avions plusieurs axes :

Aider les startups d'état

Animer la communauté et faire de monter globalement le niveau en design

Faire en sorte que les équipes se débrouillent sans nous (et embauchent des UX designer)

Ces axes ne sont pas sortis du chapeau au petit bonheur la chance, mais nous avons essayé de comprendre les besoins de la communauté pour y répondre au mieux en faisant ce que l'on sait faire : interviewer nos utilisateurs.

C'est bien joli, ça, mais concrètement ça donne quoi ? Je vais essayer d'organiser cela en fonction des 3 axes. Lire la suite

# data[].attributes.attachment_link.title
Accueil | Le bloc-notes, UX & Design d'expérience utilisateur

# data[].attributes.attachment_link.description
Voilà, ça fait 6 mois, depuis le début du confinement en fait. Oui 6 mois que je travaille pour beta.gouv.fr et dans l'environnement des startups d'états. Il y a un peu plus de 6 mois, je travaillais pour une des startups du ministère de Transition écologique quand j'ai eu l'occasion de postuler pour l'équipe des designers transverses de beta.gouv.fr.

# data[].attributes.attachment_link.readable_text
If you and your stakeholders can't agree on a plan, go ahead with whatever your team suggests. You'll be able to adjust on the go and save some time on meaningless bickering.
There is a lot of fuss about usability testing and particular techniques, so I guess it won't hurt to clarify some terms.

Hallway testing

The idea is that you grab your prototype, go outside your office, recruit respondents in the hallway, and test on the spot. Those tests called "Hallway" because of the way they are conducted: fast and cheap, without much preparation. Technically, it's not a method; it's an approach. Meaning, we can run any test hallway style. This whole series is about more or less hallway testing.

Focus groups

Focus group is a gathering of random people tasked to discuss their perception of a brand or a product. It's widely used in marketing to improve the image of the product by learning what people think of it. It may or may not be related to customer experience and a user experience subsequently, but it's not a UX research tool. Also, I believe, it's not practical to work with people in groups, because the most "loud" members tend to influence the rest of the group which compromises results of the experiment.

Parallel running (aka split testing aka A/B testing)

The goal of this experiment is to compare somewhat mature versions of the product to learn which one performs better. The team releases two or more versions simultaneously to different randomly formed subsets of users. Then they check out the performance of all the options and let the winner into the world. Usually, the stable version is still running for the majority of users so that the unsuccessful updates won't be dramatic for the company.

I'm a firm believer in the power of the process. It's almost impossible to fail if you are following a well-designed plan. Here are some tips to help you build the structure for your venture.

Define the right questions before starting the research

Ask specific questions to get accurate answers. The answers you get are, in fact, the issues you are going to fix later on. The clearer your problems are, the more realistic are your goals. Vague and ambiguous requests are challenging to fulfill.
Bad question: Is the UX of my app intuitive to users?
Good question: Do users understand how to use the price calculator?

Start small

You may get eager to collect all the available data at once and then look for insights within. Resist the temptation and define what you're looking for in advance; otherwise, a dataset is going to be overwhelming. Be smart about your resources and decide how much effort you're willing to put into your analysis before collecting any data. Ask yourself no more than 2-3 questions at a time. If you have more, prioritize them and start with the important ones.
You're designing a site for a dropshipping company whose specialty is furniture and home decor. You want to learn whether users would have any difficulties finding the right stuff, comparing prices from different stores, selecting size and color? Is the checkout flow optimal? Would users trust your client with the delivery of glass and mirrors? Would they be comfortable providing credit card data? It's a lot of questions, and they are legit too. Though, it's way too much for a single experiment. In this case, define the critical question here and proceed with it. For e-commerce, it likely would be search and checkout flow, because those are vital for a business to function.
Plan ahead

Start with defining what kind of results would signify success and what are the markers of it. Define metrics by which you're going to measure whether the UI performed as planned. Make sure they valid as an answer to your questions. Compare your findings and your expectations.
We want to know if the checkout flow for the drop-shipping company is optimal. How would we measure success in this case? The first metric is the task completeness: if users can't finish the task, our client fails to sale. The second one is the time needed to complete the job. In the experiment environment, people usually feel obligated to complete the task no matter what, so they are willing to spend as much time as needed. But in real life, their attention span is way shorter. If it takes more than a few minutes to complete the purchase, they would likely to drop. Measure how long it takes you and your team to check out and compare this time with the time your testers take to do the same. If the difference is significant, look for the weak links in your design.
Outcome Delivery

Material your gather during an interview and observation might be excessive. Wrap it tight to present to your team.

Process the outcome
go through your recordings or notes once again and find patterns. Refine the carcass.

Make it relatable for your audience
your stakeholders should understand the current work process of people for whom you build. You may use some quotes or stories if you believe it would help your team to get a better grasp of the context.

Prepare a deck
using the results of your processing. If possible, represent your findings graphically to spare your team all the reading.

Call a meeting
to present the results. You are the one who possesses valuable information about your users. Share it with your team and be prepared to answer some questions. Send out your deck after the meeting.

Keep track of the product
during the wholecircle of development. Even if preliminary research is done well, people tend to get carried away with their ideas of what's best for the product. That leads them sideways from the needs of actual users. Make sure everyone keeps in mind the ultimate goal of the project at all times.
prepare decks and present the results of your work to your team wherever possible. You'll get a better chance to be heard and understood when delivering results in person. It doesn't have to be 40-something-slides-decks and exhausting meetings though: a few slides and a 15 minutes presentation would work just fine for casual research.

Use your results

Getting results is one thing; using them is the whole other story. I've seen a lot of well-conducted experiments full of insights sitting on the bottom drawer for ages. Mostly because stakeholders weren't ready to admit their first solution wasn't perfect. Anyone else can make an error: after all, we are just human beings. As for me? No, never. Something must be wrong with those users, or the prototype wasn't ready for testing. Let's check it out later.
Or best - never.

There're no universal solutions - some of them are going to fail now and then. The faster you get over the fact not every single one of your initial ideas is pure gold, the better off you're going to be as a professional. Keep your expectations of yourself adequate and carry on.
read popular science books to advance your research skills. Authors write about lots of experiments and describe the methodology researchers used to get their results. They also bust myths explaining what's wrong with methods of faulty tests. It would help you to make sense of scientific methods and avoid biases.
UX Research is an idea that is easy to pitch but tricky to implement. There're several reasons for that. All of them more or less legit: some or they are budget-related, some psychological, so I suggest we address them differently.

Managers

Problem
As people who are accountable for the overall results, managers are concerned about the project running time and the total cost of it. They are often resistant about spending resources to validate solutions they believe would perform well as is. Or ones which clients have already agreed on. They do have a point here: some kinds of research require lab equipment or specialized training to perform.

Solution
The quality of the outcome does not directly depend on the time and money spent on research. In fact, you can still have plenty of insights running your tests fast and dirty. DYI experiment won't get you a vast knowledge of your users, but it won't make you fall behind the deadline as well. Nevertheless, it can show you where you went wrong. Fixing logical bugs before coding will save you some paid hours of highly-rated professionals later on.

Fellow designers

Problem
The common pitfall of testing is an emotional reaction to results. It's in human nature to get frustrated when something goes not as planned, and the denial is a natural response to this frustration. That's one of the reasons why people tend to ignore the findings or even deny the importance of the research itself.

Solution
The advice here is to assign designers and managers who work on other projects to research. Ones who do the testing should treat the other party as a client and avoid any value judgment when presenting reports. The thing is that complexity grows as our technology evolve. There are no right answers anymore; the only ones left are placed somewhere between "adequate" and "having potential." It's relatively simple to copycat Airbnb or Uber, but once you are up for something more, adventures begin. Respect your colleagues and the work they do. Nobody is always right about everything.

It's never easy to learn you were wrong, but it's how our expertise and the business grow. The key to the successful implementation of these techniques is mutual respect and support.

# data[].attributes.attachment_link.title
Testing Fast and Cheap: A Quick Guide to UX Research. Part 1.

# data[].attributes.attachment_link.description
If you and your stakeholders can't agree on a plan, go ahead with whatever your team suggests. You'll be able to adjust on the go and save some time on meaningless bickering.

# data[].attributes.attachment_link.title
14 Ways In Which Cross-Browser Testing Ensures A Better UX - DZone Performance

# data[].attributes.attachment_link.description
How to utilize cross-browser testing to create a better user experience; including what cross-browser testing is and how to use it.

# data[].attributes.attachment_link.description
Noms de couleur HTML règle. Les navigateurs modernes supportent 140 noms de couleur HTML que nous avons énumérés ici avec leurs codes de couleur Hex et les valeurs RGB.

# data[].attributes.attachment_link.readable_text
Trouver cette couleur parfaite avec notre sélecteur de couleur et de découvrir de belles harmonies de couleurs, teintes, nuances et de tons; entrée Hex codes de couleurs, les valeurs RGB et HSL, et générer du HTML, CSS et styles de SCSS.

Vous cherchez certaines combinaisons de couleurs déjà grand? Nos tableaux de couleur présentent des couleurs de design plat, des couleurs de design matériel de conception système de Google et le web classique couleur palette sécurisée, toutes avec des codes de couleur Hex.

Vous ne vous souvenez tous les 140 noms de couleur HTML? Nous sommes là pour vous, consultez notre guide pour une référence rapide de tous les noms de couleur HTML regroupés par couleur.

Vous débutez votre site ou besoin d'un rafraîchissement? Notre section de tutoriels a quelque chose pour tout le monde, à partir de HTML de base et la couleur de CSS guides techniques plus avancées dans SCSS.

Nos outils préférés et astuces de partout dans le web, y compris les meilleurs générateurs de palette de couleurs, libres de sites de photos, recherche d'image en utilisant la couleur, et bien plus encore.

Quels sont les codes de couleur HTML?

Les codes de couleur sont les façons de représenter les couleurs que nous voyons tous les jours dans un format que l'ordinateur peut interpréter et d'affichage. Communément utilisé dans les sites Web et d'autres applications logicielles, il existe une variété de formats, y compris les codes HEX de couleurs, les valeurs RGB et HSL, et les noms de couleurs HTML, entre autres.

Codes de Couleur HEX

Les plus populaires sont les codes de couleur Hex; trois numéros octets hexadécimaux (ce qui signifie qu'ils se composent de six chiffres), chaque octet, ou une paire de caractères dans le code Hex, représentant l'intensité de rouge, vert et bleu dans la couleur, respectivement.

Hex code octet valeurs varient de 00, qui est la plus faible intensité d'une couleur, à FF qui représente l'intensité la plus élevée. La couleur blanche, par exemple, est faite par chacune des trois couleurs primaires à leur pleine intensité, ayant pour résultat le code de couleur Hex de #FFFFFF.

Noir, l'absence de toute couleur sur un écran, est tout le contraire, à chaque couleur affichée à leur plus bas intensité possible et un code de couleur Hex du # 000000.

Comprendre les bases de Hex notation de code de couleur, nous pouvons créer des couleurs en niveaux de gris très facilement, car ils se composent d'intensités égales de chaque couleur:

Les trois couleurs primaires, rouges, verts et bleus, sont faites en mélangeant l'intensité la plus élevée de la couleur désirée avec les intensités plus faibles des deux autres:

Avec les navigateurs modernes supportant le spectre complet des couleurs 24 bits, il y a 16 777 216 couleurs différentes possibles. Utilisez notre sélecteur de couleur pour explorer tous les 16,7 millions d'entre eux, ou si c'est trop, Découvrez nos tableaux-de-couleur pour une sélection de palettes axé sur la conception plate, matière design et web sécuritaires couleurs.

Liste des codes de couleur HTML commun

Color

Name

Hex Code

RGB Code

partager des codes couleur HTML avec vos amis!

Sélecteur

Couleurs et Harmonies

Tableau

Plat, Matériel, Web

Noms

140 Noms de Couleur

Tutoriels

HTML, CSS et SCSS

Ressources

Trucs et Astuces de Couleur

# data[].attributes.attachment_link.description
Trouver cette couleur parfaite avec notre sélecteur de couleur et de découvrir de belles harmonies de couleurs, teintes, nuances et de tons; entrée Hex codes de couleurs, les valeurs RGB et HSL, et générer du HTML, CSS et styles de SCSS. Vous cherchez certaines combinaisons de couleurs déjà grand?

# data[].attributes.attachment_link.title
Coolors - The super fast color palettes generator!

# data[].attributes.attachment_link.description
Generate or browse beautiful color combinations for your designs.

# data[].attributes.attachment_link.readable_text
by Anant Jain

Whether you only have a prototype or a full-fledged product, it's a really good idea to run monthly usability tests. These make sure that whatever you're working on is usable and the user experience is excellent.

If you're wondering what you can do to make your usability tests more structured and organized, this guide is for you. Let's get started!

First off, always keep the two Golden Rules of Usability Testing in mind:

1. Any testing is better than no testing (with no one!)

2. A little testing earlier is better than a lot of testing later.

In this post, I will introduce you to the kind of lightweight usability testing described in Steve Krug's books, "Don't Make Me Think" and "Rocket Surgery Made Easy." Steve calls this kind of testing "Do-It-Yourself Usability Testing" since it's supposed to be cheap, easy-to-do and takes just a morning a month.

A quick intro to usability testing

The idea behind this is to:

Find a few participants

Ask them to come in and go through a list of user flows you want to test

Observe the problems they run into

Finally, make a list of issues to fix

Sounds simple enough, but very few of us actually do it. The goal of this post is to make you confident enough to run at least one usability test session this month. I ran my first usability test only a year ago, and I must say it's actually a lot of fun!

Before we get to the test itself, here are a few things to note:

1. Reserve one morning a month (say the third Thursday every month) for a round of testing, debriefing, and deciding what to fix.

2. Test with three participants each round. Recruit loosely, and grade on a curve. You don't need to find someone who fits the exact mould of your ideal user, since most usability problems can be uncovered by testing with just about anyone.

3. If you are part of a big company and have the budget, you can recruit via Craigslist and offer a $50 gift card for an hour of the participant's time. If you don't have those kind of resources, don't worry - you can ask your friends, your existing users, or even go to a café and ask strangers for 15 minutes of their time in exchange for buying them a coffee.

4. If you're doing this as part of a bigger team, get as many observers as possible to observe the tests in a separate observation room. These will be the designers, engineers, project managers, executives, etc. Or, in case of side projects, it'll be just be you later in your room!

What happens during the test?

1. Welcome (4 mins): Explain how the test will work so that the participant will know what to expect.

2. The questions (2 mins): Ask the participant a few questions about themselves. This helps put them at ease and gives you an idea of how computer-savvy they are.

3. The Homepage tour (3 mins): Open the Home page of your site, and ask the participant to look around and tell you what they think. This will give you an idea of how easy it is to understand your home page, as well as how familiar the participant is with your domain.

4. The tasks (35 minutes): Watch the participant perform a series of tasks you have prepared for them beforehand. If you're building a SaaS product and you're testing out your subscription flow, a typical task could be to find the Pricing page, compare various plans, and Subscribe to one of the plans with a provided test credit card number. Encourage the participant to think out loud as they perform the task (see the video at the end of the post for a sample test.) It's crucial that you let them work on their own and not ask them any leading questions, or give out any clues or assistance.

5. Probing (5 mins): Ask the participant any questions you may have about anything that happened during the test and about any issues that people in the observation room may have. Also, answer any questions that the participant may have at this point (don't answer them during the actual tasks since you're testing how they'll perform with no one around.)

6. Wrapping Up (5 mins): Thank them for their help, and give them their gift card if you promised one while recruiting them.

During a usability test, you will record the participant's voice and their computer screen, and share both these streams live with observers in another room. A typical one-hour test can be broken down into:

Keep a separate list of low-hanging fruit. These are the problems you can typically fix with one-line code changes, but have a huge impact on task completion rates. Joel Califa calls them "tiny wins". Here's an example:

Resist the impulse to add things - instead, try to tweak your existing design to fix the problem.

Take "new feature" requests with a grain of salt. Participants will often suggest new features, but when you probe them further, they will admit that they will likely not use the features they are proposing. Instead, try to get to the root of the problem that the participant faced and was trying to fix on their own by suggesting that new feature.

Ignore the problems where the user goes astray for a bit but comes back on track by themselves. These are usually not worth investing much time unless you see a pattern across multiple participants.

Good design is a delicate balance, so when fixing a problem, ensure that you aren't introducing new ones.

The debrief

During the breaks between successive tests, ask the observers to write down the top 3 usability problems that they saw. During the debriefing, focus ruthlessly on deciding to fix the most severe problems first. Here are a few other recommendations:

You can download checklists, interview script, consent form, and a demo video at Steve Krug's site here: Downloads for Rocket Surgery Made Easy.

Here's a Usability Test demo video from Google Ventures:

Remote testing and unmoderated user testing

Remote testing is very similar to an in-person usability test, except that the participant is at their home/office and you conduct the testing via screen sharing and voice call.

Unmoderated user testing is another way to test, where you specify your website, the tasks you want the users to do, and get back video recordings of people trying to accomplish those tasks. Usertesting.com is the leader in this space, but note that a single 30-minute test costs about $50.

Resources

I want to thank you for reading this quick guide. This was originally published as part of the UX Design course on Commonlounge, a platform that has courses with small bite-sized lessons like these on topics ranging from Project Management to Machine Learning that deliver the most value for the time you put in.

You learn by working on real-world projects and getting feedback from industry mentors. You should check it out here!

# data[].attributes.attachment_link.title
The well-kept secret behind great UX: Usability Testing

# data[].attributes.attachment_link.description
by Anant Jain The well-kept secret behind great UX: Usability TestingWhether you only have a prototype or a full-fledged product, it's a really good idea to run monthly usability tests. These make sure that whatever you're working on is usable and the user experience is excellent. Source: Bram

# data[].attributes.attachment_link.readable_text
The fundamental purpose of user testing is to better understand and empathize with the core users of a digital product. Unfortunately, user testing is often an afterthought.
From card sorting to usability studies, user testing methods utilized in UX design are developed to include the user in the decision-making process. However, many projects are completed with only stakeholder feedback of a prototype. This lack of user experience testing occurs for two reasons: the perceived negative ROI of user testing coupled with the concern of scope creep.
The perceived ROI on user testing methods
From a designer's perspective, the implementation of usability studies needs no reinforcement. Any UX designer who has ever watched people struggle to perform tasks using their prototype understands the value of user testing. Unfortunately, most executives, engineers, and project managers have never had the privilege of witnessing a usability test, so will likely need to be convinced of user testing's importance in another way.

Data proves the increase in ROI

Usability is directly tied to customer loyalty and purchasing behaviors- studies conducted by Jakob Nielsen from the NN/g suggest that when roughly 10% of a redesign budget is given to user testing methods, there is an average product usability increase of 135%.

Enterprise case study

When users can easily find the information they're looking for on their own, it decreases frustration and improves their experience.

Millions of users visit the support site on Mozilla Firefox each year. Many visits turn into questions asked on the support forum. With a design optimized for discoverability, within nine weeks of iterative design testing, Mozilla reduced support questions by 70%.

Retail case study

The international paint company, Dulux, knew the primary issue with selling paint online involved the question, "What will my wall look like when the paint dries?" To get around this, they conceptualized an augmented reality app called Dulux Visualizer to help consumers "picture it before you paint it" and hired Webcredible to build the application.

Through user research, user journey mapping, and usability testing, the Webcredible team produced an app that increased tester paint sales by 65% and stockist searches by 92%.

Scope creep aversion

The second reason user testing is overlooked is less about the executive and more about the project manager. Almost every designer has heard a project manager say that due to a tight deadline there is no time for user testing.

Project managers understand only three components that matter on a project: time, cost, and scope. Pull on one and another will shift. For example, if more features are added to a project, the timeline will extend or more resources will be added. This is why when a timeline is set, a PM is reluctant to budge. Understanding this, designers can combat these tendencies with some UX education on the different methods available, their scope, and budget. Let's look at an array of user testing methods UX designers can employ to evaluate the usability of digital products.
[Read: Here's what every developer should know about design]
The many types of user testing methods

There are many types of user tests, from behavioral and attitudinal to qualitative and quantitative, each with a set number of participants for optimal results.

Attitudinal and behavioral testing is summed up as "what people say" vs. "what people do." Many times the two are very different.

Qualitative and quantitative testing is described as "direct observation" vs. "indirect measurement." Quantitative testing data will always express a certain quantity, amount or range, while qualitative testing data contains information about qualities.

Each of these terms falls under formative or summative. This quote from Robert E. Stake, Professor Emeritus of Education at the University of Illinois, sums it up nicely: "When the cook tastes the soup, that's formative. When the guests taste the soup, that's summative."

Qualitative behavioral user testing

This type of user test observes what a small number of participants do in various situations, whether in their work environment going about their normal routine, or completing tasks within a recently designed prototype. These tests need the fewest number of participants and as such can be the easiest to convince a project manager to include.

What is the optimum number of participants in usability testing?

According to the book A Mathematical Model of the Finding of Usability Problems five usability testing participants will uncover 85% of the issues within the tested UI. For best results, this should be performed with three design iterations for a total of 15 participants.

Usability studies are often conducted in the middle of a project after initial design is produced. Rather than waiting until after a product has been launched to discover usability problems, the collected data can be used to improve the product when it's simpler to make changes to the design spec.

The ROI of user testing decreases significantly with more than five users. (Nielsen Norman Group)

To land on the suggested number of five users per design iteration, the NN/g conducted 83 usability tests across different clients with studies ranging from 2 to 28 participants. The results showed a significant increase in repeated findings with only a few new findings after five participants. The most important conclusion is that all of the usability tests produced at least some insight.

12 users uncovered 33 issues when user experience testing

The developers of a new cancer survivor app contacted Marketade to conduct usability testing three weeks before their product launch date. Over a period of two weeks, Marketade conducted iterative usability testing with 12 users: 8 cancer survivors and 4 caregivers. Their usability tests found 33 usability issues, 9 of which were high-impact.

The biggest thing all of these case studies have in common is that small test groups can have a huge impact on the end usability of a product. Product managers, project managers, and other stakeholders can more easily be brought on board for user testing when shown that it doesn't take hundreds of participants (and weeks of time) to gather meaningful results.

Qualitative attitudinal user testing

For this test, UX researchers investigate small groups of participants to understand how they feel about a product, architecture, or design. Qualitative attitudinal tests require a few more participants than qualitative behavioral studies, but not many more.

Card sorting

A study was conducted to understand the minimum number of required card sorting participants and found 15 users can quickly improve a light architecture through a card sorting exercise, while 30 participants are recommended for grander architectures like intranets and portals. Card sorting is often performed in the middle of a project after auditing the information architecture.

Focus groups

Recent research shows that 3 to 6 focus groups with 8 to 10 participants can identify 90% of themes within a dataset. These focus groups are typically conducted during the strategy phase of a project. There are many exercises to conduct with focus group participants, from participatory design exercises to open discussions.

Qualitative attitudinal example

The user experience company Etre undertook the enormous endeavor to improve the Eurostar information architecture. Their website contained 11,000 web pages and PDFs, of which 80 pages were fundamental to the architecture. Etre turned each core page into a card for a massive card sorting exercise. They understood the need for 20 participants per user group, however, with 9 user groups, their exercise included 180 participants, each sorting 80 cards, producing 14,400 items to catalog!

Fortunately, Etre leveraged an online card sorting resource that automatically sorted the data into digestible insights. While the card sorting exercise was only one component in a larger web design effort, Eurostar witnessed a 24% or £26 million increase of revenue over the previous year as well as a 2.2% increase in website traffic.

Quantitative behavioral user testing

For this study type, at least 20 participants are required and often times more. With quantitative studies, UX researchers are looking for patterns within the collected data, so the more participants, the more accurate the data.

Heatmaps

The NN/g found that 39 users are required to provide the needed heatmap details for eye tracking exercises. A minimum of 30 sets of good eye tracking data are necessary for each tested page, which averages out to 39 actual users in order to achieve that data set (since eye tracking technology isn't perfect). Eye tracking for heatmaps is typically performed after a new design is executed.

Quantitative studies

At least 20 participants are recommended for quantitative studies. Like usability testing, these studies are performed to understand how a user behaves by completing a set of tasks. The difference is how the data is collected, which is through viewing remotely instead of one-on-one exercises. They are often performed towards the end after the product or an interactive prototype is hosted online.

Because these types of studies require more users, they can take more time and be more expensive to conduct. For that reason, they're less commonly used than many qualitative user testing methods.

Increased user retention

Through the quantitative research site UserTesting, Evernote increased user retention by 15% across multiple devices. By hosting their product on UserTesting.com and leveraging their diverse audience, Evernote was able to understand where users encountered problems. Using these types of user testing tools is particularly valuable for products that have a broad audience where a diverse set of user feedback is helpful. Other solutions may work better for products with a very specific, defined set of users.

Quantitative attitudinal user testing

The most participant-heavy test is the quantitative attitudinal exercise. The goal is to understand what a large group of individuals think about a product, with the goal of compiling the answers into meaningful charts and graphs for easy consumption.

Surveys

Survey participants vary by the product population size. Optimal results include a 5% margin of error (or less) and at least a 95% confidence level. You can use a sample size calculator to determine the required number of participants.

For instance, a small site with a population size of 100 only needs 80 survey participants, while a popular site with a population size of 100,000 would require 383 survey participants. Surveys are conducted at both the beginning and end of a project.

Quantitative attitudinal example

While Walmart.ca collected plenty of statistical website data, without customer insights their data only told half of the story. By including human data through website surveys, along with their transactional data, Walmart was able to see the complete picture and improve their site layout which in turn increased their revenue by 13%.

Summary

Showing decision-makers hard data can convince them to dedicate resources to user testing. The user is the backbone of a product and the true purpose of user experience design; implementing some of the user testing methods outlined in this article in order to gather qualitative and quantitative data to prove what works and what doesn't should be a top priority for every UX designer.
The Toptal Design Blog is a hub for advanced design studies by professional designers in the Toptal network on all facets of digital design, ranging from detailed design tutorials to in-depth coverage of new design trends, tools, and techniques. You can read the original piece written by Jeff Bryant here. Follow the Toptal Design Blog on Twitter, Dribbble, Behance, LinkedIn, Facebook, and Instagram

# data[].attributes.attachment_link.title
Why you shouldn't overlook user testing methods in UX design

# data[].attributes.attachment_link.description
The fundamental purpose of user testing is to better understand and empathize with the core users of a digital product. Unfortunately, user testing is often an afterthought. From card sorting to usability studies, user testing methods utilized in UX design are developed to include the user in the decision-making process.

# data[].attributes.attachment_link.title
Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq

# data[].attributes.attachment_link.description
Balsamiq is the company behind Balsamiq Wireframes, the industry standard low-fidelity wireframing tool.

# data[].attributes.attachment_link.readable_text
This article includes a few of the tried and trusty UX tools I have used, as well as others that I've heard good things about.

In this article, we will focus on 3 main categories: Automated Analysis, Analytics and A/B testing. That doesn't mean that these tools are only doing these things. I'll include other useful features as well.

It can also be used for: Evaluating Design

Cost: No Info on the website but there is a 7-day free trial.

What does it do best: Instant analysis based on AI to try and predict how people will react to a design's visual attention, clarity and emotional impact.

Design matters. If your most important content isn't visible within three seconds, chances are you've lost your audience. EyeQuant's Visual Attention Analysis and Design Metrics let you benchmark designs and create user experiences that consistently convert. - By eyequant.com.

It can also be used for: Evaluating Design, Heatmaps, Mouse/Eye Tracking.

Cost: $67+, but there is a free evaluation and one month plan.

What does it do best: It uses AI to get instant feedback on visual designs without needing to do traditional eye-tracking.

Test websites, adverts, videos, print media, shelf layout, signage and packaging design. Turn visual data into actionable insights. Stay ahead of the market by leveraging AI to boost productivity and reduce costs. - By feng-gui.com.

It can also be used for: Analytics, Conversion.

Cost: No Info!

What does it do best: It is a large scale testing and optimization platform and community, based on standardized experiments and adaptive learning. For merchants aiming to exceed their revenue goals, especially with mobile customers.

This is eCommerce Intelligence. The AI-powered platform to personalize and grow your online business. - By hiconversion.com

It can also be used for: Analytics.

Cost: Free+

What does it do best: It's a suite of AI-driven audience insights, targeting and measuring solutions for site publishers, marketers, agencies and consultants.

The Quantcast Platform empowers brands, agencies, and publishers to know and grow their audiences on the open internet. Make smarter decisions with agility. Get real-time insights into your ad campaigns and target audiences at your fingertips. - By quantcast.com.

It can also be used for: -

Cost: Free+

What does it do best: You can get market insights across app downloads, revenue, usage, engagement, and advertising metrics. It helps identify the right partners and markets for expansion.

With data on over 8 million apps and thousands of websites, get the complete picture of the mobile landscape you need to acquire and retain customers, prioritize your roadmap, enter new markets, and optimize ROI. Manage, enrich and identify hidden performance opportunities across your own advertising and monetization data. Access intuitive dashboards, advanced normalization tools, and data from 400+ partner connections - all in one place. - By appannie.com.

It can also be used for: -.

Cost: $1,295+, but there is a free trial

What does it do best: Angelfish is secure, on-premises web analytics software. Data is stored in your network and you have full access control.

Use Angelfish to track your public or private websites, web applications, Intranets, SharePoint, and lots more. You can see IP addresses, usernames, visit clickpaths, targeted marketing responses, and more. Details are important.- By angelfishstats.com.

It can also be used for: Conversion

Cost: No Info, but you can request a demo.

What does it do best: Measure experiences and predict conversion using visualizations of your website or app's "Digital Experience Score (DXS)".

Decibel scores every online customer experience to expose what's really happening on your website, and provides the most advanced tools available to understand why. - By decibel.com.

It can also be used for: Automation

Cost: No Info, but there is a free trial.

What does it do best: It has a range of products for customer experience insights, optimization, load testing, and digital automation intelligence.

Eggplant can help you with: AI assisted testing to ensure rapid release of your applications, business continuity through testing and monitoring, testing your business applications as you modernize and move to the Cloud for remote work, scalability of your online presence through effective load testing. - By eggplantsoftware.com.

It can also be used for: -

Cost: Free

What does it do best: Track new users, active users, sessions, and more. Monitor performance by app, compare metrics across different apps or measure the growth of your entire portfolio.

Flurry Analytics isn't just free of charge. It's a professional grade. Flurry is a pioneer in helping app developers succeed in the app economy. Since launching in 2008, we've continued to add cutting-edge functionality and scale a massive technology platform that effortlessly handles apps of any scale. Easy to use, Flurry Analytics also includes advanced functionality like on-demand complex queries, funnel analysis, and custom segmentation. - By flurry.com.

It can also be used for: Heatmaps

Cost: Free+

What does it do best: You can track how many visitors are on your site and on the page you're viewing. You can also launch heatmaps from the widget, all without leaving your site.

It can also be used for: -

Cost: Free+

What does it do best: It's a central location for customer data such as personal identifiers, website visits, mobile app sessions, email, purchases, customer service interactions, etc, for a 360-view of customers and the ability to engage them across channels.

Digital Marketers that rely on siloed data and channel-specific marketing strategies are no longer winning the marketing game. Ingest, match, and analyze data from anywhere. - By foxmetrics.com.

It can also be used for: -

Cost: Free+

The ubiquitous, free and useful tool for understanding customers and analysing how your site is being used.

Get a deeper understanding of your customers. Google Analytics gives you the free tools you need to analyze data for your business in one place. Build a complete picture. Get insights only Google can give. Connect your insights to results. Make your data work for you. - By marketingplatform.google.com.

It can also be used for: Heatmaps, Mouse/Eye Tracking, Session Replay

Cost: Free+

What does it do best: Inspectlet records videos of your visitors as they use your site, allowing you to see everything they do. See every mouse movement, scroll, click, and keypress on your site.

Stop guessing what your visitors want. Google Analytics tells you what, Inspectlet tells you why. - By inspectlet.com.

It can also be used for: Live Chat with Users

Cost: No Info

What does it do best: Build, manage and optimise chat bots with website or app users via SMS, Facebook Messenger, Apple Business Chat, and WhatsApp.

The world's most innovative brands choose LivePerson's Conversational Cloud Our AI-powered Conversational Cloud has made over a billion brand-to-consumer conversations possible. We make it easy for consumers to ask questions and make purchases in the messaging channels they use every day. - By liveperson.com

It can also be used for: Evaluating Design, Competitor Benchmarking, Information Architecture, Heatmaps, Mouse/Eye Tracking, Usability Testing

Cost: $69+, but with free trial!

What does it do best: An excellent tool for scenario-based testing and unmoderated usability tests. Also includes benchmarking against competitors. Trial limited to 5 tasks and 2 questions.

Uncover product changing insights. Set real-world tasks and measure the success of your product against real customer intent. Design your own tasks and questions and focus on the details that matter to you. You can collect insights from hundreds of users, or just a few: the choice is yours. - By loop11.com.

It can also be used for: -

Cost: $10+

What does it do best: See how many people are currently on your site and where they came from. Compare historical statistics and see what keywords, locations, referrers, tweets, languages, etc. are driving traffic and behaviors on your site. Filterable by behavior tags.

Lucky Orange will automatically create a recording of every visitor to your website. Quickly filter and segment recordings so you can see exactly why visitors are not converting. Out-of-the-box, Lucky Orange successfully records dynamic and member's only pages, including even the most advanced sites and single page apps. - By luckyorange.com.

It can also be used for: Heatmaps, Session Replay, A/B Testing, Conversion

Cost: Free+

What does it do best: An alternative platform to Google Analytics that gives you 100% data ownership and user privacy protection. Heatmaps, Sessions Recordings, A/B Testing, Funnels, Goals, Form Analytics.

You could lose your customers' trust and risk damaging your reputation if people learn their data is used for Google's "own purposes". By choosing the ethical alternative, Matomo, you won't make privacy sacrifices or compromise your site. You can even use Matomo without needing to ask for consent - By matomo.org.

It can also be used for: -

Cost: Free+

What does it do best: A business analytics service company. It tracks user interactions with web and mobile applications and provides tools for targeted communication with them.

Build Better Products. Powerful, self-serve product analytics to help you convert, engage, and retain more users.- By mixpanel.com.

It can also be used for: A/B Testing, Conversion

Cost: $324+, but there is a free trial.

What does it do best: Find data insights in your Google Analytics in less than a minute. Prioritize all your initiatives so that you grow your eCommerce in a strategic way.

All the tools you need for data-driven growth. Omniconvert is a growth enabler for serious eCommerce companies looking to become customer-centric. - By omniconvert.com.

It can also be used for: Heatmaps, Mouse/Eye Tracking

Cost: Free+

What does it do best: Use website heatmaps and analytics to understand visitor behavior on your site.

Ptengine is a complete marketing and analytics platform. We help you to truly understand your users and take actions by personalizing content and run tests. It's free to get started and ready to go in a few minutes. - By ptengine.com.

It can also be used for: Usability Testing, Analytics, Participant Screening, Participant Panels, Audio Transcription

Cost: $49+

What does it do best: Set a screener for their panel of testers, define goals, tasks and questions (with metrics like time-on-task, success/fail, SUS, NPS and SEQ), and get feedback via picture-in-picture videos and automated transcriptions.

Test your websites, mobile apps, prototypes and even competitor assets; optimize your customer journey, user interface, and your users' overall experience. - By userlytics.com.

It can also be used for: Live Chat with Users, Conversion

Cost: Free+

What does it do best: You can use it for sales funnel, onboarding, feature-use, subscription growth, cohort analysis, etc. You can see what users are doing across touchpoints. Useful for improving acquisition, engagement and retention.

End-to-end Customer Journey Analytics. No hours sank into aggregating and cleaning data. No complex SQL queries required. Just the answers teams need to make smarter decisions, fast. Now, that's data-driven. - By woopra.com.

It can also be used for: A/B Testing

Cost: No Info

What does it do best: Website testing and personalization. Helps you make data-driven decisions on websites and mobile apps with an emphasis on seamless and connected customer experiences.

Maxymiser is the most comprehensive, integrated marketing solution available to launch cross-channel marketing programs and unify all prospect and customer marketing signals in a single view. This solution helps generate a higher return on digital marketing investments, create customer loyalty through superior campaign performance, and unlock real-time performance decisions during critical campaign cycles. - By oracle.com/cx/marketing

It can also be used for: A/B Testing

Cost: No Info

What does it do best: Conduct experiments to test, learn and deploy the best designs.

Creating digital experiences that transform your company takes data-driven decisions, continued experimentation and constant invention. Optimizely Digital Experience Platform helps you unlock your digital potential. - By optimizely.com.

It can also be used for: Conversion

Cost: $149+

What does it do best: An enterprise level, all-in-one platform for website visitor research, optimization roadmaps, and continuous experimentation.

A/B test anything & measure its impact everywhere. Import and aggregate all metrics you care about and measure how they get impacted by your experiments.Track both leading and lagging indicators for your experiment's impact. Keep an eye on guardrail metrics to stop bad experiments early on - By vwo.com.

In this article, we checked different tools you can use for automatic UX analysis, analytics and A/B testing. Usually, the tools can be used for more than 1 thing (for example convention, heat maps, user testing, etc.). Some tools are free and others are paid. The paid tools, most often, will provide a free trial or a demo!

More categories are coming soon! Make sure to sign in to my newsletter so you won't miss any updates on this or upcoming articles.

I'd love to hear from you. Which one are you most looking forward to using?
Note: The cover photo has been created with Savio Martin's tool.
👋Hello, I'm Eleftheria, Community Manager at Hashnode, developer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about buying me a coffee? You can do it here but If you can't that's ok too!

🙏It would be nice to subscribe to my Youtube channel. It's free and it helps to create more content.

# data[].attributes.attachment_link.title
Automated UX Analysis, Analytics and A/B Testing Tools | UX

# data[].attributes.attachment_link.description
This article includes a few of the tried and trusty UX tools I have used, as well as others that I've heard good things about. In this article, we will focus on 3 main categories: Automated Analysis, Analytics and A/B testing. That doesn't mean that these tools are only doing these things.

# data[].attributes.attachment_link.readable_text
Personas are the fictional characters created based upon the user research to represent the different user types that will use the service/ product/ site. Creating personas helps to understand users, their needs, experiences, behaviors, and goals.

The User Experience outcomes the best after the personas are well-defined, well-researched and well-analyzed. The goal of personas is to create reliable and realistic representations of your key audience. Effective personas represent a major user group for your website which would give a clear picture of the user's expectations and how likely they're to use the site. Personas, however, fictional describe real people with backgrounds, goals, abilities, limitations, and values.

Personas are more than just people; they reflect a target user's real behavior patterns, attitudes, skillset, motivations, and goals within the product's domain.

a) Goal-directed Personas: Objective of a goal-directed persona is to examine the process and workflow that your user would prefer to utilize to achieve their objectives. Enough research is done, now to designing for the goal

b) Role-Based Personas: An examination of the roles that our users typically play in real-life can help inform better product design decisions.

c) Engaging Personas: The idea is to create a truly 3D rendering of a user through the use of personas. The more that people engage with the person and see them as "real"; the better they are likely to consider them during design and want to serve them with the best product. These personas examine the emotions of the user, their psychology, their backgrounds and make them relevant to the task in hand.

d) Fictional Personas: The fictional persona does not emerge from user research, it emerges from the experience of the UX design team. It requires the team to make assumptions based on their past interactions with the user base and products to deliver a picture. Complimentary to Goal-Directed Personas

1. Collect data

2. Form a hypothesis

3. Everyone accepts the hypothesis in a team

4. Establish a final number of personas

5. Describe the personas

6. Prepare situations/ scenarios for your personas

7. Obtain acceptance from the organization-Throughput is important

8. Make ongoing adjustments- revise the descriptions regularly, update personas

1. Conduct user research

2. Condense the research

3. Brainstorm

4. Refine the search results

5. Make the results realistic

For conducting user research, the personas can be well-constructed as:

1. Background research: Background research consists of the first steps to learning about the client. Researching the industry, their profile, their competitors, scrutinizing their social media is a good way to research your clients and a fantastic place to start when looking to find information

2. Qualitative research: This research goes by conducting client interviews, in-person user testing, slide up surveys, and online chatting. This is the most direct contact with the subject being researched and often allows you to get the best personal judgment about what you are trying to learn

3. Observational research: The core of observational research is to be able to see the outcome of an interaction with a website when a user is in their natural environment as it can show researchers what users do without guidance

4. Quantitative research: General web and data analytics, event tracking, funnel reporting, and other statistics about websites that are influential in being able to put a metric to how users interact on a website

Personas generally include the following key pieces of information:

1. Persona Group (Banker, Hotelier, Web Manager)

2. Fictional name

3. Job titles and Major Responsibilities

4. Demographics (Age, Education, Ethnicity, and family status)

5. The goals and tasks they are trying to complete using the site

6. Their physical, social, and technological environment

7. A quote that sums up what matters most to the persona as it relates to your site

8. Casual pictures representing that user group

Evaluating Personas provide the most functional and imperative information before you start designing the User Interface or User Experience. Personas will open the user behavior, what your users want, what they need, their values, their demands, abilities, limitations, pain points, motivation, can be evaluated on the grounds of:

1. Personal Background

2. Professional Background

3. User Environment

4. Psychography

5. End Goals

# data[].attributes.attachment_link.title
How To Create User Personas for your business?

# data[].attributes.attachment_link.description
Personas are the fictional characters created based upon the user research to represent the different user types that will use the service/ product/ site. Creating personas helps to understand users, their needs, experiences, behaviors, and goals. The User Experience outcomes the best after the personas are well-defined, well-researched and well-analyzed.

# data[].attributes.attachment_link.title
Personas Tool by FlowMapp - Create beautiful Products 👨‍💻✨👩‍💻 | Product Hunt

# data[].attributes.attachment_link.description
Explore the user’s expectations, concerns, and motivations with the Personas Tool and supercharge your design process through a deep understanding of the target audience. 👉 https://flowmapp.com/personas/?ref=producthunt

# data[].attributes.attachment_link.readable_text
Now, more than ever, companies who rapidly react to changing market conditions and customer behavior will have a competitive edge. Innovation-driven response is successful not only when a company has new ideas, but also when the software needed to implement them is delivered quickly. Companies who have weathered recent events ... Read More

# data[].attributes.attachment_link.title
Developer Personas, or the Exquisite State of Being of June

# data[].attributes.attachment_link.description
Now, more than ever, companies who rapidly react to changing market conditions and customer behavior will have a competitive edge. Innovation-driven response is successful not only when a company has new ideas, but also when the software needed to implement them is delivered quickly. Companies who have weathered recent events ...

# data[].attributes.attachment_link.description
Work in the time of COVID-19 has presented all kinds of challenges. At Simple Thread, we were a fully remote company long before this year, but there were still plenty of adjustments we had to make. One area that has really seen an impact is our UX workshops with clients and users. Activities like c…

# data[].attributes.attachment_link.embed_code
UX Under Lockdown: Empathy Mapping

# data[].attributes.attachment_link.readable_text
Quick summary ↬ Trust is at the heart of a long-term strategy of any product. There are many ways to earn it, and even more ways to lose it. In this article, we'll go through how you, as a product designer, can make sure your product nurtures and retains trust throughout every touchpoint. To do that, we'll be borrowing some of the tricks marketers and product people have up their sleeves.

Building trust is one of the central goals of user experience design. And yet trust is a concept that's very hard to define in a precise manner. We all know it when we feel it but often fall short of putting it in words. Being able to turn the elusive and intangible into actionable and concrete steps, however, is exactly what makes UX so crucial in the modern business ecosystem.

Although a product experience that is useful and coherent is what fundamentally builds a sense of security and satisfaction, there's a lot more nuance that goes building it. That's what this article is about. We'll take a deeper dive into users' trust and how we can use UX to build a lasting relationship with your clientele.

Instilling trust goes beyond the bare visuals of a product. Ideally, a UX designer's work starts well before the first lines are drawn and long after designs are deployed.

Being more present allows us to achieve a comprehensive view of the whole customer lifecycle, which also encourages us to borrow tools and approaches from marketers, product managers and developers. Being well-rounded in the product development activities is yet another aspect that we'll advocate for throughout the piece. As a result of dabbling in non-design activities, we can gather an in-depth understanding of all areas where trust is vital.

Think About The Customer Journey

A central competency of UX design is a good understanding of your users' needs, preferences, and emotions. Therefore, overtime we, designers, need to develop a wide array of skills to improve our understanding of our users and their interaction with our products.

One such way entails using qualitative data and detailed analytics, which is vital in allowing us to outline a user's persona's most important qualities. Analytics can be used to create hypotheses and validate or discard them. As a result, you'll be able to create experiences that will foster customer loyalty and a sustained sense of trust.

Let's look into the stages of a customer journey and explore how UX designers can bring value to the table. You might also notice the way we suggest to structure the customer journey map is marketing-oriented. Such marketing-orientedness speaks to the purpose of this article: to give designers a broader perspective.

Below, we can see one such example of a customer journey that's structured around the so-called "funnel" marketers and sales-people use:

Below is the classic visualization of a sales/marketing funnel. You may have come across different wordings for the stages but this doesn't change their essence. The reason this visualization is shaped like a funnel is simple: only a small portion of people who come across your product will end up becoming a paying customer. We've also combined the intent and action into one stage, since in the context of building trust through good UX they're fairly similar.

We've also combined the intent and action into one stage, since in the context of building trust through good UX they're fairly similar.

Now we need to apply this funnel thinking to a customer journey. That's exactly what we did with the customer journey map (CJM) below. This map was created for one of our projects a while ago, and was tweaked significantly to respect the client's privacy. By focusing on the whole funnel, we were able to go beyond the product UI, and audit the whole UX from the very first users' interaction with the product in question.

Now that we've talked briefly about how we can map users' journey to pinpoint trust-sensitive areas, let's move on to the first stage of the funnel: Awareness.

More after jump! Continue reading below ↓

Awareness

Awareness is the stage where we should analyze how customers learn about a product or service. When devising a strategy for this step, we need to start from our users' problems and their most common pain points. Being user-centric enables us to think about the best ways to approach potential customers while they are trying to tackle a certain pain point. The goal here is to have a reserved and more educational tone.

Sounding too corporate or salesy can have an adverse effect on a person that isn't familiar with the product. The way we should approach the awareness stage depends on whether your product is launched or not.

In order to map a journey that is representative of real users we need real data. The ways of collecting this data will depend on whether the product in question is launched or not. Let's go through both of these scenarios separately.

The Approach For Launched Products

A product or service that has already hit the market can learn a lot about the people it attracts. Both qualitative and quantitative methods can provide us with a wealth of valuable insight.

There are plenty of tools and techniques in the market that will help get to know your users better. Here are the ones that are used the most often:

Let's break down the three in more detail.

Google Analytics

Google Analytics is a popular tool that is predominantly used by marketers, but it has gradually been adopted by UX specialists as well. It's an excellent way to learn about the types of audiences you need to design for and create hypotheses about their preferences. More importantly, Google Analytics gives us insights on how people find you. Conversely, it allows you to learn how people do not find you.

A launched product can dive into a variety of values to better their understanding of their clientele. Here are a few of them:

Top Sources Of Traffic
This allows you to understand what are the most successful channels that drive awareness. Are you active enough on these channels? Can anything be improved in terms of your online presence?

Here's how Google Analytics present data on where your users come from:

User Demographics
This provides you with data on your audience's age, gender, lifestyle, and interests. That's one of the ways you can validate a UX persona you've created with data rather than your assumptions;

Here's how Google Analytics visualizes the data on the users' location:

Keyword insights - you can use two approaches here. The first one involves the usage of Google Search Console. It shows you the keywords your audience uses to locate your page. It provides you with a wealth of insight into user pain points and can inform your keyword strategy.

The second approach is gauging the data from SEO tools like ahrefs or SEMrush to see how people phrase their search query when they face a problem your product solves.

Once you have an understanding of the keywords that your potential customers use, put them in Google. What do you find there? A competitor product? An aggregator website like Capterra or Clutch? Perhaps nothing that suits the query? Answers to these questions will be invaluable in informing your decisions about optimizing the very first stages of your custom journey.

Here's how Google Search console shows which keywords users use that end up visiting to your website:

FullStory And Its Equivalents

There is now a great variety of UX tools when it comes to analytics engines. They help translate complex data into actionable insights on how to improve your online presence. The tool that we use, and see other designers use very often is FullStory. Such tools are a great solution when you're looking to reduce UI friction, find ways to enhance funnel completion, and so forth.

By using such tools, businesses can learn a lot about user behavior and how they can calibrate products to their needs. Do your users read the product description you write? Do they skim it? What part of the page seems to grab their attention? Does that validate or refute your initial assumptions?

User Interviews

Interviewing your user base has a broad spectrum of benefits when it comes to understanding their motivations, values, and experiences. There are many kinds of interviews, i.e. structured, unstructured, ones that feature closed or leading questions, and so on. They all have their benefits and can be tailored specifically to your service or user base to extract maximum insight.

For the purposes of creating a customer journey map that visualizes real data, consider asking questions like:

"How would you go about looking for an X service or product?"

"What information is/was the most important while making a purchasing decision?"

"What are some of the red flags for you when searching for our service/product?"

Approach For Products Pending Launch

There's plenty of valuable insight that can be gathered without having a launched product. Designs that instill trust from day one are bound to maximize an organization's success in the long run.

Here are the tools and techniques you should use:

Let's go through each of those.

Keyword And Online Research

One of the most straightforward ways to establish whether a product is fit for its market is keyword research. Often, looking for keywords is associated with SEM and SEO practices, but there's a catch. This kind of research will reveal a lot about the most prominent needs on the market as well.

There are a few methods of keyword research can be used to establish market fitness:

Mining For Questions And Answers
Think about websites like Quora or Reddit. Are people asking about how to solve a problem your product solves? What are the ways they currently go about solving it?

Competitor Reviews And Descriptions
Is there a trend on why competitors get bad reviews? Conversely, is there something that helps them get better reviews? Is there a gap in their features?

Social Listening
Go through twitter, facebook, LinkedIn hashtags and groups. See if there are communities that are built around the problem you solve or the demographic you target. If so, see what these people talk about, ask them questions.

Keyword Research Tools
This research method helps you learn two things. The first one is whether people have a need for your product or service. By seeing the number of queries in a given period of time you can draw conclusions about the viability of your product. The second valuable insight is seeing how people describe the problem you're solving. Knowing how people talk about their pains, in turn, will help you speak the same language with your customers.

User Interviews

To some, conducting user interviews before product launch may seem pointless, but it's far from being true.

By understanding who your potential customers are and learning about their needs and preferences is a valuable vehicle for building trust.

Here are a few important things you can learn from potential users:

Whether or not they like your design.
The visual side of a product is a vital link, allowing to build trust. For someone to like your design, of course, implies that you already have some designs complete.

Whether or not they find your product idea useful.
This information will allow you to analyze how fit your product is for the market.

The features that they'd like to see in your product.
This will help you quickly adapt to the needs of your customers.

Whether or not they find it easy to use your product.
This data will inform your product's usability, which too implies having some designs complete. A prototype would be ideal for early usability testing.

Thorough and well-planned user interviews are instrumental in making intelligent business decisions. They provide you with invaluable insight rooted in feedback directly from your potential users.

Competitor Research

Understanding your competitors ' products is vital when it comes to market differentiation. It enables us to learn what customers are lacking and fill in those gaps.

Here are a few things that'll help you conduct a simple competitor research with trust in mind:

Choose the right competitors to research.
By the way, these don't have to be digital products. For example, simple notepad is a competitor to productivity apps, as they solve the same problem: being on top of your tasks and staying productive. How does that help with trust and creating a CJM? It allows you to empathize and put yourself in the shoes of your users. Also, it helps your craft authentic and relatable messaging that resonates with people.

Ensure that your analysis is consistent.
It's important to have a clear understanding of which aspects you're going to analyze. Come up with analysis criteria, so that your notes are structured and easy to draw conclusions from.
Considering different options is almost always a part of a customer's journey. You have to make it easy to understand how you're better than the alternatives.

Establish the best sources for your data.
The best source is users: either yours or someone else's. Period. But a few google searches would certainly do no harm.

Define the best ways to incorporate your findings into your product at its inception.

Studying your competition will provide you with a wealth of quantitative and qualitative data that will guide your business decisions. As a result, you'll create a product that fits your users' needs and instills trust and satisfaction.

Consideration & Acquisition

Users that have made it to the consideration stage are interested in your product but aren't prepared to become paying customers. At this point, they're evaluating the options offered by your competition and assessing whether they'll get the value they're looking for.

There is a wide array of things businesses can do to motivate users to transition into a paying relationship through building trust. Here are a few of them:

Explain How Your Algorithms Work

If your product revolves around AI/ML algorithms, to enhance customer experience, it's important to explain how it works.

We're typically very sensitive about our data. Respectively, there's no reason to think that users will blindly trust a product's AI. It's our responsibility to counteract the distrust by explaining how it works and what kind of data it will use.

Here are a few great ways you can outline the AI's functionality while also encouraging them to make their own informed decisions:

Calibrate Trust
AI systems are based on stats and numbers, which means that they can't replace rational human thought. Emphasize that your algorithm is skilled at giving suggestions, but users should make their own choices.

Display Confidence Levels
An essential aspect of the scientific approach is that there are no facts - there is only evidence. Make sure to communicate how confident your algorithm is of something to be true.

Explain Algorithm Outputs
The results of an analysis must be accompanied by a clear explanation thereof.

Good UX & UI

A well-executed UI is at the crux of user trust. Satisfying visuals, consistency, and ethical design will make your product appear trustworthy. Lacking the above will dissuade people from purchasing your product or services.

Here's an older design example. Would you willingly use such service, especially when the competitors' design isn't stuck in 2003?

No offense to Gmail's former self, by the way. There's a reason it doesn't look like that anymore though.

The same could also be said about your product's UX. Confusing user flows, poor feature discoverability, and other other usability issues are a surefire way to scare away a good chunk of new users. A good remedy to such pitfall is making sure your design adheres to the usability heuristics. If you're dealing with legacy design, conducting a heuristic evaluation would also serve you well.

Also, stuff like fake buttons, dark patterns, and a wonky interface are guaranteed to seriously hinder your growth.

Testimonials & Reviews

Customer reviews are essential when it comes to building trust. There's a significant body of research indicating that positive feedback can boost your sales and conversions.

You don't have to take our word for it. Here's what researchers in Spiegel Research Center have to say about the importance of review:

Based on data from the high-end gift retailer, we found that as products begin displaying reviews, conversion rates escalate rapidly. The purchase likelihood for a product with five reviews is 270% greater than the purchase likelihood of a product with no reviews.

Plus, studies have shown that people use testimonials to assess how trustworthy a product is.

It's also worth noting that people who have negative experiences are a lot more likely to write a review, rather than the ones who had a good one. That's why you should be creative in asking people to leave reviews. Here's how Upwork approaches soliciting feedback.

Notice that Upwork allows you to see what review a customer left only after you've left one. It's fascinating how they leverage curiosity to encourage users to leave feedback.

Over 90 percent of internet users read online reviews, and almost 85 percent of them trust them as much as a recommendation from a friend. Reviews are an important part of a trustworthy online presence.

That being said, it's important not to create fake reviews that glorify your product. Please don't buy reviews or mislead users in any different way. People can generally sense when praise is excessive and disingenuous. Furthermore, users appreciate a few negative reviews as well.

A study conducted by the North Western University and Power Reviews concluded the following:

"As it turns out, perfect reviews aren't the best for businesses, either. Our research with Northwestern University found that purchase probability peaks when a product's average star rating is between 4.2 - 4.5, because a perfect 5-star rating is perceived by consumers as too good to be true."

Badges

Trust badges are icons that inform your users about the security of your product/service. Badges are especially important if your site has a payment page.

Providing your credit card information on a website is a sign of trust. Therefore it's essential that we not only abide by security standards but also convey the fact that we do.

Badges are also invaluable when it comes to showcasing important partnerships or rewards. For example, b2b companies often display awards from websites like Clutch or GoodFirms.

Good Spelling And Grammar

A poorly written copy is a simple way to ruin your online credibility. A few typos will certainly dissuade some people from using your product by losing their trust in it.

Think of it this way: How can you trust a service that can even get their text right? Would you trust their online security? Would you be willing to provide your card information to them?

The pitfall of poor grammar and spelling might seem obvious, but oftentimes the UX copy is written in a rush. And we designers are prone to glazing over the copy without giving it too much consideration.

You'd be surprised how many error notifications and other system messages are written in a hurry never to be reviewed again.

Blunders like on the screenshot below, in our experience, happen way too often:

Retention

Considering that a customer has made it to the retention stage, it's fair to say that you've earned their trust. However, it's essential to mention that this trust needs to be retained, to ensure that they'll continue using your product. Moreover, whenever there are people involved screw-ups are bound to happen. That means that you need to have a plan for fixing mistakes and getting the trust back.

Here are a few things you can do to elevate user experience and maintain a high trust level:

Emails

Effective email communication is paramount to customer retention. A whitepaper done by Emarsys indicates that about ⁴⁄ ₅ of the businesses they surveyed use e-mails to retain their customers.

As a communication medium, email is among the most expressive. It can convey emotions through text and media while also addressing customers' needs.

A user-centric approach to email marketing is bound to keep your customers happy, informed, and engaged. That implies not spamming and providing actual value or entertainment. Preferably, both.

Notifications

Consistent and well-thought-out push notifications are also a great way to keep your customers intrigued.

First off, it's always a good idea to welcome your users. They've just made an important step - they've bought your product or purchased a membership. It's a simple and elegant way of thanking your customer for their choice.

Secondly, consider notifying them about exclusive offers. Sharing information on special deals allows you to provide them with extra value for merely being a customer of yours.

Finally, consider personalizing your notifications. Using users' name or recent activity to notify them about relevant stuff will also skyrocket their engagement. However, it's worth mentioning that being explicit about having users' information too often or using sensitive data to personalize notifications can come across creepy.

Whether the notification above is creepy is up for you to decide :)

In-product Perks

There are a variety of bonuses you can offer to build trust in the retention stage. They nudge our customers to use your product actively. These are especially potent in making up for any screw-ups.

Here are a few popular ones you can look into:

Closed beta access to new features;

Seasonal discounts;

Loyalty programs;

Discounts on renewals.

Conclusion

Phew, reading this article must have been quite a journey. We've almost reached the end. In order to help you consolidate everything in this article, let us try to recap its contents.

Creating a successful product is all about building trust. Luckily, there are so many ways to improve a product's trustworthiness through UX. However, it's essential to make these practices consistent. Customers seek to interact with brands that can deliver great experience throughout all interactions and touchpoints.

One of the ways to account for each touch point is reconciling two journey mapping techniques - marketing & sales funnel and customer journey map. The funnel allows us to go beyond the in-app experience that designers often are reluctant to do while a customer journey map provides empathy, structure and the depth of analysis.

Listing all of the ways to boost trustworthiness for each funnel stage would take another couple of pages, so a simple advice would do. Empathy is the key for getting in your users' shoes and tackling their trust concerns. For a more concrete list of guidelines, scroll up and skim through the headers. That should jog your memory.

The bottom line is that we encourage you, dear reader, to shortlist the stages your users go through before actually becoming your users. Is there anything that might undermine your product's trustworthiness? Is there anything you could improve and nudge a soon-to-be user in the right direction? Giving definitive answers to these questions and addressing them is a surefire for a better designed product.

Further Reading on SmashingMag:

# data[].attributes.attachment_link.title
Building User Trust In UX Design - Smashing Magazine

# data[].attributes.attachment_link.description
Trust is at the heart of a long-term strategy of any product. There are many ways to earn it, and even more ways to lose it. In this article, we'll go through how you, as a product designer, can make sure your product nurtures and retains trust throughout every touchpoint.

# data[].attributes.attachment_link.readable_text
This article will cover how to build a full website design from scratch following the process of user experience and user interface. This will be done in three stages:

1. Wireframe
Sketching the layout

2. Prototype
Preparing the user interface from the wireframe

3. Design in Figma
Completing the design from the prototype with color, image, etc

Watch the full video course with the step-by-step process in the YouTube embed below for free:

Step #1: How To Make a Wireframe

The first step to designing a website: wireframe it.

A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design.

Wireframes give you an idea of the overall structure pages will take, and how navigation will flow.

If you are considering building a website, you can do a wireframe quickly and easily. You don't even have to be a graphic designer to do so.

To get started, all you need is a pencil and some paper. (Or if you want to get an iPad and iPencil.)

We are going to create a wireframe and show how it allows for a quick, iterative design process. This will create a living piece of documentation that you can use for yourself and for a client. And you can use this to reason through your planning - all before you invest any time in actually coding it.

Here are some steps we'll cover in this article (and in the accompanying video tutorial):

1. Sitemap planning

2. Creating a homepage wireframe

3. Using markup in wireframes

4. Wireframe components (header, menu, footer)

5. Wireframing your Features Page and Contact Page

6. Mobile Responsive Wireframes

Wireframe #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you'll understand which pages you're going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you'll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don't have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that's it.

Wireframe #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven't wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

boxes with diagonal lines through them to represent images

horizontal lines to represent paragraphs of text

and a circle with an L in it to represent your logo.

For the homepage, we'll build out a slider image, menu, and logo. We'll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Wireframe #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it's useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let's markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn't have to literally explain what the content will eventually be - just what it represents. So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title."

Now that we have already created a header and footer, we can reuse them for additional pages. If you're working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Wireframe #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Wireframe #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It's good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we're on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it's possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

Wireframe Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. I recommend you try it for your next project to help you plan how it might function and look.

Wireframing is the ideal approach for this, since it takes so much less time than having a designer do a full-blown User Interface prototype.

Step #2. How to Make a Website Prototype

You may have heard the old saying: "Measure twice, cut once." Well that is exactly why you should plan out a website before you build it. And that's where prototyping comes in.

When we design our websites, we progress from wireframing to prototyping to - finally - a full design.

I wanted to explore and expand on what Prototyping actually means by taking you through the full process.

In this part, we'll cover:

1. What an Early Prototype is

2. Creating a Structure: Frame, Rows, Columns

3. Adding Content: Header, Slider, About

4. Designing Sections

5. Conclusion: What we've learned from the prototyping process

Prototype #1: What is an Early Prototype?

A prototype is normally the secondary iteration of a design, as it is built on top of a wireframe.

A wireframe usually involves a simple drawn sketch via paper, pen, or online tool. Next we build the prototype, which is our more refined mockup for the website or app.

Let's take a look at the early wireframe we built s o far.

It has a number of pages, sections, and areas where text and images will be added later.

The goal, then, in the Prototype is to build this visually, but without adding color or images.

In this example, I will be using Figma to do the Prototype. You can view the whole Figma protype here.

Prototype #2: How to Create a Website Prototype Structure: Frame, Rows, Columns

When we created the wireframe, we considered the grids - but they were hand drawn.

When doing an early prototype, we have to define them properly so that the whole design follows the grid structure.

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This will be useful later when we collapse the columns to rows for mobile responsiveness.

You can create your own grid structure in Figma. But be aware that you (or someone else) will later need to actually code these designs.

Whenever you're designing something, be sure to take the developer into consideration.

Prototype #3: How to Add Content to a Website Prototype: Header, Slider, Sections

Unlike the Wireframe, we are no longer representing text with lines, and headers with blocks. Instead we need to fill out content for a mockup.

This doesn't mean adding colors or images. But it does mean we have to show real text.

At this stage, it's a great idea to make sure that the header and sections are shown with the actual content they will be intended to hold. This will allow better selection for colors and images in later stages of the design.

In this part of the example, I built out the slider with hero text, and a description underneath. There are a few things to look out for at this phase of the prototype process:

Font sizing and positioning

Content location and spacing

Margins and padding between sections and content

Prototype #4: How to Design Sections of the Website Prototype

For prototyping and the final mockup, it's important to start layering your groups and sections. Sections can include things like the header, the "about us" section, and the sponsors section.

You can create groups in your UI tool (Figma does this with Ctrl+G). Label your sections and set them with different background colors. This will make it easy to identify them, and will allow you to easily move them about.

Too many times I've been asked to move certain parts of a website up and down the grouping. By grouping all your components into sections, you will make it much easier on yourself during the prototype phase of the design work.

Prototype Conclusion: What We Have Learned from the Prototyping Process

As we build out the rest of the design, it's important to ensure that this early prototype does not become a full mockup for a website design.

It's easy to get carried away. But the goal of doing a prototype after a wireframe is to ensure that we can continue to plan the website's development.

It's much easier to identify problems and issues in the early planning stages and update them before diving into creating the full design. Such prototyping may only take you a few hours, but it can save days worth of effort later in the process.

Step #3. How to Build a Website Design in Figma

Our final step will pull all the elements together so far, and fill in the space between. This includes replacing blank boxes with real images, placeholders with content and greys with color.

It's important to do a bit of research into what sort of product or website you will be building. Most things can often be extrapolated from the logo, such as what kind of design and color will be used.

The introduction of this logo will show the colors for this design, which will include blacks and blues, as well as the design aesthetic, which has a more simple box like model.

The logo should not be too large and overwhelming, as the main focus should be on the hero content, and the menu, but it should be enough to stand out on its own when placed at the top of a website.

Design #1: Hero Section

Using the shades from the logo, we can apply the same colors to the background of the hero image. In this case, it's black with white text. This immediately allows for better contrast of the logo, menu and text in this section.

The hero section can be improved further by adding in a background image that is subtle in nature, and doesn't take focus away from our text, as well as an image that can bring into perspective the product, service or content we are trying to deliver.

Design #2: Content

The content of a design can be further improved by applying good photography or imagery.

While stock photography is useful to bring more life, if you have good images of the product or service, those always deliver more context when paired with the description, such as an about us section.

Design #3: Testimonials

It's always a good idea to bring reputation and authority to your website, so whenever designing a page, a good testimonial section provides just this.

We customise the design of this section by letting it stand out with an alternative color - in this case blue. This blue also makes this section be segregated from the section above it.

Then white is used for each of the testimonials themselves. If you only have one or two, that's fine, you can divide the boxes. However if you have many, it's also useful to turn this section into a swiping slider.

Finally the footer. This part of the design is usually one of the easiest and doesn't require too many changes.

First we match the dark colors we have been using so far. Adjusting the contact form to fit more inline with the text of the website as well as including the logo in once more at the bottom. We make sure the same spacing is applied from the bottom and top and we are complete!

Conclusion: What the Finished Website Looks Like

I hoped you enjoyed this journey on developing the wireframe, prototype and full design.

You can view the whole process in real time on YouTube at this link, which will cover a lot more elements, such as the mobile and responsive design, and additional thinking process for each stage.

You can also access the Figma design files to view or use if you want to give this example a go yourself, or create your own personal version using this as reference.

This whole process is part of what I am trying to teach on my own channel and also part of a course/book I am writing on design called Enhance UI. The goal is to help developers understand the fundamentals of design. Check out my Enhance Ui Book below:

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime. 😉

If you read this far, tweet to the author to show them you care. Tweet a thanks

# data[].attributes.attachment_link.title
UI / UX Design Tutorial - From Zero to Hero with Wireframe + Prototype + Design in Figma

# data[].attributes.attachment_link.description
This article will cover how to build a full website design from scratch following the process of user experience and user interface. This will be done in three stages: Wireframe Sketching the layoutPrototype Preparing the user interface from the wireframeDesign in Figma Completing the design from the prototype with color,

# data[].attributes.attachment_link.readable_text
Creating a great user experience needs to start with the validation of your problem, be included in your prototype, and continue to evolve as you beta test with users. Good design cannot be tacked on to the end of a project.

1. Start From the Right Place

Start with human need and brand: Understand your users' needs to design an appropriate product/service. Considering this from a brand perspective allows you to tune the experience so the user feels the brand in every interaction. Together, this turns your product/service into a unique, relevant, and engaging experience that is a unique reflection of your brand. This creates a good UX.

2. Prototype Your Project

Mock-ups, wireframes, user flow diagrams, etc. have become the norm in the everyday life of a software project. Though one thing we find lacking more often than not is a clickable prototype. Prototypes allow us to look at, play with, validate and refine a product's user experience. An ability to create 'hot spots' (with static images) and allow the stakeholders to take the next logical step is very helpful. We use InVision for mobile and web prototyping, collaboration, and workflow platform.

3. Validate the Problem

Most teams leap from the client stating a need or problem to trying to solve it without validating the actual issue. In our experience, the more time we spend unearthing the reason for beginning a creative or development journey, the faster we're able to validate solutions and develop an MVP. All this ties well into the Lean UX approach that tests at every milestone and ensures success.

4. Do More Usability Studies

When UX efforts fail, it is typically because the people involved in the design do not trust each other. In that context, one UX best practice is to not involve engineering in the discussion of various UX options. Let the UX team do the usability studies and come up with a viable, simple user experience uncluttered by views from other members of the team.

5. Have Easily Digestible Experiences

Just because a User experience (UX) is simple or understandable by the internal team does not mean users will think the same. Keeping the end-users in mind and in-the-loop will significantly improve otherwise challenging experiences. Simplicity can be the difference between creating an active user vs. an overwhelming (and losing) one.

6. Focus on Iterations With a Small Set of Beta Users

A lot of companies are great at the initial design. Collecting features, learning about user personas, and figuring out a good first solution. But it is really hard to get it right on the first try. The best solution needs to be calibrated based on live feedback. Build iterations into your plan. This removes the pressure to 'get it right' and re-focuses on speed and deep observation.

# data[].attributes.attachment_link.title
6 Critical User Experience (UX) Practices - DZone Agile

# data[].attributes.attachment_link.description
Creating a great user experience needs to start with the validation of your problem, be included in your prototype, and continue to evolve as you beta test with users. Good design cannot be tacked on to the end of a project. Start with human need and brand: Understand your users' needs to design an appropriate product/service.

# data[].attributes.attachment_link.description
UI components for react-table based on ui-core.

# data[].attributes.attachment_link.readable_text
Quick summary ↬ Writing CSS has probably never been more fun and exciting than it is today. In this post we'll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS. If you're interested, we've also just recently covered CSS auditing tools, CSS generators, front-end boilerplates and VS code extensions - you might find them useful, too.

It's incredible to see what we can do with CSS today, especially if you still remember how difficult it once was to figure out stacking contexts or why margins collapsed and why top: float didn't work. In this post, we'll look at just that: exciting and fun things we can do with CSS, exploring common problems and use cases we all have to face in our work.

Richer, Life-Like Shadows With CSS

Shadows help convey meaning and add extra value to a UI. However, a lot of shadows that we see on the web these days don't use their full potential. Let's change that!

A comprehensive deep-dive into all things shadows comes from Rob O'Leary. His article on CSS Tricks explores how light affects shadows and how to define a light source - the foundation to creating authentic shadow effects. Once that base is set, you'll learn how to use shadows to evoke depth, elevate elements, and inset them, how to layer shadows, and, of course, which CSS property to use for which use case. Rob also takes a look at the accessibility and performance implications that shadows bring along, as well as how to animate them.

Another fantastic article on the topic comes from Josh W Comeau. To put an end to those "fuzzy grey boxes that don't really look much like shadows", as Josh describes the current state of most shadows on the web, he shows how to transform typical box-shadows into beautiful, life-like ones. A little detail that makes any UI a lot more tactile.

CSS Paper Cut-Out Effect

If you ever wanted to create a paper cut-out effect for a heading, you might have struggled quite a bit. Perhaps you need to set up two separate div s that then would be overlapped on top of each other. The spacing would need to be defined in relative units, of course, that might be a bit difficult to get right across screens.

Stephanie Eckles' CSS Paper Cut-Out Effect solves the problem for good with CSS custom properties, CSS Grid, CSS transforms and a good ol'-fashioned CSS function attr(). Stephanie is using a data-attribute on h1 along with a span inside it. attr() picks up the value of the data-attribute, which is then used for the content-property in a :after-pseudo element. The highlights, shadows and colors can then be adjusted with CSS Custom Properties. Reusable and simple to maintain!

And if you are interested in more magic by Stephanie and other wonderful people who love CSS, take a look at StyleStage, where modern CSS gets the spotlight it deserves.

Also, take a look at Ahmad Shadeed's piece on Thinking About The Cut Out Effect, which goes into all the fine detail of deciding when SVG might make more sense, and how to implement in a real-life scenario. The article also provides plenty of code examples to get started with!

The Minimap For The Web

We've seen them before: tiny horizontal bars that usually live at the top of the page. As a user is scrolling down, the horizontal bar is filling up, so the user knows how much is actually left to scroll.

What if we make it a bit more contextual though? Perhaps the page includes some images and videos, or quotes and distinct sections - wouldn't be interesting to highlight them differently, while also allowing readers to pin a position on the page and jump back if needed? Well, Rauno Freiberg thought so, too.

Rauno's minimap for the web (currently works only in Firefox) makes it trivial to create a minimap representation of the entire page, while also allowing readers to pin section of the page and navigate between them. To achieve it, Rauno uses an experimental CSS property to display a live image from an arbitrary HTML element (which currently only available in Firefox).

Conditional Border Radius In CSS

When designing cards, you might want a border-radius to have a quite sizeable value when there is enough space to display it along with other cards. Yet when there is no space and perhaps no margin either on the card - as it might be the case on smaller screens - you might want to reduce border-radius to 0. How would you achieve that?

Ahmad Shadeed has looked into this problem in quite a bit of detail in his article on Conditional Border Radius In CSS. The idea, originally suggested by Heydon Pickering and Naman Goel, is to use a large enough number to trigger one state or the other. On smaller screens, if the difference between 100vw and 100% is 0, then the radius will be 0, too; but if the difference is larger, a larger value would be used. You can take a look at the CodePen as well.

More after jump! Continue reading below ↓

Meet Smart Interface Design Patterns, with Vitaly Friedman. With 100s of real-life examples, guidelines and best practices that you can apply right away. From complex mega-dropdowns and tables to web forms, carousels and filters. Online, and live. Oct 25 - Nov 8, 2021.

Jump to the workshop ↬

CSS Grainy Gradients

What if you wanted to add some noise to bring a bit of texture to an image? Of course you could export images as PNGs, WebP or AVIFs, but ideally we'd want to add "noise" on top of SVGs, so we can always turn and off noise if we wanted to.

In his CSS-Tricks article on grainy gradients, Jimmy Chion explains how we can generate colorful noise to add texture to a gradient with just a sparkle of CSS and SVG. As Jimmy explains, the idea is to use an SVG filter to create the noise, then apply that noise as a background. Then we layer it underneath a gradient, refine the brightness and contrast, and - voilà - you have gradient that gradually dithers away.

Issue solved! You can also explore the Grainy Gradient playground that Jimmy has set up.

Multi-Line Background Gradient

Some things might seem impossible to do with CSS - well, until someone finds a hack to make it happen. Like in this case: Can you achieve a multi-line padded text with a gradient that doesn't reset for each line?

Yes, as Matthias Ott shows. Matthias' solution is a bit hacky, but it leads to the desired result thanks to a pseudo-element that is added on top of the text. An interesting idea to tinker with.

Form Field Focus Without Outlines

Who said forms need to be boring? Hakim El Hattab created a demo that proves that even something as simple as a form asking for name, email, and password is an occasion to think outside the box and cater for a spark of delight.

To achieve that, Hakim combines form focus and validation in a subtle yet surprising animation that gets by without any focus outlines on the fields themselves. Instead, a dot marks the field that is focused. When the focus switches to another field, the animation is triggered, and the dot jumps to the new active field, drawing a connection between the two. Form field validation is also integrated seamlessly, with the dot expanding and showing a checkmark. If you'd like to dive deeper into the code, Hakim also published a demo on Codepen. Inspiring!

Transitioning CSS Gradients

If you've ever tried to transition gradients in CSS, you probably have noticed that it actually doesn't work. Instead of gradually fading from one gradient to another, the change is happening immediately, abruptly, with no smooth transition between the two.

As Keith J. Grant has discovered, we can achieve the transition with a clever workaround though. We use a pseudo-element and opacity transform for that. First, we apply one gradient to the element, then position its pseudo-element to fill the element, and then apply the second gradient to it. And we "transition" between two gradients by transitioning the opacity of the pseudo-element. You can check a full working example on CodePen.

Improving Image Performance With image-set()

Have you heard of image-set() already? You can think of it as a CSS background equivalent to the HTML srcset attribute for img tags. Chromium-based browsers and Safari have supported it for some years now, Firefox followed just recently. Ollie Williams takes a look at what we can and what we can't do with it today.

image-set() can be used to serve different background images to different users. (Large preview)

As Ollie describes, one use case for image-set() is to provide multiple resolutions of a background image and leave it to the browser to decide which image is served to a user - a high-res version for users on fancy devices and a lower-res image for those on slow connections or screens with a lower pixel density, for example.

Another very promising use case is still lacking browser support, unfortunately: the idea to use new image formats like AVIF, WebP, or HEIF while adding a fallback for older browsers. If you want to achieve something like that already today and don't need background-image, the &lt;picture&gt; element might be an alternative worth considering, as Ollie suggests. A great read to help you improve image performance.

Clip-Path Pop-Out Effect

With clip-path: path() supported by major browsers, it's time to get creative. Mikael Ainalem shows a beautiful use case for the rather new feature: a buttery-smooth pop-out effect.

A pop-out effect created with clip-path: path(). (Large preview)

Mikael uses clip-path: path() to set a photo of a person apart from its circle-shaped background. As you hover over it, the person seems to rise from the inside of the circle, creating a cool 3D impression. Perfect for "About Us" pages.

Whimsical 3D Button

Details matter. Designing a lovely button doesn't seem to be a big complicated endeavor: a bit of padding here and there, a funky color, accessible text, and a few button states. Well, Josh Comeau has gone all the way to design a truly whimsical 3D button that you might want to click more than once.

The idea is simple: we create two layers and offset the foreground layer a little bit at first. On hover, we shift the front layer down. Then, we adjust the focus outline with outline-offset, or use :focus:not(:focus-visible) to hide the outline when the button is focused and the user is using a pointer device.

Then we shift the button up by a few pixels when they hover, animate the transform a lil' bit, adjust the Bezier curve for animation and add a bit of blurring, for a softer, more natural shadow. And voilà - we have a whimsical 3D button that is accessible, works on mobile and on desktop, and is a pleasure to tap and click on. Of course, you can find the full code snippet on Josh's blog.

CSS Charts

Perhaps you need to design a column chart, or a bar chart, or even a multi-dataset column chart or stacked columns. Where do you even start? Perhaps with Charts.css, a CSS data visualization framework that uses CSS utility classes to style HTML elements as charts.

Created by Lana Gordiievski and Rami Yushuvaev, the framework supports many chart types, has no dependencies, and is very lightweight. It also includes thorough documentation on its components and built-in chart types, plus the source code is available on GitHub (licensed under MIT). And if you need slightly more creative approaches, Preethi explains how to create CSS Charts with interesting shapes on CSS-Tricks as well.

The New CSS Reset

What do you use to normalize styles across browsers? As of recently, there were new approaches to reduce the size of the global CSS reset, and perhaps they would be good candidates for your projects as well.

With his Modern CSS Reset, Andy Bell has reduced the CSS reset to its minimum by adding box-sizing rules, removing default margins, set core root default and body defaults. Along with it Andy removes all animations, transitions, and smooth scroll for people that prefer not to see them, and has added modern properties like scroll-behavior and text-decoration-skip-ink by default.

The New CSS Reset by Elad Shechter takes a slightly more aggressive approach. Elad removes all the default styles which we are getting on specific HTML elements except the display property. Both approaches are worth looking into!

Ah, the good ol' layout shifts! As Bramus Van Damme explains, one of the slightly more obscure reasons for layout shifts comes due to different types of scrollbars on the web. While overlay scrollbars on iOS/macOS are placed over the content (and aren't shown by default), other scrollbars are placed in the "scrollbar gutter", i.e. the space between the inner border edge and the outer padding edge.

When the content of a box becomes too large, the browser will - by default - show a scrollbar. In the latter case, it will cause a layout shift. Fortunately, this problem might be gone for good soon. Meet a shiny new scrollbar-gutter property: by setting it to stable, we can have the browser always showing the scrollbar gutter, even if the box is not overflowing.

And to keep things symmetric, we can use scrollbar-gutter: stable both-edges. The feature isn't available yet, but coming in Chromium very soon, with other rendering engines hopefully following soon.

The Surprising Things That CSS Can Animate

When you think of animating CSS properties, which ones come to your mind? Will Boyd looked at the question from a different perspective and decided to explore the properties that don't come to mind immediately, the ones that aren't typically associated with animation, but turn out to be animatable.

Animating overlapping cards with z-index is one of the surprising things that CSS can do. (Large preview)

In his post " The Surprising Things That CSS Can Animate", Will dives deep into these unexpectedly animatable properties - and, of course, the nifty things you can do by animating them. z-index, for example, can be used for layered animations, opacity helps you fade out a modal just with CSS. A great reminder of how powerful CSS is.

Learning Resources

Learning never stops, right? Below we compiled some useful - and fun! - resources that are perfect to take your CSS skills to the next level. And if you're already a CSS pro, there are also challenges to put your knowledge to the test. Enjoy!

CSS Vocab And Cheatsheets

You might have been there before. Just when you are working on a tight deadline, you need to look up something quickly. For CSS, you will never go wrong with CSS Tricks Almanac, and you can also look up CSS vocabulary gathered by Ville V. Vanninen from Finland as well.

Learn Flexbox The Fun Way

What do frogs, zombies, and towers have in common? Well, they are your best friends when learning Flexbox. Because, let's be honest: Flexbox is very powerful once you understand it, but getting there can be quite hard. So let's make learning a bit more fun.

In the game Flexbox Froggy, you help a little frog and its friends find their lilypads by, you guessed it, writing CSS. The game consists of 24 levels that take you from the very basics of Flexbox positioning to more advanced challenges.

If zombies are more down your alley, Flexbox Zombies is for you. Each section of the game unravels part of the plot, introduces a new Flexbox concept, and presents so-called "zombie survival challenges" that help you solidify your new skills.

Last but not least, you might also want to take a look at Flexbox Defense. Inspired by tower defense games, your job is to stop incoming enemies from getting past your defenses - by positioning your towers with CSS, of course. All three games run right in your browser. Happy flexbox'ing!

CSS Grid, CSS Selectors, And Other Competitions

Do you want to take your CSS skills to the next level? These three little games help you do just that - quite literally. In Grid Garden, you'll become the proud owner of a carrot garden. 28 levels are waiting for you in which you need to take good care of your crop with the help of CSS grid.

If you feel your CSS selectors skills could need some polishing, CSS Diner is for you. Plates, apples, pickles - in each of the 32 challenges, you'll need to use a different CSS selector to select specific items on a table.

And if you're up for some competition, be sure to also check out CSSBattle. In the CSS golfing game, you'll be using your CSS skills to visually replicate targets with smallest possible code to get to the top of the leaderboard. Each of the challenges is dedicated to a specific topic like visibility, display, transition, or z-index.

Wrapping Up

Have you come across a CSS resources or technique recently that changed the way you approach a particular challenge? Let us know in the comments below! We'd love to hear about it.

# data[].attributes.attachment_link.title
Smart CSS Solutions For Common UI Challenges - Smashing Magazine

# data[].attributes.attachment_link.description
Writing CSS has probably never been more fun and exciting than it is today. In this post we'll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS.

# data[].attributes.attachment_link.readable_text
Responsive Layout Example from material.io

Material-UI is one of the most popular react component library nowadays with 40000+ star on github. However, there is no instruction or topic about how to build layout based on them. That means you have to combine Drawer, Header (AppBar), Content and Footer by yourself. If you are not a Material-UI expert, I guarantee that you will take at least 3-4 hours to complete it (with high probability that you will need to rewrite it again in the future. Believe me, I had been through that moment 😭).

So why is it take so long to start doing layout. Here is what I found.

1. A little bit of intermediate & advanced CSS is required. You need to have a well understanding of how flexBox affect each other. Otherwise, you are doomed.

2. Many variants for different sizes of the screen (responsive). You definitely don't want permanent Drawer to appear in mobile screen, right?

3. It seems easy, but a lot of dependent function. Ex. When Drawer is close, the Header need to reduce its width to fulfil the screen as well as the content.

Today I have a solution for you. It is not from the official but I am sure that it is gonna help you a lot. Moreover, you can be very confident on using my code because the it is just a combination of Material-ui components and a basic react context, nothing else, no other utilities.

yarn add @material-ui/core

If you don't care how it works, see demo now.

Tip: Use Bit to share and manage reusable components across projects, to build faster as a team. You can instantly share components between your projects, develop them anywhere, and sync changes to source code and dependencies. Here's an example of MUI components with Bit.

React animation components with bit: develop, reuse, sync changes

This gif shows the idea interaction between components.

It is simple. The Root component that you render (must!) will be a Provider for the layout configuration (explain later). Each child (Nav, Header, Content and Footer) subscribes to the context and behave differently based on each variable. So let's look at each variable in the config.

There are 9 variables in config that you can set.

navVariant is the same variant as Drawer can accept. The good news is you can set it differently in each screen.

// example
const config = {
 navVariant: {
 xs: 'temporary', // recommended in mobile
 sm: 'persistent',
 md: 'permanent',
 }
}

2. navWidth is the width of the navigation (white area). Again, you can set in number or as object (different in each screen).

3. navAnchor is the position of the navigation. Default is left and it is rarely changed. However, it supports responsive pattern (object) if you want to change.

4. collapsible makes navigation page able to be collapsed. the collapsed button is automatically shown if it is collapsible. it also supports responsive pattern (object).

5. collaspedWidth is the width after navigation is in collapsed state. It supports responsive pattern (object).

6. clipped bring header to the front of the screen (nav is behind the header not below). It supports responsive pattern (object) but normally it should be the same across devices.

7. headerPosition is the position of official AppBar (Header is the AppBar). It supports responsive pattern (object)

8. squeezed make Header and Content stay in the screen when navigation's width varies which means you will see them stretch and contract (also affect children inside them because width is dynamic). It supports responsive pattern (object)

9. footerShrink. It supports responsive pattern (object)

That's it. really? is there anything simple than this?

This is the playground for each preset. Try it!

For you who don't like those presets. I've recently built a Layout Builder for you!. OMG, try it now.

yarn install mui-layout

More features

Follow these links for more info

If you have any idea, just comment or tweet it @siriwatknp. I'm very happy to hear from you. Love it? in case you don't know, you can give me 50 👏. haha, build with 💗 (a lot).

# data[].attributes.attachment_link.description
Material-UI is one of the most popular react component library nowadays with 40000+ star on github. However, there is no instruction or topic about how to build layout based on them. That means you have to combine Drawer, Header (AppBar), Content and Footer by yourself.

# data[].attributes.attachment_link.readable_text
D ark UI designs are seen far and wide, from mobile screens to massive TVs. A dark theme can express power, luxury, sophistication, and elegance. However, designing for dark UIs presents multiple challenges and won't meet expectations if implemented poorly. Before diving into the "dark side," designers should look before they leap.

Physicists say black isn't really a color; it is the absence of light. In his experiments shining sunlight through prisms, Sir Isaac Newton didn't even include it on the spectrum of colors.

In color psychology, most colors represent different things for different people. In Western cultures, black is often associated with death, mystery, and evil. Green is often associated with growth because of nature. Blue is almost universally calming because it's associated with sky and water. Color is emotional.

Other effects are cultural. Purple, for example, is still associated with luxury because in many ancient cultures, purple dye was expensive and rare-only royalty could afford it. It was a significant part of the cultural zeitgeist for long enough to become a part of the human psyche.

Digital products with dark UIs- associated with power, elegance, and mystery-are a formidable trend. While it's often said that dark mode can reduce eye strain, there is no evidence that this is true. Under certain circumstances, it's also supposed to save battery life. Still, more often than not, dark themes are an aesthetic choice.

Dark UI designs use shades of gray similar to analogous color palettes.

Not all interfaces are suitable for a dark theme. Designers should look at brand fit, cultural suitability, and color psychology and consider the emotional impact before choosing to go with one. It's a tricky balancing act.

Whereas a financial app targeting millennials may achieve the cool factor with a dark theme, it may be inappropriate for a big bank's website aimed at the general population. Too rich, too dark, and too stylish may become more frustrating when all people want to do is check their balances and pay a bill.

B2B SaaS application dark UIs are notoriously difficult to design. Standard web UI components such as data tables, widgets, forms, and dropdowns can look odd on a dark UI. Because many color schemes don't work well with dark UIs, certain brands and products-depending on type, context, and environmental factors-are not a good fit and may prove an insurmountable challenge.

Designers who have not worked with dark UI design before and decide to jump in with both feet might find themselves in rough, uncharted waters. In the oceans of dark UIs, norms are bent, rules are changed, and pitfalls are aplenty.

That said, there are many good reasons for using dark UIs:

When the design is sparse and minimalist with only a few content types

When it is appropriate for the context and use, such as nighttime entertainment apps

To create a striking, dramatic look

And, there are scenarios when it's not recommended:

When there is a large amount of text (reading on a dark background is difficult)

When there is a lot of mixed content types

When the design calls for a wide range of colors

A dark theme is not a black theme. It would best be thought of as a "low-light" theme. One of the main concerns with dark UIs is achieving enough contrast so visual elements have separation and text is legible. Most designers would think using black would be optimal to achieve strong contrast. However, it's best not to use true black (#000000) for backgrounds or surface colors. Black is best reserved for other UI elements and used sparingly. For example, true black can be used for small UI elements or a surrounding bezel.

Google's Material Design dark theme recommends using dark gray (#121212) as a dark theme surface color "to express elevation and space in an environment with a wider range of depth." In addition, many designers recommend adding a subtle dark blue tint to dark grays when defining the color scheme. It tends to create a better dark tone for digital screens and a more pleasing dark UI color palette.

An advantage of using a range of grays is that it gives designers latitude because a broader range of colors can be expressed. A gray palette also helps create depth because drop shadows can be more easily seen against gray vs. black.
Particular attention needs to be paid to text contrast in dark UIs.
Web Content Accessibility Guidelines (WCAG) call for "the visual presentation of text to have a contrast ratio of at least 4.5:1," except for large-scale text, which should have a contrast ratio of at least 3:1. Therefore, designers need to ensure that content remains comfortably legible in dark mode.

It's also a good idea to test for proper contrast between other UI elements, such as cards, buttons, fields, and icons on various displays and devices. If there is an imperceptible separation between UI elements, the design blends too much and risks becoming dull.

Color stands out in dark UIs. It's best to use schemes with lighter, unsaturated accent colors. Avoid using saturated colors in dark UIs, as they can visually vibrate against dark surfaces. What's more, as a best practice, colors need to pass the WCAG's AA standard of at least 4.5:1 when used with text.

When defining a color scheme for a dark UI, Google recommends a limited number of color accents to keep most of the space available for dark surfaces. Using split complementary colors can help. The scheme has one dominant color and two colors adjacent to the dominant color's complement. Doing this provides the needed contrast without the tension of the complementary color scheme.

The right color scheme can help create good contrast. Colorable is a helpful tool for selecting accessibility-compliant color combinations of text and background colors.

Text and essential elements, such as buttons and icons, should meet legibility standards when appearing on dark backgrounds. As seen in the Jabra Sound+ app above, colors other than white can be used for text and icons.

Google's Material Design site has a useful color palette generator (under "Tools for picking colors") with which designers can create and apply color palettes to a UI. The accessibility level of color combinations can also be measured with a companion Color Tool.

"Use strongly contrasting colors to improve readability. Many factors affect the perception of color, including font size and weight, color brightness, screen resolution, and lighting conditions." -Apple Human Interface Guidelines

One of the fundamental elements of successful dark UI design is the adroit use of negative space. If designed poorly, dark UIs can make digital products appear heavy and overbearing. To counterbalance, designers can make dark UIs more lightweight by taking advantage of negative space within sparse, minimalist designs. Minimalist design is just as much about what isn't there as what is. When used skillfully, negative space will make a dark UI more scannable and allow people to absorb information more easily.

The French composer Claude Debussy once said, " Music is the space between the notes." The same sentiment is true for scannability-negative space between elements is what makes a layout work. A liberal amount of negative space around UI elements is what gives them definition. It emphasizes important content and provides the necessary breathing space to ensure the design doesn't feel dense and cluttered. Without breathing space, the human brain is less likely to scan points of interest and more likely to wander.

Interfaces crammed with too many elements and text are the bane of high-quality dark UI design. By carefully considering the visual hierarchy in dark UIs, designers can make their creations more easily scannable, thus elevating the user experience.

Every piece of text in dark UIs requires scrutiny. The concern is twofold: legibility and contrast. First, it's about size. Text needs to be large enough for good legibility (small text on dark backgrounds is harder to read). Second, there needs to be enough contrast between the text and the background.

The availability of thousands of digital fonts makes it easy to display messages with impact for headers and hero messages. Designers can mitigate readability issues by increasing the contrast and adjusting the font size, character spacing, and line height for smaller text.

The W3C AAA recommendation for regular-sized text (less than 18 points if not bold) is to have a contrast ratio of at least 7:1. This also applies to other UI elements: icons, images of text, and text labels, such as button labels. It's incumbent on designers to ensure that all digital products are accessible to everyone. It not only improves usability, and therefore UX, it's the law in most countries.

There are countless options available for designers to source excellent typefaces that work well in dark UIs. Google Fonts, Font Library, and Adobe Typekit are a few that offer easy app or site integration and a wide range of choices.

A dark theme doesn't mean flat. With light themes, illumination, shading, and shadows create a sense of depth. With dark UIs, it is more challenging because they contain predominantly dark surfaces with sparse color accents. Still, designers can use three or four levels of elevation with corresponding color schemes for text to convey depth.

Why depth? Most modern design systems use a system of elevation levels to communicate depth. A sense of depth corresponds with the natural world. Our vision has depth perception, and we live in a 3D world. Depth helps to emphasize the visual hierarchy of an interface. Elements in the foreground, for example, draw attention to themselves, such as a warning dialog.

The surfaces are illuminated differently to signify different elevation levels. The higher a surface's position in the elevation stack (closer to an implied light source), the lighter the surface. A brighter surface makes it easier to distinguish elevation between components, and it helps to see shadows, making the edges of each surface more apparent.

Devising each level's surface color requires care. It's best not to have more than four or five levels. Designers need to account for text contrast as surfaces go higher in the stack and get lighter. If the background color is not dark enough to meet a contrast level of at least 15.8:1 between white text and the surface, text at the highest (and lightest) elevated surface won't pass the 4.5:1 standard. In some instances, it might be best to specify an element's text color as true black (#000000) in the design system to achieve good contrast on a light gray background.

Reflecting on the principles outlined above, here are some excellent examples of dark UI design:

Atom Finance leverages a dark theme for a sophisticated look and limits its accent colors to three. The layout uses negative space and a sparse, minimalist design for a complex financial website. The site uses subtle shading well to indicate different component elevations in the UI.

Both of these minimalist dark theme websites use bold typography. Careful shading with a single accent color is used in alignment with dark UI design best practices.

Despite the challenges of working with dark themes for SaaS applications, this data visualization dashboard for IBM is exemplary. The number of accent colors is kept to a minimum, and the site uses subtle shading to show different UI elevations.

These mobile apps observe dark UI design best practices by using true black for bezels only, proper shading of elements for different elevation levels, and a limited number of accent colors.

The decision to use a dark UI design over a traditional one needs to be approached with discretion. It shouldn't be chosen for the wrong reasons-to be hip, different, or mimic someone else's design. Designers should have a strong rationale for their choice and consider the content, context of use, and the device on which the design will appear.

Dark themes are suitable for some digital products but a real struggle to implement for others. Simplicity is key. They're great for presenting minimalist content, data visualizations, media sites, and entertainment platforms. They're a poor fit for complex, data-heavy B2B platforms, text-heavy pages, and lots of varied content.

For courageous designers ready to cross new stylistic frontiers and explore dark UIs through an emotional and aesthetical lens, they offer an exciting playground of infinite possibilities-on the "dark side."

# data[].attributes.attachment_link.description
D ark UI designs are seen far and wide, from mobile screens to massive TVs. A dark theme can express power, luxury, sophistication, and elegance. However, designing for dark UIs presents multiple challenges and won't meet expectations if implemented poorly. Before diving into the "dark side," designers should look before they leap.

# data[].attributes.attachment_link.readable_text
React is a very popular JavaScript library for building User Interfaces. Using React makes the process of building UI very simple but you know what makes the process even easier? Using an already-made library.

Here are over 10 popular React libraries you might want to consider using for your project:

Blueprint Blueprint is a React UI toolkit used to create and manage data-intensive user Interfaces for desktop applications

Chakra UI Chakra UI is a React lbrary which offers you simple, modular and accessible components which you can use as building blocks you need to build your React applications. All components are also dark mode compatible. Instead of spending hours to code and reinvent the wheel, you can easily use Chakra's components to build your app.

Search UI Every content-based websites need some sort of search functionality for retrieving certain parts of content. Search UI is a React-based search framework for implementing world-class search functionality without having to code from scratch or reinvent the wheel.

Ant Design Ant Design is an enterprise-grade React UI framework containing a set of tools for creating beautiful and Intuitive User Interfaces for your web application. Ant Design is a great choice for building websites targeted for high-end clienteles.

Material UI The Material Design is an modern design language created by Google, which aid web designers create novel touch experiences in their websites via cue-rich features and natural motions that mimic real-world objects/materials in an immersive form. Material UI includes a set of React components for faster and easier process of web design. You can either build your own custom design system or start with the Material Design.

Reactstrap Reactstrap is a React-Bootstrap component library. It provides inbuilt Bootstrap components that make it very easy to create User Interfaces with its self-contained components that provides flexibility and inbuilt validations. Reactstrap is similar to Bootstrap, but with self-contained components. Hence, it's easy to use and support Bootstrap 4.

Smooth UI As it's name implies, this library is focused on user experience and accessibility. Smooth UI makes it is easy to design beautiful websites and applications with clean and smooth features to make for a satisfactory experience for the end user.

React DatePicker Something for event-based websites. React DatePicker is a simple, reusable and highly customizable React Component that allows you include date selection functionality to your websites. It's very easy to use as well.

React Select Many websites have some sort of checkbox or select control for collecting simple information from the user. React Select houses a beautiful set of select input control with multiselect, autocomplete and other nice features

React toggle Toggles are an essential part of user Interfaces. A lot of websites use toggles to switch some feature on or off. React toggle is an elegant, accessible toggle component for React which also acts as a glorified checkbox.

Wysiwyg All modern content management platforms must have a modern text editor interface for users to type into. This is where wysiwyg comes in. This library is a multifeature text editor build on top of ReactJS and DraftJS.

Halogen One of the most popular ways of keeping users in a website happily waiting while a page or resources is getting fetched from the backend is with the use of spinners. Halogen houses a huge collection of loading spinners made with React.js.

I hope you will find something interesting in this collection. Thank you for reading and have a nice day!)

# data[].attributes.attachment_link.title
10+ Useful React UI Libraries For Your Project

# data[].attributes.attachment_link.description
React is a very popular JavaScript library for building User Interfaces. Using React makes the process of building UI very simple but you know what makes the process even easier? Using an...

# data[].attributes.attachment_link.readable_text
This project was my first experience of MERN stack and Chakra UI. I learned a lot while doing it and had a lot of fun. I learned about Express, Node.js and MongoDB. I'll build better projects as soon as possible.

Hosted with Vercel & Heroku

📷 Screenshots and Demo GIF

🗂️ Packages used in this project

GitHub
View Github

# data[].attributes.attachment_link.title
MERN Stack Blog App With Chakra UI and Redux

# data[].attributes.attachment_link.description
This project was my first experience of MERN stack and Chakra UI. I learned a lot while doing it and had a lot of fun. I learned about Express, Node.js and MongoDB. I'll build better projects as soon as possible. Hosted with Vercel & Heroku View Github

# data[].attributes.attachment_link.readable_text
Data grids (sometimes referred to as data tables) are an essential part of many business applications, and the task to create them can be monumental. Learn about the pitfalls of rolling your own grid, as noted by our engineering teams and the many we have met in the field.

Of the many awesome things JavaScript (React, Angular, Vue... ) developers can create in their apps, most are really enjoyable, some will give you a bit of a headache but also satisfaction in the end, and a handful should be labeled, "Here be dragons." I'd argue that the data grid component (also referred to as a "table") falls into the latter category.

A JavaScript data grid implementation with multiple features: paging, filtering, grouping, localization, sticky (frozen) columns and export to PDF & Excel.

Based on five exciting years of experience in the UI components space, I have an urgent request: Don't set out to write your own JavaScript data grid! I know it sounds like a fun, challenging project that would be great for your résumé, but unless this table is just a list of items with a single functionality (e.g. filtering), you are getting into uncharted waters. Things may get rough faster than you can imagine.

I know writing a grid may be one of your goals as a developer. But before you do, take a few minutes to scan these five hard truths I've learned from the Kendo UI engineering teams (people who have written data grids for various frameworks to satisfy customer requirements) and from our users (developers who have run into these icebergs in the field).

1. It's a Black Hole!

Unless you're working with the most disciplined client/manager, what started as a requirement to implement a simple grid with basic paging and filtering functionality is rarely going to end there. On a very simple note, you will need to add buttons and possibly a dropdown just to enable paging.

And with every additional feature requested, the complexity of your data grid component grows exponentially. Ah, sorting and editing would make the grid so much more convenient, though. And now that we have so much data, grouping is simply a must-have. Did we mention the whole app needs to be responsive as half our users browse through mobile devices?

Suddenly managing your JavaScript grid's expanding functionality and mix-and-match external libraries you've integrated along the way to save time is becoming a riddle wrapped in an enigma. And that's without even considering maintenance yet - to which we'll dedicate a separate section.

"We tried rolling our own grid and, as scope creeped, implementation and maintenance costs shot up. The client was far from satisfied with the originally requested feature set." - This is a sentiment that echoes in many conversations we have with developers.

In summary, before you set out to build a JavaScript data grid from the ground up, ask yourself this hypothetical, but all-too-real question: "Would you drop all your other responsibilities to build and maintain a single component?"

2. The Grid Is a Façade for Multiple UI Components and Features

What your end users see as a humble table, on the flip side can really be a long list of different components and functionality. A long list with teeth. At first, adding a button here or regular textbox there isn't so bad. It may even be fun! But hold on, the user just requested to be able to edit a date. Have you ever tried to implement your own datepicker component? That request alone can set you back a couple of weeks. Same with a feature such as the ability to live update cells, or the ability to export a grid's contents to an Excel spreadsheet, which I know-from experience-that users ask for all the time. To get an idea what such a feature entails, check out this real-time data loading implementation in a sample app built with the Kendo UI for Angular Data Grid.

What's more, integrating buttons, dropdowns, context menus and various input elements into your JavaScript data table can feel like trying to fit a square peg into a round hole if you're using different libraries for each of these components. Compatibility between your disparate pieces of code/packages is not the only concern here-if your grid has a date input, you may need to add internationalization and localization when users are spread geographically. This needs to be applied to all the building blocks that comprise your grid, which can be very challenging when applied after the fact.

Accessibility compliance is a whole other ball game, as meeting accessibility guidelines will require first reading the various specs, interpreting them for your specific use case and only then implementing them in a complex component such as your Excel-like grid. What we noted about i18n above also applies here: If you weren't thinking about accessibility from the beginning, you may find yourself rewriting huge portions of your code just to try to be compliant.

3. But Wait, There's More: Support and Maintenance

Remember how in school we first we learned the laws of physics as they apply to an ideal environment: "Nothing can travel faster than the speed of light in a vacuum." Same is true for development. If you were working in a vacuum, you could be done with your grid once and for all and continue with your life.

In reality, you could be responsible for most or all of these accompanying tasks: bug fixing and replying to users constantly comparing your grid to what they know best-Excel; writing documentation so others can work with it, too; browser support; issues with third-party libraries you've implemented; and managing changes coming from a new framework version, to name a few.

4. Data Grid Performance Is Hard to Optimize

As you keep adding to the neat list of features of your data grid, you will start hearing complaints that the grid is loading too slowly. On mobile devices, you need consider how to smoothly handle touch actions instead of mouse and keyboard input.

Many JavaScript data table implementations fail because of user frustrations with performance. As you start researching how to make your grid load faster and handle data more efficiently, most answers point at optimizations that you had to do before even starting.

For example, with the KendoReact Data Grid, we made a decision from the start to decouple data operations (paging, sorting, filtering, grouping, etc.) that can slow down the component from the internals of the Grid. As part of this effort, we created a dedicated a Data Query library that simplifies dealing with the data operations in the Grid. With the logic around data handled by libraries or the server rather than a UI component, the Grid becomes super fast while still letting users slice and dice the data to their hearts' desires.

5. It's Already Been Done-and Done Well!

"Don't reinvent the wheel" is a mantra commonly chanted by developers. Been there, done that, printed it on a t-shirt. We hear this sentence so often that it rarely even registers anymore. Let's approach it with a beginner's mind for just a minute.

The oldest discovered wheel dates back to about 5,500 years ago in Mesopotamia. From a present-day perspective, 5,500 years is a lot of time for people to try to create a better wheel, a new kind of wheel, a wheel to call your own. Indeed, many have tried. Look around, though. We still use the Wheel of Mesopotamia™, that perfect round shape that one of our predecessors invented over a million years after the first humans appeared.

Now, is there a better metaphor to use for a UI component that's square 99% of the time? Probably, but you get the point. The hard work has been done. If you can use someone else's grid and it serves your purpose well, why spend countless hours recreating it instead of focusing on building rockets to the moon, or whatever strikes your fancy.

I mentioned earlier that my team has built multiple data grids. We have run into all the same pitfalls described so far. However, as a company we have been building data grids for the web for over 18 years, so we know what to expect when we set out on a journey to write a table from the ground up and can plan accordingly.

There's one last thought I want to leave you with before you tell me in the comments how great writing a data grid has been for you. As I've spent so much time outlining why you should NOT build your own JavaScript grid, I need to provide an alternative. What is it that I recommend? Don't re-invent the wheel. Use one of the many wheels already out there: use a third-party data grid. And I can't speak for any of the multiple solutions out there, but I can say that the Kendo UI team has done their best in creating these four powerful, yet easy to implement, grids:

So, before you set out on the long and winding road of writing your own grid, take a step back and think about the options available to you. If you have some basic requirements, you might be able to build something on your own or use one of the many open source data grids out there. However, if you have more complex and advanced requirements, or know your users well enough that you can see them asking for an Excel twin, then take one of our Kendo UI Data Grids for a spin.

We've built these meticulously for each framework to ensure you get to benefit from a developer-friendly and feature-rich grid that integrates well with your existing apps-and as a bonus we throw in over 100+ other UI components in each library to help with any non-grid UX requirements. Let's roll!

P.S. To be precise, we've written many more Data Grids than these four. If you're interested in implementing data grids for any other technology-check out what's available in our developer toolbox, DevCraft.

# data[].attributes.attachment_link.title
5 Reasons Not to Write Your Own JavaScript Data Grid

# data[].attributes.attachment_link.description
Data grids (sometimes referred to as data tables) are an essential part of many business applications, and the task to create them can be monumental. Learn about the pitfalls of rolling your own grid, as noted by our engineering teams and the many we have met in the field.

# data[].attributes.attachment_link.readable_text
Hello everyone, my name is Vansh and I'm a frontend developer. A lot of people have asked me this question, "Do I need to learn design to be Front end developer?"

Before I answer this question first you need to understand that many companies do have in-house UX/UI designers, who will do the designing part and build mockups while you can concentrate on the development part. It's our task to give life to mockups, to make them interactive.

But what if you don't have a designer or you're building some side project for yourself, and when you have one, they're not always available because they have a lot of work or maybe if some mockups are missing. So you cannot always be dependent on a designer to make minor changes to the design as well. And you having a design sense is of considerable value for you and your team.

See I'm not saying you need to be a designer nor we are here to replace them. But it wouldn't hurt for you to pick up some designing skills as well. And it definitely helps to have a creative eye and develop knowledge esthetics.

So in this blog post, I'm going to share how you can build interfaces/apps that look good by just following these 7 UI fundamentals.
Let's Jump in!
1. White Space

The first UI fundamental we are going to discuss is the white space.

White space is the empty space between the elements in your UI. it's just a void of space but that gives your UI a structure.

let's look at an example

we can see the right side container is much more readable and looks good from the left container.

By using just 3 CSS properties, padding, margin and line-height, you can significantly improve the appearance of your text.

2. Alignment

Alignment is the process of ensuring that every element is positioned correctly in relation to other elements.

Visual alignment is one of the foundations of design, we humans prefer visually aligned objects.

First, let's look at this UI

We can see here are 4 elements, logo, headline, text and button, and they all seem to be off a little bit in terms of their alignment.

Again, with just 3 properties: margin, transform and text-align we can solve this.

we can see now it looks much better because everything is aligned properly.

3. Contrast

Contrast is defined as being in a 'strikingly' different state from something else. While building UIs we should keep in mind if users can clearly see and distinguish all the necessary details on the screen or page.

Look at the first image where there is a grey subheading and grey text on a button, we can see there is hardly any contrast from the background, it's hard to read text, especially on the button.

Now if we increase the contrast, using a darker color for text and white on top of the button, we can see it's much more readable.

Lack of readability can be a serious reason why users are not retained even with attractive products.

4. Scale

Scale is the size of elements that must be carefully considered. Leveraging the scale of different elements, you can greatly improve a design.

Let's look at this example, we can work on the scale on this UI.

First of all, cards are too small for this given layout. Also, there isn't much difference between headline and subheadline beneath it. Also, we can increase the size of the Hex color code.

In our second UI, our cards look much more filled out and better with the space around them, we also increased the size of the heading and subheading and it looks much better than the previous.

5. Typography

Typography isn't just the font but it is the art that involves arranging a typeface in various combinations of font, size, and spacing.

Typography requires the understanding of other fundamentals, along with a few other considerations like how to effectively choose fonts, their size, spacing and a few more.

If we look at our first UI, we can see there's a lot going wrong in terms of typography. First, there are 3 fonts used which are unnecessary. second, we are not really sure where to look at or which text is really important so we need to fix the scale as well.

In our second UI, we are sticking to just 1 font family, increased the font size of headings and decreased the size of cite that is 'John Doe' which is not really important and now it looks so much better.

6. Color

Color is the first UI design fundamental that shapes the user's experience. If you go to any website or app before you're able to process and even read anything your eyes are exposed to the colors, so color in terms of UI design is extremely important.

Different colors can have different meanings like green for instance can be associated with growth and wealth, red with loss or warmth, black for elegance and luxury and so on and so forth.

Before building UI be aware of your target audience for this particular app and what you need to project eliciting emotions

Another thing you should focus is on avoiding a bunch of colors in your UI design. Too many color destroy the quality of UI. Also, avoid colors that don't work well with each other and don't complement each other well.

7. Visual Hierarchy

Every element on a user interface has a level of importance. Some elements are more important than others. Visual hierarchy is how you establish this importance. The way we do it is by utilizing the above UI fundamentals that we have discussed.

If we look at this UI, this lacks visual hierarchy as we are not really sure where to look at first and our call-to-action button lacks enough contract as well.

Fixing this by scaling our heading and making call-to-action stand out, we have improved the visual hierarchy Looks better than before? Right?

conclusion

There isn't one UI fundamental that is more important than the other. They are all equally important in order to get the design right. If the design is lacking in one of these areas, it's really easy to notice that something is not quite right with the quality of the design. So be sure to think about all these fundamentals the next time you need to build a user interface.

Good luck

# data[].attributes.attachment_link.description
Hello everyone, my name is Vansh and I'm a frontend developer. A lot of people have asked me this question, "Do I need to learn design to be Front end developer?" Before I answer this question first you need to understand that many companies do have in-house UX/UI designers, who will do the designing part and build mockups while you can concentrate on the development part.

# data[].attributes.attachment_link.title
GitHub - estevanmaito/windmill-react-ui: 🧩 The component library for fast and accessible development of gorgeous interfaces.

# data[].attributes.attachment_link.description
The component library for fast and accessible development of gorgeous interfaces. Projects using it: Windmill Dashboard React Be the most accessible it can be out of the box and the fastest way to production. Go to docs to see complete, live examples Install Inside tailwind.config.js Then place Windmill at the root of your project (the order doesn't matter, as long as your application is inside).

# data[].attributes.attachment_link.title
GitHub - lusaxweb/vuesax-next: Vuesax v4: framework components for Vuejs

# data[].attributes.attachment_link.description
Vuesax v4: framework components for Vuejs. Contribute to lusaxweb/vuesax-next development by creating an account on GitHub.

# data[].attributes.attachment_link.description
DaisyUI is a plugin for Tailwind CSS - Beautiful CSS component - Clean HTML with component classes - Customizable and themeable - Only 2KB. No JS, No dependencies - Free!

# data[].attributes.attachment_link.readable_text
Any time is a bad time to be monopolistic on the web. A good web technology must be as inclusive as possible.

There are countless web technologies and the number increases significantly by the day. When developers want to use a new technology, they usually have to throw away the tools they use to make room for it. Changing tools so often and drastically gets in the way of growth of developers. Publishers of UI components, themes and plugins usually have to rewrite code to create new products that are compatible with the new technology.

Moreover, web standards are exponentially catching up with libraries and frameworks. Therefore, a technology is doomed to have a short lifespan if it does not leave a lot of room for evolution. When web standards catch up with particular technologies, developers are left with skills that are obsolete. This forces developers to learn new skills in order to survive in the industry.

Odom, a JavaScript framework for building user interfaces, aims not to replace any technology, but work with every technology. It provides a lot of great features on its own. But, let's be realistic. No single tool is best for every task. Odom leaves a lot of room for other technologies. It can also be easily integrated into existing projects. It provides ways to override and supplement the default processes it performs.

I'm the author of the framework. I started this series in order to demonstrate how Odom works. In this part of the series, I will introduce the basic features of the framework. We will also look at what the future holds for Odom.

Compatibility

Odom can render four types of assets to the DOM; components, nodes, markup and text. Integrating Odom into an existing project is as easy as inserting any of such assets into the existing DOM. The snippet below shows one of the ways to insert a DOM node into the DOM.

The node is exported from an ES module at /components/header.js. Calling the method (one of the exports of Odom) without any parameters inserts the node into the DOM. The DOM node can be created using any method.

Flexibility

Apart from HTML, Odom allows you to use XML. You are offered two ways of converting XML to HTML. One way is by using an attribute in XML markup. On the XML element, you set the value of the attribute html to the corresponding HTML element. The other way is by providing a middleware that converts each XML element to a corresponding HTML element. The snippet below shows XML markup and the corresponding HTML markup after converting using attributes.

Odom supports supports writing styles at element level, component level and global level. At component level, global CSS can be imported from any file.

There are various ways of creating components in Odom. A component can be local to a script or module. Single-file components can be created using either ES modules or HTML files. It also provides support for multiple-file components.

Performance

Odom has very fast initial rendering. All child components of any component are created at once using concurrency/parallelism. Every component which is in the hierarchy of the component we want to render is built before rendering. At this point you are probably raising your eyebrows thinking about what would happen if any of the components took too long to be built. Odom provides a way for you to specify the maximum amount of time a component should be waited for. If the building of a component goes beyond the time limit, a placeholder is used in the DOM. When the component is ready, the placeholder is replaced with the actual component. If you have not specified the time, the placeholder will be used immediately.

Odom allows you to prefetch assets like components, text, blobs and JSON at once. The assets are made available globally and can be used when needed.

Any DOM element can be lazily loaded in Odom. This ensures that content is loaded only when needed. The snippet below shows how to apply lazy loading to an element.

As more content gets added to the DOM, Odom tries by all means to keep the performance up by reducing the amount of extra content. When you explicitly set an ID on a component, the styles for that component will be cached. When that component is created again, the styles are reused. Odom also uses event delegation in order to reduce the number of event listeners added to the DOM. When all instances of a component have been removed from the DOM, the styles for that component are discarded.

Odom provides a class for building components. The class contains utilities for creating and manipulating DOM nodes. These utilities are also used to add styling and behaviour to DOM nodes. Choosing carefully when to use the class and how to use it can result in significant performance gains.

Earlier, we looked at the different kinds of assets that Odom can insert into the DOM. If you don't need to use the class after rendering the node, keeping it would be inefficient. You can explicitly provide a node for rendering instead of a component. But, even if you don't, Odom will only extract the node and forget about the component. In either case the component will be claimed by the garbage collector. If all you need to do is create a DOM node from markup, using the class would be overkill. Odom allows you to provide markup for rendering. The markup will be converted into a DOM element and rendered.

In Odom, DOM mutations can be applied in a way that is friendly to performance. Whether you want to apply major or minor mutations, Odom provides a way to minimise the impact on performance.

Maintenance

Odom encourages separation of concerns. Content, presentation and behaviour are separated. Even inline styles are applied in a declarative way using JavaScript objects. When using frameworks like Bootstrap and Tailwind, markup becomes blotted with long class names and/or a lot of attributes. This makes markup quite hard to read. Some of the attributes are duplicated for similar elements. This makes it hard to maintain code. Odom provides a way to add attributes to elements in a declarative way via JavaScript. The snippets below show how a Bootstrap dropdown could be rewritten using Odom. You don't have to be familiar with Bootstrap to understand what is happening.
Original HTML code: Rewritten HTML code:
Only classes needed to identify the elements have been left. By looking at these classes, we can get a general idea of the presentation and behaviour of the dropdown.
JavaScript code:
All other attribute names and values not put in the markup are applied using JavaScript. CSS selectors are used to select the elements. Notice that the attribute href for every .dropdown-item is set in only one place. This makes maintaining code much easier.

Asynchronous Programming

A lot of processes on the front-end are performed asynchronously. Many a time did I pull my hair out trying to figure out how to fit asynchronous code in my synchronous code. If I was writing a function that depended on an asynchronous function, I either had to use a callback or use Promise.then, which, in the end uses a callback. This meant that I had to move some of my code into a callback. This changed the flow of the code.

If the function my code depended on could be asynchronous or not, I had to create two branches. One branch would handle the synchronous case. The other would handle the asynchronous case. This complicated the flow of the code. If another function needed the function I was writing to finish executing every step before continuing, then I had to conditionally return a promise or some other value. This would complicate the signature of the function.

Using asynchronous functions made things less complicated. If the function I was writing depended on an asynchronous function, all I had to do was use the await keyword. If the foreign function could be asynchronous or not, I used the await keyword anyway. This kept the flow of my code intact. The signature of the function was also simple because only a promise would be returned in any case.

Asynchronous programming enables us to use promises for concurrency and parallelism. Odom uses concurrency and parallelism to perform some of the tasks. This increases performance.

Development Tools

Currently I'm building development tools to perform the following tasks:

Converting HTML files to ES modules: At the moment, HTML single-file components are converted into ES modules at runtime. The performance would be increased if this was done at build time. Another problem with HTML components is that not all relative URLs work in the module provided in the script element. Converting HTML files to ES modules at build time would solve this issue.

Converting XML to HTML: Converting XML to HTML using both attributes and middleware.

CSS Preprocessing: Converting Sass (or anything of the kind) to CSS.

Scoping CSS: Scoping of component level CSS. Odom supports importing CSS in component level CSS. But, imported styles are not scoped, and not all relative URLs in @import rules work. These problems could be handled by the tools.

Minifying: Minifying of HTML, CSS and JavaScript.

Template literal processing: Template literals provide an easy way to write markup and styles in JavaScript. The available build tools don't provide a way to process code in template literals. This means that all kinds of processing must be done at runtime. This has negative effects on performance. The build tools will provide a way to apply the aforementioned kinds of processing in template literals at build time.

I hope other developers will join me in building these tools.

Dependencies

Odom currently has no dependencies. I didn't want to add any dependency unless I was sure it was better to do so. I'd like the community to help me decide which dependencies would be best for the framework. The following are some of the dependencies I'm considering:

fast-xml-parser: An XML parser. This could be used to parse XML before converting to HTML. It is much faster and simpler than vanilla JS methods.

parawait: A library I authored. It is used to achieve concurrency and parallelism. It is more memory efficient than the vanilla JavaScript methods.

CSS vendor pre-fixer: I haven't yet settled on any library for this. Odom currently adds vendor prefixes to inline styles only.

Odom is published on GitHub and NPM. To get started, refer to the quick start guide or the documentation. We have already looked at how Odom works well with Bootstrap and Tailwind. But, that's just the tip of the iceberg. In the coming episodes, not only will I dive deep into the features of Odom, but also include as many technologies as I can. I'd be glad if other people saw as much value in Odom as I do. For reading up to this part, thank you.

# data[].attributes.attachment_link.description
Any time is a bad time to be monopolistic on the web. A good web technology must be as inclusive as possible. There are countless web technologies and the number increases significantly by the day...

# data[].attributes.attachment_link.readable_text
vuesax-next (v4.x)

Vuesax Framework Components for Vuejs.

Status: Alpha

We are working to create a stable version that can be used in real projects, we are currently working on the documentation and the creation of components to have at least the amount of the v3
vuesax 4 is fully created from 0 and therefore each component and new functionality is worked in its entirety which takes time

The central team is working on the priority that is to create new components and verify that they do not have the bugs or problems of the previous version so we gain a better development and more complete components

Vuesax 4 is created with totally different technologies than v3 some of the most important changes are:

Vuesax v3

Components created with .vue files

Pre css processor: Stylus

Use of Vue-CLI 3 to compile the components

Vuepress v0.14.10

Vuesax 4

Components created with .ts files

Pre css processor: Sass

Use of Webpack and babel to compile the components

Vuepress v1.1.0

Typescript

We would love our users to test with Vuesax v4 to find bugs so we can fix them on the fly

Every day is being updated and working on Vuesax 4, we will announce each new component and significant improvement in our networks and discord channel, this in order to benefit from our own users and help us improve and test each component and function

Components v3 vs v4

What is still missing and is working

Components and functions

Examples in Codepen or Codesandbox

RTL support

Check the SSR support

Easy starter in Vue-CLI 3

Plugin for Nuxtjs

vs-code helper plugin

vuesax / types

# data[].attributes.attachment_link.title
A beautiful ui library of reusable components for Vue.js

# data[].attributes.attachment_link.readable_text
Minimal

Free React Admin Dashboard made with Material-UI components and React.

A professional React Kit that comes with plenty of ready-to-use Material-UI components that will help you to build more beautiful frontend pages.

Minimal UI Kit is built with Material UI v5 and Create React App.

Includes a complete design component Sketch and Figma file to extend your project development.

The theme is ready to change to any style you want.

Page demo

Getting started

# data[].attributes.attachment_link.title
A Free Admin Dashboard made with Material-UI components and React

# data[].attributes.attachment_link.description
Free React Admin Dashboard made with Material-UI components and React. A professional React Kit that comes with plenty of ready-to-use Material-UI components that will help you to build more beautiful frontend pages. Minimal UI Kit is built with Material UI v5 and Create React App.

# data[].attributes.attachment_link.description
⭐ Tailwind UI Kit is a one-of-a-kind collection of 600+ ready-to-drop-in components, and 30 templates with react, angular, and vue support.

# data[].attributes.attachment_link.readable_text
PokéDex

A simple Pokémon catalogue, built with React, Material-UI and PokéAPI.

Features

View basic details of each Pokémon

Filter Pokémon based on Region and Type

Sort Pokémon by ID/Name

Search Pokémon by its Name/ID

Dark mode toggle

Scroll to top

Lazy loading of images

Responsive design

Snapshots

Demo gif

Built With

Run locally

Clone this repo

Run npm install and npm start

The application opens in http://localhost:3000/ or any other available port

To-do

Include some more Pokémon data - strengths, weaknesses, moves

Complex evolution chains (Eevee and the likes)

Add favorites

Offline mode

Router for Pokemon details

# data[].attributes.attachment_link.title
A simple Pokémon catalogue built with React and Material-UI

# data[].attributes.attachment_link.description
A simple Pokémon catalogue, built with React, Material-UI and PokéAPI.

# data[].attributes.attachment_link.readable_text
PokéDex

A simple Pokémon catalogue, built with React, Material-UI and PokéAPI.

Features

View basic details of each Pokémon

Filter Pokémon based on Region and Type

Sort Pokémon by ID/Name

Search Pokémon by its Name/ID

Dark mode toggle

Scroll to top

Lazy loading of images

Responsive design

Snapshots

Demo gif

Built With

Run locally

Clone this repo

Run npm install and npm start

The application opens in http://localhost:3000/ or any other available port

To-do

Include some more Pokémon data - strengths, weaknesses, moves

Complex evolution chains (Eevee and the likes)

Add favorites

Offline mode

Router for Pokemon details

# data[].attributes.attachment_link.title
A simple Pokémon catalogue built with React and Material-UI

# data[].attributes.attachment_link.description
A simple Pokémon catalogue, built with React, Material-UI and PokéAPI.

# data[].attributes.attachment_link.title
A Neumorphism UI React component library

# data[].attributes.attachment_link.description
React component library designed on the “new skeuomorphism” or “neumorphism” UI/UX trend.

# data[].attributes.attachment_link.readable_text
In todays tutorial we're going to briefly go over what glassmorphism is, and create a design using it in Figma.

The new UI trend we're going to be talking about today is Glassmorphism.

Glassmorphism is possibly the new UI Design Trend of 2021, which in my opinion has a lot of potential.

The design trend for 2020 was Neumorphism... which had some rather obvious issues.

People started to use this with a lot of things, which were driving people a little bonkers.

I'm not bashing neumorphism, I myself like the idea of it somewhat, but there are of course accessibility issues for people who have eyeshight issues, which I'm not fond of to say the least.

Glassmorphism, in my humble opinion, in terms of accessibility has improved SIGNFICANTLY if you compare it with neumorphism.

As you can see in the image above, the visibility of the text, the layout, everything is much more visible as compared to Neumorphism, and it doesn't get annoying to use.

So, let's hop into Figma and create a new file.

Next, I'll search for some Mesh Gradients and pick one which I really like. I think I'll settle for this one:

Let's just copy and paste this image file into Figma. I'll set the size to 1920x1080px.

Next, let's just create a simple rectangle. I'll dimensions to 900x500px and set the border radius to 30px.

Now, let's go in the rectangle toggle a few things.

First, I'll get started by the colour. Go over to the fill, and change it from solid to a linear gradient.

I'll move the two points diagonally across the small box we just made.

Now, let's toggle the colours for these two. I'll go to the one up top and change the colour white (#FFFFFF) and set opacity to 70%.

Let's toggle the bottom one. I'll set the colour to white (#FFFFFF) and set opacity to 40%.

Here's a code for the linear gradient, for those interested.

Next, let's give it a small outline. I'll go to outline, hit the "+" and create a new outline. I'll give this a thickness of 5px.

Let's go into colours again, and also make the colour on this a gradient.

I'll follow the same process as I did last time with the background colour. I'll move the two points diagonally from the top left corner to the bottom right one.

I'll give the top one a colour of white (#FFFFFF) with a opacity of 30%.

I'll give the top one a colour of white (#FFFFFF) with an opacity of 20%.

Great! Now we have a cool looking outline.

Next, let's add some blur. Go into "effects", hit "+" and toggle the setting to layer blur.

Let's not go anywhere too crazy on this. I'll just set it 5.

Now, let's add some background blur. Do the same as said before. I'll set it to... maybe 15 for now.

Then, to show this effect I'll just add some text. Let's choose a colour of white (#FFFFFF), size of 144px a font of Poppins Bold.

Let's move it below the glass rectangle we created, and tada 🎉 you can now see the effect.

Spoiler:

I have a Linux system (and no money) so I can't use Adobe Xd, therefore I'm only able to show this effect to you in Figma.

Here is a tutorial I will recommend to you, if you're interested in learning how to achieve this in Adobe Xd.

I personally have been learning about an experimenting with glassmorphism myself too. Check out this dribbble design post for my latest creation with it!

You can view the Figma Board for this project, along with the board for my First one.

To sum everything up, Glassmorphism is in my opinion a great new design trend which I seem emerging and taking the place of Neumorphism in 2020. It has a lot of potential, as there are not nearly as many accessibility issues with it as when compared to Neumorphism.

After some discussion with people in the comments, I'll have to say that Glassmorphism isn't something you'll really be seeing too much on websites. Think of the basis of the design to begin with. For it to look good, you'll probably need some extra space in the background which isn't really practical for websites, in all honesty. Me and others believe that it will be a more popular trend in perhaps advertisements, due to it's clean and attrative look while still being accesible.

# data[].attributes.attachment_link.description
In todays tutorial we're going to briefly go over what glassmorphism is, and create a design using it in Figma. The new UI trend we're going to be talking about today is Glassmorphism. Glassmorphism is possibly the new UI Design Trend of 2021, which in my opinion has a lot of potential.

# data[].attributes.attachment_link.readable_text
Hello Geeks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'll share the top 15 sites which I use to get mood boards or to get inspiration for the design. I hope you'll like these ones.

Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 250 iOS apps and 25,000 patterns (screenshots from iPhone 12) available on the platform. Sign up to save your favorite patterns.

We collect awesome websites to help creatives find inspiration & motivation to do rad stuff. Keep inspirations that you love in one place. Add your site and inspire others with your design.

Design resources, interface patterns and inspiration.

Find and showcase the best web design inspirations and trends. Every day, we publish fresh and creative new websites ideas made by creative agencies and web designers from all over the world

A platform for your daily inspiration collected from daily ui & beyond. Based on Dribbble shots, hand picked.

SiteSee is a curated gallery of beautiful, modern websites.

The awards of design, creativity and innovation on the internet. Recognition & Prestige for Web Designers & Developers: http://awwwards.com brings you the best of the web every day.

Find inspiration and keep up with the latest web and mobile UI design trends

Dribbble is the world's leading community for creatives to share, grow, and get hired.

Showcase your work. Find new inspiration, hand-picked just for you.

When it comes to a great idea, you know it when you see it.

Designers' Secret Source. The best design inspiration - expertly curated for you. Muzli is a new-tab browser plugin that instantly delivers relevant design stories and inspiration

Lapa Ninja was created to help designers find inspiration, learn, and improve their design skills. Content is selected from some of the best designs on the web, and updated daily.

We collect and highlight the most beautiful commerce experiences on Shopify to help inspire designers, developers and merchants to create amazing things.

A "One Pager" is a Single Page website with no additional pages like About, Team or Services. All the content sits within the same webpage, traditionally in a long-scrolling layout. The beauty of a One Page website is it tries to promote one thing in an uncluttered, direct manner. This allows the visitor to make a quicker decision vs sending them to a bloated website with many options and pages. The One Page Love website was launched in March 2008 by Rob Hope in Cape Town, South Africa who continues to add One Page websites and resources daily.

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed these sites and you're satisfied with this article. Do not hesitate to share your feedback. Do you know more? Add them in the comments?

🌎 Lets connect

🙌 Support

My projects are fueled by coffees ☕, get one for me! ☕

# data[].attributes.attachment_link.title
15 amazing websites for UI inspirations 💖

# data[].attributes.attachment_link.description
This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Today, I'll share the top 15 sites which I use to get mood boards or to get inspiration for the design.

# data[].attributes.attachment_link.description
Get started with this free CSS generator based on the glassmorphism design specifications.

# data[].attributes.attachment_link.readable_text
A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.

New: the glassmorphism generator is live. Check it out!

Get notified when we launch

# data[].attributes.attachment_link.title
Glass UI - The definitive CSS UI library for glassmorphism

# data[].attributes.attachment_link.description
A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications. New: the glassmorphism generator is live. Check it out! Get notified when we launch

# data[].attributes.attachment_link.readable_text
Ring UI - JetBrains Web UI components

This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

Quick start

1. Install Yeoman and Ring UI generator: npm install -g [email protected] @jetbrains/generator-ring-ui

2. Go to the root directory of your project (create one if necessary), run yo @jetbrains/ring-ui and enter the name of the project. Then run npm install to install all the necessary npm dependencies.

3. Your project is ready to be developed. The following commands are available:

npm start to run a local development server

npm test to launch karma tests

npm run lint to lint your code

npm run build to build a production bundle

npm run create-component to create a new component template with styles and tests

Not-so-quick start

In case boilerplate generators are not your thing and you prefer to understand the inner workings a bit better.

1. Install Ring UI with npm install @jetbrains/ring-ui --save-exact

2. If you are building your app with webpack, make sure to import ring-ui components where needed. Otherwise, create an entry point (for example, /app/app__components.tpl.js) and
import the components there.

import React from 'react'; import ReactDOM from 'react-dom'; import LoaderInline from '@jetbrains/ring-ui/components/loader-inline/loader-inline'; ReactDOM.render(<LoaderInline/>, document.getElementById('container'));

3. Create webpack.config.js with the following contents (example):

const ringConfig = require('@jetbrains/ring-ui/webpack.config').config; const webpackConfig = { entry: 'src/entry.js', // your entry point for webpack output: { path: 'path/to/dist', filename: '[name].js' }, module: { rules: [ ...ringConfig.module.rules, <Your rules here> ] } }; module.exports = webpackConfig;

# data[].attributes.attachment_link.title
Ring UI: JetBrains Web UI Components For React

# data[].attributes.attachment_link.description
This collection of UI components aims to provide all of the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products. Install Yeoman and Ring UI generator: npm install -g [email protected] @jetbrains/generator-ring-ui Go to the root directory of your project (create one if necessary), run yo @jetbrains/ring-ui and enter the name of the project.

# data[].attributes.attachment_link.title
iView - A high quality UI Toolkit based on Vue.js

# data[].attributes.attachment_link.description
A High quality and rich functions, friendly APIs, free and flexible UI Toolkit based on Vue.js.

# data[].attributes.attachment_link.description
Quickly integrate Bootstrap v4 components with Vue.js

# data[].attributes.attachment_link.title
GitHub - vuejs/vuepress: 📝 Minimalistic Vue-powered static site generator

# data[].attributes.attachment_link.description
📝 Minimalistic Vue-powered static site generator. Contribute to vuejs/vuepress development by creating an account on GitHub.

# data[].attributes.attachment_link.description
Vue.js - Le Framework JavaScript Évolutif

# data[].attributes.attachment_link.readable_text
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required - everything you need to create amazing applications is at your fingertips.

# data[].attributes.attachment_link.title
Vuetify - A Material Design Framework for Vue.js

# data[].attributes.attachment_link.description
Vuetify is a Vue UI Library with beautifully handcrafted Material Components. No design skills required - everything you need to create amazing applications is at your fingertips.

# data[].attributes.attachment_link.title
GitHub - AT-UI/at-ui: A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0 (DEPRECATED)

# data[].attributes.attachment_link.description
AT-UI is a modular front-end UI framework for developing fast and powerful web interfaces based on Vue.js. Based on Vue A npm + webpack + babel front-end development workflow Support ES2015 CSS Style independent, make consistent user interfaces (See: AT-UI-Style) Friendly API Or using tag for global use Because the style of AT-UI is independent.

# data[].attributes.attachment_link.description
A lightweight collection of essential UI components written with Vue and inspired by Material Design

# data[].attributes.attachment_link.title
GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

# data[].attributes.attachment_link.description
A Vue.js 2.0 UI Toolkit for Web. Element will stay with Vue 2.x For Vue 3.0, we recommend using Element Plus from the same team npm install element-ui -S For more information, please refer to Quick Start in our documentation. Modern browsers and Internet Explorer 10+.

# data[].attributes.attachment_link.title
GitHub - airyland/vux: Mobile UI Components based on Vue & WeUI

# data[].attributes.attachment_link.description
Be Cool with Vue@^2.3.0 and WeUI. Live Demo >> vue@^2.3.0(for .sync modifier) webpack@^2.0 node@^7.6(development) 不按照 issue generator 来提交的会被关闭并 block，毕竟提醒每一个故意忽略(眼瞎、文盲或者缺少礼貌？) issue template 的人也是件很浪费时间的事。 vux2 template is directly modified from Vue official webpack template.

# data[].attributes.attachment_link.readable_text
All Platforms in One Go

Combine the power of Quasar UI with Quasar CLI. One source code for all platforms simultaneously with all the latest and greatest best practices out of the box. Focus only on your app's features and forget about the boilerplate around it.

# data[].attributes.attachment_link.title
Quasar Framework - Build high-performance VueJS user interfaces in record time

# data[].attributes.attachment_link.description
All Platforms in One Go Combine the power of Quasar UI with Quasar CLI. One source code for all platforms simultaneously with all the latest and greatest best practices out of the box. Focus only on your app's features and forget about the boilerplate around it.

# data[].attributes.attachment_link.title
GitHub - myliang/fish-ui: A Vue.js 2.0 UI Toolkit for Web

# data[].attributes.attachment_link.description
A Vue.js 2.0 UI Toolkit for Web. Contribute to myliang/fish-ui development by creating an account on GitHub.

# data[].attributes.attachment_link.title
Vue Material - Material Design for Vue.js

# data[].attributes.attachment_link.description
Build well-crafted apps with Material Design and Vue.js

# data[].attributes.attachment_link.title
Buefy: lightweight UI components for Vue.js based on Bulma

# data[].attributes.attachment_link.description
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

# data[].attributes.attachment_link.description
Vue Material Kit is a beautiful resource built over Vue Material and Vuejs. It will help you get started developing UI Kits in no time. Vue Material Kit is the official Vuejs version of the Original Material Kit. Using the UI Kit is pretty simple but requires basic knowledge of Javascript, Vuejs and Vue Router.

# data[].attributes.attachment_link.description
This is not a tutorial, or anything even informational. Just a place to share my project, hoping to...

# data[].attributes.attachment_link.title
Create Awesome Product Card | UI Design | E-commerce Card | Using Only Html5 & CSS3

# data[].attributes.attachment_link.description
Please do not forget to subscribe in my channel:

# data[].attributes.attachment_link.description
explore from Figma. Explore, install, use, and remix thousands of files and plugins

# data[].attributes.attachment_link.readable_text
Bring design and dev closer

Introducing Dev Mode, a new space in Figma for developers. Bring clarity to designs and give developers the tools they need to translate them into code.

Explore Dev Mode

# data[].attributes.attachment_link.title
Figma: The Collaborative Interface Design Tool

# data[].attributes.attachment_link.description
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.

# data[].attributes.attachment_link.description
Anyone can have great ideas, but not everyone is a designer! Powered by AI, Uizard empowers anyone to easily design interactive web & mobile apps. 🛠 rapid prototyping, 🧠 brainstorming and ideation workshops, ✍️ design sprints, 👔 pitching clients, & more.

# data[].attributes.attachment_link.readable_text
Never leave an idea behind... Generate mockups from text prompts, scan screenshots of apps or websites, and drag and drop UI components to bring your vision to life.

Uizard makes UI design accessible to all, empowering you to design with no barriers.

# data[].attributes.attachment_link.title
Uizard | App, Web, & UI Design Made Easy | Powered By AI

# data[].attributes.attachment_link.description
Design mobile apps, websites, and UIs in minutes with Uizard, the world's first AI-powered UX/UI design tool! Sign up today.

# data[].attributes.attachment_link.readable_text
Combine diagramming, whiteboarding, and more with Whimsical.

Combine diagramming, whiteboarding and more with Whimsical.

Combine diagramming, whiteboarding and more with Whimsical.

# data[].attributes.attachment_link.title
Whimsical - Where great ideas take shape

# data[].attributes.attachment_link.description
Whimsical combines whiteboards and docs in an all-in-one collaboration hub.

# data[].attributes.attachment_link.readable_text
Lexique du designer UX / UI. Le vocabulaire de la conception, réalisation, analyse d'interfaces utilisateur (UX Design et UI Design), du motion Design, de la vidéo pour le web, de l'intégration Web et animations. Culture et techniques de conception web.

Classement par ordre alphabétique des termes du webdesign.

# data[].attributes.attachment_link.title
Lexique du webdesign - Définitions Digital

# data[].attributes.attachment_link.description
Lexique du designer UX / UI. Le vocabulaire de la conception, réalisation, analyse d'interfaces utilisateur (UX Design et UI Design), du motion Design, de la vidéo pour le web, de l'intégration Web et animations. Culture et techniques de conception web. Classement par ordre alphabétique des termes du webdesign.

# data[].attributes.attachment_link.readable_text
The first step to designing a website: wireframe it.

A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design.

Wireframes give you an idea of the overall structure pages will take, and how navigation will flow.

If you are considering building a website, you can do a wireframe quickly and easily. You don't even have to be a graphic designer to do so.

To get started, all you need is a pencil and some paper. (Or if you want to get fancy, an iPad and iPencil like I use in my video tutorial above.)

We are going to create a wireframe and show how it allows for a quick, iterative design process. This will create a living piece of documentation that you can use for yourself and for a client. And you can use this to reason through your planning - all before you invest any time in actually coding it.

Here are some steps we'll cover in this article (and in the accompanying video tutorial):

1. Sitemap planning

2. Creating a homepage wireframe

3. Using markup in wireframes

4. Wireframe components (header, menu, footer)

5. Wireframing your Features Page and Contact Page

6. Mobile Responsive Wireframes

Step #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you'll understand which pages you're going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you'll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don't have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that's it.

Step #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven't wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

boxes with diagonal lines through them to represent images

horizontal lines to represent paragraphs of text

and a circle with an L in it to represent your logo.

For the homepage, we'll build out a slider image, menu, and logo. We'll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Step #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it's useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let's markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn't have to literally explain what the content will eventually be - just what it represents. So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title."

Now that we have already created a header and footer, we can reuse them for additional pages. If you're working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Step #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Step #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It's good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we're on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it's possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. I recommend you try it for your next project to help you plan how it might function and look.

Wireframing is the ideal approach for this, since it takes so much less time than having a designer do a full-blown User Interface prototype.

As a developer, I've built wireframes for my websites for years. I almost never develop a website without sketching out at least some of my ideas of how it will look visually.

Happy wireframing.

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

If you read this far, tweet to the author to show them you care. Tweet a thanks

# data[].attributes.attachment_link.title
What is a Wireframe? This UX Design Tutorial Will Show You.

# data[].attributes.attachment_link.description
The first step to designing a website: wireframe it. A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design. Wireframes give you an idea of the overall structure pages will take, and

# data[].attributes.attachment_link.readable_text
UX

User Experience (UX) relates to having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. UX also takes into account the profit of both the service providers as well as the users. UX mainly aims at constant improvisation of the quality of the user's interaction with the digital interface and perceptions of your product and any related services. UX in modern times is extremely important for a good business because good design is good business.

After reading numerous articles, watching not-so-useful YouTube videos and reading few chapters of The Encyclopedia of Human-Computer Interaction (HCI), I was certain to list down the basics of User Experience before I started to practice.

Here's my take on what you should know before you start on UX Design. The articles talk about UX Components, Relation with UI knowledge, Principles of UX, UX job roles, and pay and some archive worthy references I find very useful in my UX journey over time. With these all below, I hope the write-up helps you out to learn the basics of UX before you get your hands on UX designing.

1) Personas

Personas are character representations of a person, object, situation, problem, challenge, redesign created based on the research to represent the different user types that will use the service, product or site. Creating personas helps to understand users' needs, experiences, behaviors, and goals.

2) User Journey Maps

A user journey map is a flow that represents a scenario in which a user might interact with your design. User Journey Maps are a walk-through that encompasses users' goal, motivations, emotions, pain-points, overall character, needs, and demands.

3) Task Models

A task model is important for the task analysis to identify where opportunities to improve the UX exist and generate preliminary ideas approach redesign challenges. Task Models are an ecosystem of a trigger, desired outcome, base knowledge, required knowledge, and artifacts.

4) System Mapping

The system map is a visual description of the service technical organization; the different factors involving their mutual links and the flows of materials, information and layouts through the system.

5) Experience Mapping

Experience mapping is a strategic process of capturing and communicating complex customer interactions. The activity of mapping builds knowledge and consensus across your organization. Also, the map helps to build seamless customer experiences.

6) Wireframes

Wireframe can be described as an image or set of images which displays the functional elements of a website or page, typically used for planning a site's structure and functionality.

7) Prototypes

A prototype is the first or preliminary version of a website/ application from which other forms are developed.

8) User Testing

The testing of website/application when put under work.

My answer would be YES. You should learn UI to understand UX (Better).

User Interface (UI) Design is about making a concept look and feel amazing.

User Experience (UX) Design is about validating the usability and feasibility of the concept and getting a user from point A to point B.

If a UX Designer has no clue about the interface, how will the user get through the maze from point A to B? To understand a UX, a knowledge to analyze the interfaces is extremely important. User Experience Design or User Experience Analysis starts with understanding user interfaces. Given an interface design, an experience can be designed only when the designer.

UX Design without UI Design:

If you only focus on UX Design you will miss important UI Design principles. The Neilson Norman Group is known as the pioneer for UX Research, but that doesn't mean they have an amazing website. Too much text, information to conceive can overwhelm the user is a BASICS which is clearly not followed here.

Nielson Norman Group's Website

Interaction with a product via the user interface is a part of user experience, so we UX design as a creative field is broader and includes UI design as its integral part. UX Designers think more and above logic, transitions, usability, accessibility, emotional and aesthetic appeal, data presentation and lots of other things to form the whole user experience.

1. Learnability: Can the user complete their tasks with little difficulty?

2. Efficiency: Does the interface allow the user to complete tasks in a timely manner?

3. Usability: The product is convenient, clear, logical and easy to use

4. Utility: The product provides useful content and solves users' problems

5. Accessibility: The product is convenient for different categories of users

6. Desirability: The product is attractive and problem-solving, it retains users and creates the positive experience which they are ready to repeat

7. Memorability: After leaving a website, how likely will the user be able to remember how to use it the next time they visit?

8. Errors: What steps does the interface take to lessen the chance of user error, and how do they let the users correct an error?

9. Satisfaction: Does the user enjoy interacting with the design?

UX Lead/ Director

A User Experience Lead researches, plans, architects the UX design for web, phones or other digital platforms. This person leads the creation of digital products made from a user's perspective.

UX Designer

The task of a UX designer is to follow the designs finalized with the UX Lead/ Director. He/She will analyze the target audience and their needs, to make a research, to create an efficient layout and well thought-out system of transitions, to wrap it in an attractive but highly usable and clear visual design and to test the solutions. However, a UX Designer is not a developer: they work on the same product but two sides of the coin.

UX Architect

He is responsible to create a meaningful presentation of information and organizational structure on the website from the users' perspective. UX Architect is different than UX Designer or Analyst. The architect has to get into an analyst's shoes to ensure all user requirements are met while presenting the information.

UX Analyst (Usability Analyst)

They analyze. Just before the mockups are built, UX analysts build personas, user journey maps, task models, experience mapping, empathy maps, understand usability and user experience requirements for a given application. Once those requirements are well understood they green flag the actual UI designs, mockups, prototypes, or simulations that will create the user interface and show user interactions.

UX Consultant

UX Consultant focuses on making a site easy to use, or an application work in the way users would expect and find logical. He may also be a third person in the team hired for expertise. A UX Consultant may charge in between $12 to $15 per hour for the basic UX Design Cost. UX consultant cost depends on the quality of the design & experience of a web designer.

CXO

CXO is an executive responsible for the overall experience of an organization's products and services. Chief Design Officer is a corporate title given to an executive in charge of an organization's design initiatives. A chief experience officer (CXO) is an executive who ensures positive interactions with an organization's external customers. CXO is the link between the customer and the organization. A Chief Experience Officer (CXO) is the officer responsible for the overall user experience (UX) of an organization.

Here are a few interesting listings to review, and how they define UX:

Experience Researcher at Airbnb

"The Experience Research team's mission is to provide the robust, rich, and actionable research that product teams need at every stage of the product development cycle. As a researcher, you are embedded with a team of designers, PMs, and other cross-functional partners. You not only conduct best-in-class multi-method research, but you develop deep, research-driven product expertise."

UX Engineer at Google

"You'll partner with researchers and designers to define and deliver new features, translate concepts into living, breathing prototypes, and iterate on interactions, animations, and details to deliver the perfect experience. UX Engineers also collaborate closely with UX Researchers to user-test new concepts and assist engineering."

UX Research at Google

"User Experience (UX) Researchers work to answer the most challenging questions in design. They reveal what users need from our products by conducting primary research, exploring behaviors and motivations, and working with teams of designers, product managers, engineers, and others to develop new features. They inspire change by delivering exciting presentations about their findings. Most importantly, researchers help the UX team understand what makes a user's experiences feel more intuitive, accessible, and even magical."

User Experience Designer at Adidas

"You will work in a fast-paced organization to enable a premium, personalized and connected experience. Gathering insights and investigating data you will leverage existing foundations and develop new capabilities to create the new."

Books:

1. The Design of Everyday Things by Don Norman

2. The Encyclopedia of Human-Computer Interaction (HCI)

Websites:

Happy UXing! Cheers!

This story is published in The Startup, Medium's largest entrepreneurship publication followed by +414,678 people.

# data[].attributes.attachment_link.description
User Experience (UX) relates to having a deep understanding of users, what they need, what they value, their abilities, and also their limitations. UX also takes into account the profit of both the service providers as well as the users.