Building Accessible Menu Systems

Editor’s Note: This article originally appeared on Inclusive Components. If you’d like to know more about similar inclusive component articles, follow @inclusicomps on Twitter or subscribe to the RSS feed. By supporting on Patreon, you can help to make it the most comprehensive database of robust interface components available.
Classification is hard. Take crabs, for example. Hermit crabs, porcelain crabs, and horseshoe crabs are not — taxonomically speaking — true crabs.
Source: Smashing Magazine

Why You Need More Integration Between Design and Development

UX’s role isn’t clearly defined. That leads to many organizations whose development teams adopt a faster, iterative approach to development, struggling to integrate UX design into the process.

One gap is found in the handoff process between designers and developers who may not be familiar (or comfortable) with the needs of their collaborator. Tools such as Zeplin, Figma and Redpen have come in to provide commenting and specs, and also a way to visually track the progress and changes in the design over time. 

Another area for improvement is the process of collaboration between designers and the development team while creating prototypes of the initial designs in the same sprint, without leaving either group silo-ed or feeling a lack of ownership in the process. How should teams be optimally organized in today’s agile work environment? 

UX and Development Should be Integrated

To make this happen, the development team should work alongside UX designers and vice versa. Being agile involves being responsive to change, so this means that everyone is involved in iterating on the initial design, and pointing out ways it can be improved from their perspective with designers bringing a user centered experience perspective, while developers bringing a more technical perspective.

This will increase the flexibility and the response time to changing requirements, making the overall process much easier to follow and understand. Any design issue that arises during the sprint can be solved on the spot, improving the end result and helping the sprint stay on track. 

Wrapping Up

By solving problems in a diverse group, you can quickly aggregate knowledge and share resources. Optimize for a fast feedback loop by covering use cases found by initial research and analyzing problems from many perspectives. 

Source: Webdesign Tuts+

Quick Tip: Speed up Your Design Process With Studio

In today’s quick tip I’m going to introduce you to “Studio”, a design tool for digital products. Let’s see how it can help speed up your design process!

Over the years we’ve all become familiar with using tools like Photoshop, Adobe XD, or Sketch, to design layouts and interfaces. Studio takes a slightly different approach to the design process.

It’s a web-based tool, currently free to use, so if you’d like to sign up or sign in head over to and enter your credentials.

You’ll be greeted with a Projects page, ready and waiting for your first project if you’ve just signed up. When starting a new project you’ll be given the option of designing a web project, or an iPhone app.

The Tools

Once you kick off a project you’ll see a page (similar to an artboard in other design applications), some zoom and view controls, and to the left you’ll see that you can add boxes, images, text, and icons. Those are pretty much all you can add, so there’s immediately a difference between Studio and other UI design apps you might be used to!

Studios interface
Studio’s interface

This apparent lack of flexibility is soon quashed however, when you see that the left hand sidebar also gives access to a range of pre-built elements (UI kits). The UI kits contain common elements and patterns, such as nav bars, hero sections, forms, and so on. You’ll also find embed blocks, through which you can also drag and drop Google Maps, videos etc. onto your page.

Crucially, all of Studio’s layout elements are responsive; they alter in size and arrangement depending on the size of the page you’re designing. This is key in how Studio works and how it can alter the way you design interfaces.

Take a look at the video above for more details on how to use Studio, its tools, and its resources. Let us know what you think of Studio in the comments!

Source: Webdesign Tuts+

From Cats With Love: Welcome The New Smashing Membership

We can’t believe it’s actually happening. After 18 months of hard work on the big bang relaunch of this little website, today is the day when everything changes. New design and new technical stack. New personality and new ambitious goals. But most importantly, a new focus on our wonderful web community, with the brand new Smashing Membership.
Rewarding Great People Doing Great Work In times when we fight all the craziness and narrow-mindedness around us, we need to remind ourselves how wonderful a vast majority of the web community actually is.
Source: Smashing Magazine

Typography: The Anatomy of a Letter

Learn the basics of typography in this quick video!

Typography: The Anatomy of a Letter

The more we communicate, the closer we become. Typography inspires us by reminding the world of a simpler time without connection. As designers and artists, we can carry that fascination into our work by studying the makeup of letters.

Start with the basics with this quick video below. Learn the anatomy of a letter.

Common Typography Terms

Familiarize yourself with these terms to get a better handle on typography.


The invisible line letters rest on.

Baseline - Anatomy of a Letter


A single vertical stroke upwards to create letters like L or F. Connect one stem to another using a crossbar detail, like the letter H.

Stem and Crossbar - Anatomy of a Letter


Letters with downward strokes that extend past the baseline have Descender strokes. Alternatively, if the stroke moves upward and away from the main body of the letter, we call that the Ascender stroke.

Ascender and Descender - Anatomy of a Letter

Upper/Lowercase Letters

Uppercase letters are capital letters. Lowercase letters are smaller ones. Use uppercase letters for names and places, and lowercase letters for casual settings and more readability.

Upper and Lowercase Letters


For lowercase letters, the X-height is the main body of the letter.

X-height - Anatomy of a letter

Counters and Spine

Fully or partially closed spaces found in letters like O, A, and B. If the letter isn’t fully closed, then it’s an Open Counter.

Counter and Ear - Anatomy of a letter

Ear and Shoulder

An Ear is a decorative detail that pokes out from letters like g. A Shoulder is a bumped curve seen in letters like m and n.

Ear and Shoulder - Anatomy of a Letter

Serif vs. Sans Serif

Serif types feature extended stroke details also known as feet. These details are missing in Sans Serif styles.

Serif Vs Sans Serif Typefaces

Learn More About Typography

Typography is an art form every designer can admire. Continue exploring your interest in typography to build your skills over time.

Get Amazing Design Resources

Want to create videos like this? Download the resources used in this video:

Check out these tutorials to learn more from our experts:

Source: Webdesign Tuts+

Start Saving With These Early Cyber Monday Deals

At Envato this year, Cyber Monday lasts a whole week. You can get 50% off selected items on Envato Market, or save a whopping $120 on an annual Envato Elements subscription, any time between now and next Wednesday, 29 November. 

So if you’re looking for Photoshop actions, WordPress themes, stock photos, video footage, music or a wide array of other creative digital products, you can snag some impressive savings. Just visit the Cyber Monday Sale page to get the full details and start saving.

Cyber Monday sale details

50% Off 500 Envato Market Items

For the Cyber Monday sale on Envato Market, 500 popular items have been marked with special 50% reductions. 

So you can build a new site with top themes, add functionality with code, design with stunning add-ons and templates, or bring your projects to life with audio and video files. All at half the normal price.

You can browse all the discounted items on the sale page

Envato Market sale items

Save $120 on an Envato Elements Annual Subscription

If you just want one or two specific items, the Envato Market sale above is the one for you. But if you regularly use fonts, graphic templates, WordPress themes and other creative assets, an Envato Elements subscription is the best deal in town.

For $228 (the equivalent of $19 a month), you get a whole year of unlimited downloads from the huge library of 400,000+ stock photos, WordPress themes and plugins, icons, fonts, presentation templates, and much more.

Envato Elements homepage

And on top of that, you also get free access to unlimited Tuts+ courses and eBooks. So it’s the perfect way to improve your skills while having access to all the digital assets you’ll need for your creative projects throughout the year. It’s an investment that will pay off many times over.

Don’t Miss Out!

Remember, all of these deals end on 29 November, at 2 pm AEDT (Australian Eastern Daylight Time). Yes, that’s Australian time, so if you’re in Europe, America or other points east, you should make sure you’ve done all your shopping by Tuesday, 28 November at the latest. After that, the prices go back to normal.

You can find more details on all of these deals and links to the discounted items on the Envato Cyber Monday Sale page. So head over there to stock up on all the digital assets you’ll need for the coming year, at unbeatable prices.

Source: Webdesign Tuts+

The Role of Emotion in UX (What “Happy Users” Really Means)

When designing user interfaces common sense is really important; make it easy for your users to complete their tasks and achieve their goals, and they will be able to buy your product or service easily. Ignore major usability issues and even if your users were initially interested in what you had to offer, they will soon give up. In today’s world, where it’s not difficult to find an alternative to your product, good usability is not optional, it’s essential. However, just because someone is able to complete a task, it doesn’t mean they will. That’s where emotions come into play. 

The concept of “happy users” is well known in the world of UX. In the way we feel a range of emotions when interacting with our environment, so too can we apply those principles when interacting with systems and interfaces.

Types of Emotional Responses

Most changes in our emotional state occur due to external factors, and depending on a wide range of variables, we end up with two main types of emotional response.

  1. Negative emotional responses
  2. Positive emotional responses

The Impact of Negative Emotional Responses

We often undervalue the emotions our users experience when interacting with a website or user interface. If we exclude the example of the gaming industry, where negative emotions such as “fear” can lead to a positive effect, then it is our priority as designers to focus on minimizing the possibility of generating negative emotional responses.

totally unimpressed
Nope, totally unimpressed

While there are many factors that affect our emotions which we are unable to control, this is usually not the case for most user interfaces. We are often overwhelmed by options, therefore if your product doesn’t meet your users’ requirements, they will certainly look for alternatives. When I speak of products here, I refer not only to the user journey that leads to your main product, but also to the product itself, which can be either physical or digital. The user journey doesn’t end once the product is purchased. The act of interacting with your product, which can be either an app, a software or even a physical product, is equally important. 

A negative experience not only prevents your users from being able to effectively use your product, it also affects your credibility and image. 

How to Generate Positive Emotional Responses

In order to be able to design user interfaces that generate positive emotions, we need to focus on an important aspect of UX: user research and identification of your target audience. 

When it comes to making your users “happy”, we are referring in fact to your intended users, and this is why having a clear idea of your target audience is so important. Different factors generate different responses in different individuals, therefore it’s important to design for the needs and expectations of those who will use your product. 

She has coffee; that’s a good start

While usability can refer to generic concepts, the process of generating positive emotional responses is more specific. This is why it isn’t enough anymore to simply create a product that works well. 

Here are some examples of how to generate positive emotions, both generically and more specifically.

Generating Positive Emotional Responses by Eliminating the Negative

A basic principle of usability is to eliminate any friction and obstacles between your user and their goal. By avoiding negative emotions such as frustration, then you’re most likely providing a pleasant user experience. Depending on your product’s goal, sometimes the fact of it being effective and allowing your user to complete a task with ease, is the strongest point. 

Following UI Patterns and Conventions

In life, we are used to anticipating the behavior of a certain object or system, based on the representations of the world which are stored in our long-term memory. The same happens when interacting with websites and other interfaces. Designing for usability is also about designing interfaces and products which behave as expected. Completing a task easily and in a short amount of time is likely to elicit a positive emotional response from your users.

Creating Emotional Experiences by Association

Our emotions become associated with many elements in our lives, including objects and places. When designing a new product, certain design decisions can encourage the user to form some type of emotional connection. Once this association is formed, then the emotion can be evoked over and over again, resulting in a powerful and lasting connection over time. In this sense, design decisions that include the aesthetic properties of the product are not arbitrary and can therefore influence your target audience’s response. 

Happy on roof
Happy on rooftops

In summary, influencing emotions involves a deep understanding of all these factors, both those generically responsible for affecting usability, and those specific to your product and intended users. 

Norman’s Three Levels of Design

In his book, The Design of Everyday Things, Don Norman talks about three levels of design which, while being separate dimensions, work together on influencing our emotional experience about a product.

By applying the system proposed by Norman, we can more easily attempt to influence our user’s perceptions and emotions. 

1. Visceral Level

This level is responsible for the unconscious and automatic aspect of human emotion, and it’s mostly about appearance and first impressions. The purpose here is to get your user’s immediate attention. 

At a visceral level, the superficial aspects of a product can help it to stand out from its competitors. In terms of user interface, giving a clear idea of what you offer right away, while getting your users on board as soon as possible, can lead to an instant response. 

Branding plays a huge role at this level, as your set of values and the beliefs which make you different from your competitors also encourage your users to connect to you emotionally. Impressions at this level are unconscious, and because beauty is subjective, the success of design at this level involves in-depth research of the market and target audience. 

2. Behavioral Level

The behavioral level refers essentially to what we’re used to knowing as usability in general. UX focus mostly on this level: the user experience, the practical and functional aspects of a product or system. It’s essential because if a user is unable to use something effectively, then nothing else matters. 

The impact at this level can be easily measured with user testing. Good user experience should allow users to accomplish their tasks and goals with minimum effort. The type of emotion targeted here is related to the feeling of being able to achieve or fail at something.

Negative experiences at a behavioral level can greatly impact both the visceral and reflective emotional experiences. Bad usability influences how we feel about a product and makes us disregard their aesthetic appeal (visceral) and ultimately affects our decision (reflective). Like visceral processing, the behavioral level is considered to be unconscious.

A user trying to order a pizza
All he wanted was a pizza

3. Reflective Level

This is the highest level in terms of emotional design and it takes into account the users’ conscious thoughts and their power of decision. It’s the only level that involves a conscious form of processing but is highly influenced by the other levels. At this point, the better emotional response the product has generated, the more likely it is for the user to form a connection with it and make a positive decision. 

Many commercial adverts focus on the reflective level exclusively, trying to target the users’ emotions, and disregarding completely the other levels (functionality, appearance of the actual product). The goal here is to establish some sort of emotional connection between the user and the product even before the product itself is revealed. Effective branding can play a huge role at this level as well. 


Our emotional state is greatly influenced by how we interact with the environment and systems, and this includes digital products and user interfaces. The term “happy users” is used generically, often forgetting that happiness means different things to different people. 

By defining your intended users and target audience from the very beginning, you will be able to conduct relevant research that will allow you to tap into what matters most for the success of your product: the emotional response of your users. 

Source: Webdesign Tuts+

A Comprehensive Guide To Web Design

(This is a sponsored post). Web design is tricky. Designers and developers have to take a lot of things into account when designing a website, from visual appearance (how the website looks) to functional design (how the website works). To simplify the task, we’ve prepared this little guide.
In this article, I’ll focus on the main principles, heuristics, and approaches that will help you to create a great user experience for your website.
Source: Smashing Magazine

Monthly Web Development Update 11/2017: Browser News, KRACK and Vary Header Caching

Editor’s Note: Our dear friend Anselm Hannemann summarizes what happened in the web community in the past few weeks in one handy list, so that you can catch up on everything new and important. Enjoy!
Welcome back to our monthly reading list. Before we dive right into all the amazing content I stumbled upon — admittedly, this one is going to be quite a long update — I want to make a personal announcement.
Source: Smashing Magazine

Using CSS Grid: Supporting Browsers Without Grid

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.
In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?
Source: Smashing Magazine