how-to-build-a-design-system-out-of-react-components

Jaye Hackett

One of the most exciting developments in design for me in the past few years was the launch of the GOV.UK design system. Of course, the real power of a design system comes from the community of designers who maintain it, but GOV.UK does so much right that it made me want to raise the bar on my own projects.

I wanted to make something that was:

  1. easily reused in any website or app by installing it as an npm package
  2. gives you a documented, public demo site on the web, friendly to non-developers
  3. lets you conveniently test the components

Here’s how I made it.

It’s theoretically quite easy to publish something to npm. You create an account on npmjs.com, run npm login and then run npm publish. Your current project directory will get packaged up and put on the web.

But there’s a few deceptive problems that crop up:

Modules containing JSX need to be transpiled first

I’d foolishly assumed that I could simply ship my untranspiled JSX code in my npm package, and leave it up to the app that consumed the package to do the transpilation and bundling.

This doesn’t work — a few syntax errors later, I’d integrated the rollup bundler. My config is as simple as I could make it:

// rollup.config.js 

export default {

input: "src/index.js",

output: {

file: "dist/bundle.js",

format: "cjs",

globals: { "styled-components": "styled" }

},

plugins: [

peerDepsExternal(),

autoExternal(),

resolve({

extensions: [

".js",

".jsx"

]

}),

images(),

babel({

exclude: "node_modules/**"

}),

],

}

The config is:

  • transpiling JSX into ordinary JavaScript with Babel
  • resolving image files (like .svgs) into base64 strings which can be embedded in the output
  • making sure that dependencies that the module needs, especially react, react-dom and styled-components don’t end up in the bundled code, to avoid bloat.

I experimented with using parcel (because I like zero-config solutions) and webpack first, but I found both frustrating. Rollup is designed with bundling libraries and packages in mind.

You can use an .npmignore file to keep the unneeded source files out of the published module.

Crucially, you also need to remember to change the "main" value in package.json to wherever the output bundle ends up. For instance:

"main": "dist/bundle.js"

When you import { Whatever } from "my-module" , this is the file you’re importing from, so it must match.

I don’t want to manually push to npm as well as to Github

Ideally, I would use CircleCI or some other continuous deployment server to run tests, build a bundle and push it to npm.

I experimented with using the semantic-release package to handle this for me, which looks for keywords in your commit messages to decide when and how to increment your version number and publish.

I eventually decided this was more trouble than it was worth and wrote a simple npm script to make sure that my tests and build run before publishing whenever I hit npm publish:

// package.json"scripts": {    

....

"prepare": "jest && rollup -c",

...

},

Publishing lots of components in one package

There are multiple patterns for exporting a large number of components. Scoped packages are one way. The pattern I decided on was destructured imports:

import { Button } from "my-design-system"

To make this work, I structured my files this way:

src/

|-- Button/

|-- Headline/

|-- Card/

|-- index.js

Every component has at least one named export (no defaults), and index.js looks like this:

// src/index.jsexport * from "./components/Button"

export * from "./components/Headline"

export * from "./components/Card"

...

There are a few approaches for doing this, but the most popular at the moment seems to be Storybook.

I found Storybook pretty easy to install for React, and it’s big range of add-ons are promising:

Some of the Storybook add-ons

In my npm scripts, I wrote an npm run dev that starts storybook and starts rollup watching for changes, so that the package is in an importable state if I decide to develop with it locally in a different app using npm link.

// package.json"scripts": {                           

"build": "rollup -c",

"dev": "rollup -cw & start-storybook",

"storybook": "start-storybook",

"build-storybook": "build-storybook",

},

I co-located my stories like this:

Button/

|--index.jsx

|--stories.jsx

The nature of a design system means that most components can get away with being stateless: they have predictable outputs based wholly on their props.

Any stateful logic will propably be in the apps that consume the design system.

Luckily, this means we can use Jest’s snapshot testing for the bulk of our testing needs.

Storybook has a wonderfully useful add-on called Storyshots which takes the already-written stories and uses them as the test cases for snapshots. No need to duplicate!

The config is very simple:

// .storybook/storyshots.test.jsimport initStoryshots from "@storybook/addon-storyshots"  

initStoryshots()

With that set up, I can run jest based on my Storybook stories.

eslint, and especially jsx-a11y are also useful to catch possible accessibility bugs. npm test is set up to do all this:

// package.json"scripts": {

...

"pretest": "eslint src/ --ext .jsx",

"test": "jest"

....

},

All of this was relatively painless compared to the challenge of developing the design system locally, using npm link.

npm link lets you hook up a local project on your computer as if it were a “real” package from the web.

Whenever I tried to consume my local package in an example React app, I got horrendous errors warning me of invalid hook calls, multiple versions of React and eventually multiple instances of styled-components running on the page.

This was all despite me excluding these libraries from my bundled code using Rollup’s externals feature.

It turned out that a bug in a recent version (5.0.0) of styled-components was to blame. Temporarily downgrading or migrating to another CSS-in-JS package entirely fixed it.

This isn’t an ideal fix, but it underscores the occasional difficulty of getting a good local development workflow, even when the end user experience is fine.

Once this styled-components issue is solved, I’ll make a blank, reusable boilerplate kit available here.

top-9-website-design-ideas-to-follow-in-2020

2020 has just begun and already, you can find a lot of trends popping up, including website designs! All these new styles and techniques are helping designers create even better websites that perform AND look amazing. But what are the ultimate trends you should be watching out for?

There are a ton of trends and tips people have been saying, though obviously, you can’t merge all of these on one website! So I did my research and checked out what website design trends are going to boom this 2020. Read on as I show you the top nine ideas you should consider implementing on your site now!

Nine Website Design Ideas to Try This 2020

As the years’ pass, the Internet just keeps evolving, and it will continue to do so in 2020. To stay relevant and have your viewers genuinely interested with your website, here are some design ideas to try out:

  • Bold Colors and Simplicity

We now see even more competition online, which is why brands want to be bolder, more unique! That’s why most websites will adopt bolder and brighter colors to catch attention.

Brilliant and deep colors aren’t just attention-grabbing, they are immersive and will keep visitors staying! Besides this, many web designs today are now merging both simplicity AND boldness to catch attention without it being “too much.” With amazing colors and simple design, you can still stand out and look good doing so.

  • Animations, Dynamic Illustrations, and GIFs

Videos became trending in 2017 and it continues to grow as the years pass. However, slow loading times have made it difficult for viewers, which have you lose them! So what’s the solution?

Motion graphics and animation! These don’t take that long to load and are just as enticing to the viewer’s eyes compared to plain text. You can incorporate animations, illustrations, and GIFs in your content or around your website design, like:

  1. Having mouseover effects
  2. Mobile animation
  3. Transitioning between webpages
  4. Parallax scrolling
  • Asymmetric Layouts

Many website designs are grid-based, most likely a way to play it safe. And sure, some people might see asymmetric designs an absolute sin, but it’s a whole new year! Meaning, asymmetrical structures are now looking even better because of its brutalism and individuality.

However, you still need to be careful when trying asymmetrical layouts! You need to make sure that it’s still easy to navigate around while still looking “out of order” in attractive, understandable ways.

  • Loud and Eye-Catching Typography

We ALWAYS use typography, so what makes it different from the former years? It’s no new web design trend, BUT the typeface design will start going out of the usual and traditional. This time, we’re using loud and bold typography that’s almost impossible to miss.

Words speak louder when it looks attractive and big. Having bigger, bolder, customized fonts can definitely keep your brand unique while getting the message out coolly.

  • Handmade Drawings

Website designs don’t have to ONLY be computerized. Websites represent more than what a visitor sees on the screen, but the brand itself! That’s why personalized and hand-drawn elements will trend this year.

Such illustrations and drawings add a character to both site and brand. It shows your human side compared to high-quality photos, a personality that will definitely have your viewers interested.

  • Voice-Capable Interface

Attention spans get shorter and shorter as everything becomes instant and quick-loading. That’s why web design needs to speed up and advance to cater to the easily distracted!

That’s where voice-capable interfaces come along, with smart virtual assistants such as Cortana, Google Now, and Siri guiding people to surf the net. Instead of having to take the time to type, they simply ask the question and get the answer!

  • Advanced Machine Learning

One of the trends predicted back in 2018 was augmented reality, machine learning, and artificial intelligence. This year, you’ll be glad to know that these three are coming to web design, making it easier to personalize landing pages and capture your viewers’ details!

Because of these advanced technologies, you’ll know how to design your pages efficiently so your viewers will be more inclined to stay and check out what your site has to offer.

  • Brutalism Incorporated In Web Design

This 2020, we will see more brutalism in designs and go beyond what’s “normal”, building individuality as a brand. This adds personality and sense of belongingness to your target audience. When you humanize your brand, it helps build a relationship with them, which encourages more visitors and better click through rates.

  • CSS Grids and Scalable Vector Graphics

Smart CSS grids now offer options to create website designs into different versions, fitting any screen size. This makes the website more responsive for anyone viewing it, and with better interest! And the more mobile devices are being used to surf the web, the more important smart CSS grids will be.

The same goes for scalable vector graphics, as visitors LOVE multimedia. With engaging visual content, it keeps your visitors engaged and staying to see what more you have to offer. Besides this, such graphics are now personalized, made to fit just about any screen to keep your visitors within the site.

Wrapping It Up

From free illustrations and graphic software to advanced technology like AI AR, 2020 has a lot in store for websites and designers. It’s time to start becoming more aware and learn these trends to stay on top of the competition! That way, you entice viewers and satisfy clients, ensuring that the design was a success and will stay that way for the long run.

I hope these nine website design ideas to try this 2020 gave you ideas on what to implement for your own site. So don’t wait any longer and try out any of these ideas to reach your goals now.

Do you have any queries or would like to share your own ideas on website design? Share them in the comment section below, all your thoughts are much appreciated!

looking-back-at-the-top-web-design-trends-(2018-2019)

Web design is ever-evolving. As technology gets more powerful and designers experiment with new styles, every year presents a unique set of exciting trends in the online world. Drawing from the designs emerging throughout recent years, as well as new tech that’s being developed, it’s possible to predict what’s coming over the course of 2020.

Let’s recap the last few years in web design and examine the emerging styles, so you can know what to expect in the upcoming new year and beyond.

Why Keep Up With the Trends?

Not every web design fad is viable, that much is for certain. There’s a time and place for everything, and overhauling your website for no reason can do more harm than good, especially when it comes at the cost of usability and UX.

But though you shouldn’t go giving your site a facelift without serious consideration, there’s definitely some merit to keeping up with web design trends, especially those based on advancements in technology.

For instance, if you haven’t heard about AI chatbots, progressive web apps, or CSS grid yet, you could be using outdated tech that’s losing you conversions. Think of how revolutionary responsive design was to the internet; you don’t want to be last on board next time a development like that happens again.

And even when the trends are purely aesthetic, there’s still merit to keeping up with them. For instance, a plain white, clean, simple website may be functional. But with the more avant-garde style web design has taken on in the past few years, users are also finding it quite boring.

Even small changes like adding more color, broken grids, or micro-interaction animations can go a long way towards keeping your site relevant.

Plus, as web designers grow, learn, and adapt to new technologies, some of these advancements and trends are very much for the better as far as both beauty and functionality go. Think about how sites looked and worked 20 or even 10 years ago… we’ve come a long way, and have a long way to go yet.

If you see a modern web design trend that fits your brand, and helps or at least doesn’t harm usability, it might be worth it to get on board.

Recap: 2018 Web Design Trends

With 2020 now here, 2018 is seeming further and further away. But its trends still continue to impact the web even as brand new styles emerge, and as many of these are still relevant to modern design, it’s good to look back and see how far we’ve come.

Web design has been moving away from minimalistic simplicity and towards bold individualism for a few years, but it all came to a peak in 2018. We can still feel the effects even now, and the internet will surely continue to populate with original, unique styles.

2D Illustrations, 3D Animation

web design trends: 2d 3dportfolio and agency websites, 3D animations instantly grab attention and provide chances for fun UI interactivity.

In the future, hand-made illustrations and animations will only continue to grow in popularity. They show off your brand’s personality in a way nothing else can (and it proved to work as a strategy).

Subtlety, Flat, and Minimalism

webflow

web design trends: giftrocket

spotify

startup labcontent. Overall, layouts got a lot more interesting.

AI and Machine Learning

Chatbots are a big deal. These nifty programs respond dynamically customers, partially or completely automating the process of support or purchase. Machine learning allows them to examine data and learn how to respond to questions and comments, and take some of the workload off your human support agents.

But this is just the beginning. As technology continues its strides, AI and machine learning are bound to become even more integrated with online systems.

The Rise of Brutalism

the outline

atlassiancharming illustrations and data visualization, with interactive and visual designs that make their message more engaging and easier to understand.

The Biggest Web Design Trends of 2019

2019 shared many web design trends with 2018, like broken grid design and bold color palettes. But things have gotten even more crazy, with lots of experimentation from daring designers.

The running theme for 2019: rule-bending and breaking. White, flat, grid-based minimalism out, bright and bold asymmetry in. While clean design and white space will always be a big contender, designers are more willing to try new things lately. We are seeing many of these carry on full force in 2020.

Vibrancy and Color Experimentation

fotonaut

absurdIllustrations and visual content were big in 2018 as well, but they’ve continued to evolve. Artists are taking steps away from the typical, simplistic style of illustration most sites are employing, and trying something a little different.

An emerging trend is eccentric, playful art that deviates from normalcy and tries out a more abstract, random style. These illustrations ignore typical boundaries and are completely unafraid to show off their creators’ personalities.

3D illustrations are also quite popular. It’s only a small spin on the trend of mostly flat artwork, but it breathes a lot of new life into it. Some of these are 2D artworks drawn to look 3D, while others are actual three-dimensional renders. Either way, they’re gaining traction fast alongside 3D web animations.

jet styleentire websites dedicated to collecting the best in brutalism. The stark, ugly, anti-user artform certainly makes a statement: web design has always been solely about creating a good user experience, but brutalism seeks to turn it into an art piece. It’s not clear how long brutalism will last, but the trend still has an avid following.

visualboxFonts are getting more creative too, especially thanks to color fonts, which make customizing and rendering fonts that look like they were enhanced in Photoshop finally a possibility. Typography as a focus point is now a viable method of web design.

Navigation is also expanding. Dainty header navs and elegant dropdowns or hamburger menus are being replaced with dominating displays, with entire screens dedicated to navigation, again often focused around huge typography.

tribuvideo content on webpages. Video elements used to be a concern since they were slow to load and ate up limited mobile data, but stronger hardware and fallback images means you can now use videos anywhere. That gorgeous website with a fullscreen animated background, once a rarity, is about to become more common.

Asymmetry

new flight

3h-istore or playing with an interactive, animated background. These tiny animations make a website more entertaining to navigate and bring joy to small interactions like clicking and hovering. Some sites have even gone as far as implementing cute minigames.

But it’s not all just for fun. Micro-interactions often serve the same purpose as the common subtle animation: they direct user attention towards important UI elements. And over-implementation can get stale fast, so it’s a game of figuring out the ideal number of animations to include on your website.

Scrolling and parallax effects are of course just as popular as ever and can add a dynamic layered look to a page and make it a lot more interesting.

Also, look out for custom cursors. These were once rarely seen outside of small blogs or sites for children, but they’re now a popular choice, especially for sites built around 3D animated backgrounds or navigation. An elegant custom cursor can really enhance your aesthetic.

White Space

apple iPhoneEvery site needs breathing room, and white space can be used to carefully highlight and emphasize images or other content.

Lots of white space can be used to great effect, with entire portions of the screen left empty to give important elements plenty of room. Maximum white space is a style that will likely continue throughout the next few years.

Progressive Web Apps

The next big thing in mobile design: progressive web apps. These web-based platforms are built on code like HTML and JavaScript, but they function and act like mini-apps for mobile users. They’re made to offer the experience of an app without needing to actually be built on mobile technology or released on the app store.

PWAs work offline, can send notifications, and be pinned to the home screen, but you don’t need to download or distribute anything. They’re lightweight and load fast too, so they don’t take up too much bandwidth.

Even Twitter has gotten into PWAs, developing Twitter Lite as a solution for those with slow internet speeds. And they ended up integrating the system right into their main interface. That’s a testament to how well this technology works.

If you haven’t heard of progressive web apps yet, you should definitely do some research. Building one could make your mobile users’ experiences a lot smoother.


Looking for ideas to give your #WordPress site a facelift? Check out the latest web design trends of recent years and get inspired! 👩‍🎨💡

Click to Tweet

Summary

2018 and 2019 have been an exciting few years for the online world. 2020 is already bringing even more adventurous designs. Rule-breaking elements like asymmetry, bright colors, brutalism, and eye-catching animations will continue to grow in popularity throughout the next few years.

Who knows what might come next? We’re surely in store for even more unconventional new art styles.

If you haven’t caught on yet, it might be time to reimagine some of your designs and catch these hot new trends. Expect to see brands and designers truly start to express themselves and the internet to become much more vibrant and interesting.

The next decade of web design is likely to feature risk-taking and innovation, so make sure you’re ready to keep up.

the-meaning-of-design:-what-design-is-and-why-it?s-important

What is design? Most people think that design is about making things look pretty – a decoration. Art. But design is as much an art as it is a science. Cold and calculated process. Sometimes the detriment of pretty. Yet, the design is not allowed to fail. Design is for everyone and no one in particular. Website and mobile app design, as well as design in general, is a complex yet subtle process, it’s more than making things pretty.

Humans speak through languages and things speak through design. It seems today that nobody claims to speak a foreign language they haven’t studied but everybody thinks they know design

Let’s dive deep into the world of design and try to understand why it is so important and what purposes it serves.

The purpose of design

Design exists to solve problems. To see the problem and find a solution, designers rely on data. So the toolset of the designer is based on research, not prettification.

Your design doesn’t have to be original

It’s a common misconception that novelties and hype in design will sell a product. The only reason conventional and textbook design patterns exist is because they are tested, proven, and they work. According to Jakob’s Law of Internet User Experience, users spend most of their time on other sites, so it makes perfect sense to design for patterns for which users are accustomed.

We only implement new approaches if we are 100% positive they are better than the existing ones. This alone comes from a great deal of research.

The great design solution you are looking for is out there.

The real challenge is to find it.

Every time you make a user think through an ‘innovative’ navigation pattern or an unorthodox menu placement, it’s a chance to lose them. Not because they are dumb but because we gravitate to familiar things more than we do to the unknown. If we do go for it though, we make sure everything about the new design is bulletproof.

What design means - podcast cover illustration by SAM JI

podcast cover illustration by SAM JI

Designers are not like their users

Everybody has biases and it’s okay. Cognitive biases reduce the load and help us stay sane. That being said, it’s important to know whether your bias is damaging your design work.

Designers and owners know their product inside out. Their bias is called the Curse of Knowledge. It’s when you find it extremely difficult to think about problems from the perspective of lesser-informed people. On top of that, your goals are entirely different from those of the people you are building for.

People want to get things done, not listen about how cool you are.

What makes us different? If you are reading this, you are top of the food chain when it comes to computers. Most people are not and they don’t care. They don’t know what it takes to build a digital product just like we don’t know what it takes for our computers to work off the power line. Everybody knows something no one else does.

Oddly enough, the more employees a design company has, the stronger their detachment from real users. No matter how good they think they are. Ask Google about Buzz.

That is why it’s vital for design agencies to keep it humble and always research their users, study their goals and pains. The more we know about our users, the less biased we are. Eventually, people will have their own habits and biases about our product. But we have got to convert them first.

UX design is more than just about usability

Usability is about making a product for people to accomplish their goals. UX design is a lot more robust than just that. It brings delight and meaning to ordinary things. Good UX design matters because it makes every step enjoyable, even the negative ones. If there is no network connection, the website should not die. That’s a UX design job. It goes further beyond the familiar definition of user experience.

Why UX design is important and what makes good design:

  • Good design will crack you up. User satisfaction is no longer a goal. It’s a default every design solution should be in line with. However, the fun and delight are the goals. The hard sell times are past. Modern design seduces and brings pleasure.
  • Good design will eat your money and make you feel good about it. Practical value is only a part of what people are willing to pay for. Another part is happiness. If your design makes people feel good, they will forgive you for technical issues and bad updates. How to make them happy? Be genuine and honest about your work. Listen. Change.
  • Good design will feel like a person. For people to care, they have to empathize with something. If a product is designed in a way that favors everything, it favors nothing. You make a social impact by having a strong distinctive voice, promoting the right kind of values, and identifying with your audience. No matter what type of business you do, there has to be a human side.
  • Good design has meaning. Meaning connects people with objects. If that connection is meaningful, it will stay for years. The design should empower people to establish the connections they need to feel free, capable and enlighted.

Design is not a stage of the project

Even in deep tech circles, there is an idea that design is a time in the project when they draw sketches of the interfaces. It is not. Design starts when the owner first puts together the image of the product and ends when the project is done which is never.

The choice of a business model can’t rely on the goals of the owners. There might be a natural talent and an insane gut feeling but it would be foolish to rest on them.

Knowledge of how the product could fit into people’s lives is UX. Knowledge of how to get that knowledge is UX.

UX does not result in UI. It penetrates production, testing, analytics, support, and updates that follow the creation of just interfaces. Those who realize that a designer is more than just a pencil, end up with a consistent and reliable product as opposed to a patchwork of narrow tasks.

A business owner shouldn’t be surprised when no other than a designer will start asking them about their business strategy. In fact, a designer will only be drawing the UIs for 12.5% of the time they’ll be involved in the project.

Eye candy design works

It might appear that design, especially the digital one, takes itself too seriously. Indeed, there are usability geeks who don’t believe aesthetics have any impact. They exemplify it by the unattractive likes of Reddit and Craigslist.

Design is no place for extremities. When there’s looks not backed by proper functionality, it’s empty. When it’s just handy and useful, there’s no emotion tied to it and it is also bad. To find the balance between usability and aesthetics, we need to know how attention works.

To reach more people, your expertise has to spread thin and let emotions onboard users. The visual design drives emotion.

This is how web design works. The vibe of a website decides whether a person will stay and discover the features. Design is engineering in the sense that we know how to engineer delight. Through visual design, we bring meaning to ordinary things and help people find value.

An illustration is a shell for something that it represents on a deeper level. When we designed a professional platform for architects, we created an animation of elements that mimics the behavior of a construction site.

It might look subtle and may not seem worth the struggle at the early stages of design like wireframing and prototyping. But it’s important for a designer to keep in mind the image of the finished product. More so, the way you visually present your digital product says a lot about the brand in general.

No matter how good the service, if it doesn’t care for itself, neither will the people.

For skeptics, no attractive things don’t work better but they are always worth a try. Beautifully designed products get half of their credibility because of the visual appeal. It’s the developer’s job to pull the rest of the features to that level. Most people think if it looks good, it has to work well as well.

Usability is not everything. If usability engineers designed a nightclub, it would be clean, quiet, brightly lit, with lots of places to sit down, plenty of bartenders, menus written in 18-point sans-serif, and easy-to-find bathrooms. But nobody would be there. They would all be down the street at Coyote Ugly pouring beer on each other.”

– Joel Spolsky.

Point is, how the product works is important but how it looks while doing that is a game-changer.

Simple vs minimal in design

If you make a rating of comments on Dribbble, the ones that feature the words ‘clean’ and ‘simple’ will be well ahead of the rest. Simplicity has long become one of the staples in design. Because of that, there appeared a bunch of false beliefs that use the term ‘simplicity’ with regard to things that end up being far from simple. So what design is simple and what is minimal?

It’s important to know the distinction between the two main concepts of design optimization:

  • Simplicity is a reduced complexity

  • Minimalism is a reduced quantity

The practice of reducing and decluttering is a discipline of its own. To know what to reduce means to have confidence there will be no tension put on a user as the result of our design experiments. It’s called friction. Every design decision we make has to reduce friction. Sometimes it coerces designers into minimalism, hence the thriving trend for minimalism in web and app design. But it’s important to know where to stop.

Reducing the volume of text on buttons means substituting it with icons. But how universal are the icons? Are you 100% confident your mute icon is unambiguous and won’t mean radar to some?

Minimal interface design is not purpose-driven. It’s a style. Simplicity comes from our understanding of the experience no matter how multi-elemental the UI is.

The design has to be visible first so that it won’t do harm. The notorious hamburger menu has taken a beating but made its way into the designers’ minds and earned respect. What this shows is you can’t force minimalism and count on simplicity.

All Adobe products are insanely non-minimalistic. At the same time, they are perfectly clear in terms of performance and functionality. You can research the interface and make it simple, yours. But you can’t make yours something that’s not there.

To demonstrate the magnitude of the issue with simplicity and minimalism, let us bring Nielsen Norman Group’s UX case study of Tesla Model S’ 17-inch screen car interface. The main idea is that by mounting this tablet-like device on the dashboard, Tesla tapped into a realm of drivelessness and made the experience way more simple. They minimized the driver’s input but created a new pattern of behavior that might appear dangerous.

Take lane assistance. It minimizes the driver’s efforts to change lanes on one hand and dissolves their attention on the other. An engineer’s urge to minimize the pattern might cost someone their life.

Designers have to step in and take responsibility for the mental state we put people in with our products.

If it’s driving, we can’t simplify it and give people a full sense of security because. We can’t know all the possible outcomes of all the possible scenarios. Let people stay in charge, but make the experience clear and enjoyable.

User interface design

A user interface is the main touchpoint of a designed product and a user. The UI design is about providing a user with the simplest and most efficient way to interact with a product. In that sense, a designer has to be well aware of the following three concepts of user interface design:

  • Condition or where the UI exists.
  • Content or what the UI looks like.
  • Context or who operates the UI.

Understanding each of these three gives a designer the most important tools to build a visual solution for any type of product.

To become visual, elements have to be designed. Those which are visible by nature, need design even more.

The UI (user interface) consists of several fundamental elements that all have to be addressed with high-level awareness.

Color in design

What most people and, sadly, many designers know about color does not do it enough justice. Color is the first thing we’d notice but the last we’d understand. Colors can’t be explained and described unless seen. They can’t be changed but can be learned and used. This is how nature communicates with you, and that is why color is so important in design.

“Colors are powerful symbols by which you live or die; they’re worth paying attention to.”

– Ben Hersh

Psychology separates color studies into a standalone discipline. Marketers know the basics of color theory and use it to stimulate people’s sense of security, alert, and so on. Designers use color to speak instead of words. Yet, colors don’t exist outside our consciousness.

Before the age of digital screens, people used colors as attributes of physical objects. That’s why there are so many color names attached to the toponyms (names of places). Like umber named after the soil in the Italian region of Umbria and turquoise from the French for “Turkish”. To become a recognized color, it had to exist in the real world.

As our understanding of color grew stronger, color theories began to pop out attempting to define, systemize, and classify colors.

From the Middle Ages to the 1970s’ advent of HSL and HSV color models, all the exploration and discovery lead us to the three colors: red, green, and blue.

Out of the combinations of these three, you can get virtually any color. However, this is the set we decide to stick to today. It has been different before and it might change in the future. There is no such thing as primary colors apart from those we decide to consider as such.

We differentiate the current color models depending on the media they will be displayed on and the purpose of the visual presentation. We might leave out some colors which are not visible on the screens or include those which are not visible by the eye. Modern color technology is controlled by mathematics. But the problem is the variability of conditions under which we see these colors.

A modern color theory puts our brain in charge of our color perception depending on the context and looks to find the schemes and methods of producing colors accordingly.

“The color spaces we can see look more like psychedelic pinecones.”

– Ben Hersh

Color in design

For a designer, to know color means to be able to mathematically select the colors and have the choice backed up by data. At the same time, we as designers have to be keenly aware of how colors are perceived in different cultures and how that perception changes over time.

Colors are the products of physics and mathematics but also intuitive and elusive enough to never let us rest.

Typography in design

Another thing that pops up every time there’s a talk about digital product content is typography. Technically, being just a shell for the meaning, it sometimes can be as significant as the meaning itself. Because if it doesn’t represent that meaning in good fashion, it will go unnoticed.

Text is the strongest medium of information. It might not be so much in terms of emotive response but definitely is in terms of being informative. Text is delivered by means of fonts, or typefaces, in general – typography.

Certain things only exist in one representation – text.

Typography is a design patrimony. Like any other design-specific method, typography is purpose-driven but also aesthetic. As a functional element, typography in the UI is used to guide people, invoke an action, and help them through the entire experience. That’s about the headings, titles, text in menus, buttons, CTAs, and so on.

Typography in design

Communication Security Web Page by Shakuro

When it comes to typography as an aesthetic element in web design, we implacably steer towards branding. Words express individuality which is the core of identity. Designers can boost that individuality through the usage of typefaces to reflect the unique character of a brand.

Typography as part of branding helps the product stand out.

Icons in design

Because nobody has time. We have lists everywhere. Lists are how we make sense of the abundance around us. We list foods, apps, TV channels, even friends of Facebook. This helps us structure the information and memorize it better. No wonder lists have made their way into web design where everything can be categorized. That’s how features, services, advantages, and payment plans started being aligned in lists.

Turned out, lists are good for structuring but do no good in the visual aspect.

For a list to become an attention anchor, it has to have a visual element to it. Compare the classic heading-text combo and an icon-heading-text combo:

Heading textIcon text

Designers give icons a chance to give a quick snapshot of what the point is about. In this case, icons are Metaphoric Substance. This is the least icons can do. In fact, you can encode a lot of information in them in the context where the estate is a factor.

Game designers took it even further and created systems of logically-connected icons representing different in-game assets. This is called Visual Synonymity.

There is a fine line between icons that convey a metaphor allowing designers to cover all bases in case the textual meaning is missed and pure decorative-functioning icons. We make sure icons work in the first place, which means they motivate a user to do what we expect from them.

Ideally, icons should work the way emojis do – as a universal language flexible enough to deliver any message cross-culturally and obvious enough to leave no second guesses 💡

Animation in design

Every physical object moves. They might be still technically, but in relation to the environment, they all move. As the Sun goes over a stone in the woods, the game of light and shadows enlivens the dead stone.

Our eyes and brain are designed to capture movement because it bears a lot of information. It’d be a shame to leave it unaccounted for.

Motion is the first thing we see in the product along with color, images, and typography. These four are the main contributors to the brand’s/product’s personality. It’s important for a product to have a stance on how it’s elements move and what stands behind that movement. But first, why animation is important in UX design:

  • Illustrative. It can demonstrate the functionality or help understand it better.
  • Amusing. Value can be expressed in many ways. Positivity is one of them.
  • Familiar. We expect certain reactions from certain actions. Animation familiarizes.
  • Engaging. We tend to follow patterns and animation is a great source of those.

Animation in web design

Triumph Motorcycle Shop Animation by Shakuro

The reason to animate the interface depends on the goal of that specific interaction. Let’s take engaging a user and directing their attention. Since movement is something we instantly see, it makes sense to use animation for things like banner ads and spams. Ads aren’t expected to sell the product, as much as they hunt for views. A view is a sell and they will get it from you by using cheap tricks. Banner ads animation is definitely a cheap trick that works.

How and when to use animation:

  • For attention

The principle itself is innocent though. More so, if we use animation to direct users in a way that helps them, the same banner ad principles might contribute to a good UX. For example, a file sending gone wrong does not have to be a pop-up with an error code or a “whoops” type message. We can attract attention to this by using a meaningful motion graphic.

This animation won’t get you confused about the success of your sending and will make sure you address the issue whatever that is. At the same time, it won’t be too intimidating because the animation is done in a friendly way.

  • For feedback

Animation magnifies the satisfaction you get from successfully performing a task. The more complex the task, the more rewarding it should be. Motion is how we convey the mood and the attitude of a product to the user’s actions.

Such animation can cover up the time needed to complete the technical request or form submission. The spinning bubble ensures there is work going on and appeals to our natural feeling of completion.

  • For progress

Most web processes have designated patterns that people recognize and expect. At the same time, with a variety of devices and screen media, it’s extremely challenging to maintain the same behavior with a lesser estate. This means we have to divide certain processes into comprehensible bits while mapping the entire progress.

This is how Google addresses a rather complicated and long process of copying information to Pixel phones.

Google pixel animation

Since this is a phone, you won’t be able to just switch to a different tab and keep yourself busy with something else. Still, you have to know what exactly is happening and why it is important.

The animation is a huge part of modern UI/UX design and we are just getting started with it. It’s a natural process of evolution that will ultimately make all animation meaningful and purposeful, forever cutting the ties to decoration. Added complexity will be replaced with modalities and subtle messages a well-thought-out animation certainly brings.

UX writing

UX writing is a process of creating copy for user interfaces. Some of you might be surprised to see writing listed among the fundamental aspects of interface design. However, writing is the most important accomplishment in human history. We are surrounded by products that are just the recreation of someone’s ideas. Sometimes those ideas are centuries old. Ideas travel by words.

The reason why animal life is finite is the inability to pass the experience of one animal to another after it. As humans, we can do this.

We pass knowledge and multiply it. This is called collective thinking and it has writing in its core.

Words are how we think and define the world around us. Words are human experience coded in something massive and yet extremely fluid – the language. The design relies on such elements and shares a long and dramatic history with writing.

Just like designers build a collection of methods, principles, and tools, they tend to do the same with a vocabulary used in interfaces. Indeed, some companies have style guides. Then there are acknowledged guides like the Chicago Manual of Style, Microsoft Manual of Style, and Associated Press Manual. They contain general recommendations for writers and designers working on specific things – documents, guides, and other user-facing assets. They teach how to avoid confusion and ambiguity but while doing that, they put a lid on the actual voice of the product.

Design values individuality equally to usefulness. Tech culture took away individuality in writing only leaving it to the creative sphere. However, if the design speaks to the emotive perception, writing has to follow.

This is how UX writing was born. At some point, designers started using a specific vernacular to name the UI elements. Good or bad, they were authentic bits of text specific for the product. We call it microcopy and it works like a regular copy with a tweak. The tweak is even though the text is clear and simple, you can’t reuse it for another product. It won’t feel right, like something is missing. That something is context. Microcopy says things differently and exudes topicality.

All of a sudden the unification everybody was going for gave way to individuality through one of the best ways to pass information – words. Because words matter.

Some designers went astray and became… UX writers. And they started approaching writing with all their knowledge and skills of visual influence. The UX writing principles quickly found their form in a pyramid.

UX writing principles

There are two layers. UX writing does not have to be personal. The essence of the product can be fulfilled by the UX writing principles alone. If it is clear, it’s helpful and if it helps, it becomes significant. The top layer is what UX writing is amplified by – the socially pleasing brand voice.

On paper, it’s quite simple but how do you put it to practice with real words and real problems?

* * *

Every professional, every team and every company has its own definition of design. 

But it seems that it all comes down to the simple fact that the meaning of design however it may vary depending on different projects, fields, and theories is not about beautification as such, but more of making the lives of users better, clearer, more enjoyable.

design-literacy-in-organizations

Pedro Canhenha

Design Literacy or the establishment of this discipline, is a designation that has become a typical expression within the arsenal of industry-laden jargon for Designers these days (on par with the lexicon which includes, Design Thinking, Omnichannel, Multi-Platform, among a few others). It’s typically associated with the process of educating and disseminating topics associated with the Design Discipline across an Organization, specifically across different teams, of different natures (including, but not limited to, Product, Development, Sales, Customer Support, among many others). The intent of this article, is to provide some reflection points, and hopefully some informed recommendations/suggestions on how to define a process by which Design Literacy is effectively done, based on past experiences, studying and observations.


Design Literacy. Wikipedia has a lengthy definition of Literacy, but I’ll quote this snippet as a form of clarification for the meaning of the word itself: “literacy is an ability to identify, understand, interpret, create, communicate and compute, using printed and written materials associated with varying contexts.” I first came to understand Design Literacy during my own Academic studies and post-college training, which I managed to deftly apply in one of my first jobs as an Educator/Teacher of Multimedia Programs and subsequently, diverse Design Software training programs. As a fundamental part of the curriculum of the courses, it was my responsibility to provide context to the Design Discipline, funneling the focus from Design as a broad subject, to Interactive Media in particular (which were primarily the courses I taught). The curriculum for these courses was rich and quite substantial, but one of the key aspects to them, was the creation of a common denominator level of understanding into the context of Design (Interactive Design), and how that was essentially being distilled into the program that was being taught. This required an obvious process of mapping out classes, and their respective content, thoroughly (both theoretical and practical aspects), always keeping in mind, that the information being shared, was aimed at an eclectic group of attendees, with different levels of knowledge towards the Design discipline in general, and the tools that were part of the courses in specific. The reason I’m outlining these past occurrences, is solely with the intent of building this analogy: context creation, education, mapping out Interactive Design training sessions, is in reality quite similar to the process that Designers currently take upon themselves in order to educate their peers in the organizations they’re a part of. I’ve been given the opportunity to work with a wide variety of companies, from large Fortune 500 to incredibly dynamic, and vastly smaller, startups, each one of them possessed of different levels of education when it came to Design, Designer roles, expected outcomes from Design-related initiatives, collaboration venues, communication processes, among many other Design related items. I worked with organizations where Design had already claimed its place, and started a process of disseminating its processes, its relationship building venues, and even in those situations, the Design Literacy topic, was always something being fine tuned and finessed. The way by which Designers educated their peers on the discipline, was in the case of these organizations, part of semi-established process, which included the utilization of tools such as Design Systems, solution driven Design Thinking processes, Design Sprints methodologies, and a variety of tools which essentially, documented and consequently, informed team members of the philosophy of the organization towards Design, and how to best utilize the outputs of that same discipline. On the opposite end of the spectrum, I worked with organizations where Design Literacy was barely existing. Design was in these cases, primarily contemplated as a service driven discipline, without much reach or depth, in terms of influence, impactful outcomes and overall healthy partnerships with other groups within the organization. In these cases, the challenge was, and has been, to create context into what the Design discipline is, how it integrates and ingratiates itself within the tissue of an organization, how it can revolutionize the narrative of Products, Solutions and Relationships with Users/Clients. Design Literacy is something that, much like any topic these days related to technology in particular, and society in general, is constantly evolving. Designers have the responsibility and duty to keep abreast of what is happening not only within their organization, but also in the sector they work in, the larger macro-economic sense of the reality of the world, the social responsibility associated with Product Design, with inclusivity, among many other factors, which permeate Design Literacy constantly, making it evolve continuously.

Reality Check. Establishing Design Literacy in an organization can be challenging, and time consuming. It’s a necessary investment, one that produces results across a variety of subjects, which include, more relevant and accomplished solutions, effective team integration (which as a side note, also implies swifter on boarding processes), brand awareness, among many others. Below are some points worth considering when tackling an endeavor such as this one.

1.Transparency — I’ve addressed the topic of Transparency in the past, but I’d like to reinstate that it’s a cornerstone of this endeavor. Design Literacy is all about being transparent and communicating with different teams, on a variety of topics, which includes definition of processes (specifically, what is Design Thinking, Design Sprints, Workshops, Research, User Interviews, Usability Testing, and the list goes on), team integration, how problems are defined, expected outcomes (of different natures, including for instance, artifacts produced by Design teams), assessing friction points (both external and internal), defining retrospective analysis (reflection on how processes have taken place and measuring their outcomes), and this list also goes on. Without transparency, there’s less ability for participation, for collaboration, for questioning, which dampens the process, warping the solutions that are created.

2.Communicate and Educate — Designers have to understand, now more than ever before, that their role has a large component tied to education, on top of the catalyst and alchemist ones. In order to be able to bring out the best of each team one collaborates with, everyone has to understand the journey they’re embarking on, and the language everyone is speaking. This means for Designers, detailing what Design Thinking processes are, discoverability processes, research processes (also topics I’ve written about previously), all neatly tied with effective documentation tactics. By documenting, by reinforcing collaboration, seeking participation, communicating expectations and requirements, Designers can successfully start educating and disseminating what Literacy is about, and how it informs the hopeful, successful outcomes of the initiatives taking place.

3.Listen — Literacy will never be achieved if Designers don’t listen. And listening comes from multiple sources, namely from clients, from internal stakeholders, peers, anyone that comes in contact with these professionals. Education is a relationship, and as such, it’s a communication, an interchangeable process by which information gets passed around, where Designers transmit, but also absorb knowledge about the tissue of the Organization, teams, and their users. The education process, the literacy that is accomplished, should never be done in a siloed context — it’s an eminently social process which requires Designers to understand the context where the organization lies, and consequently, where they’re inserted.

4.Outcomes — The output of Design Literacy can take a variety of shapes. As mentioned previously, being able to document and share what defines Design, its language, its vocabulary, its methods, is fundamental to this type of initiative. Design Systems, Style Guides, Design GuideBooks, Confluence Pages, Wiki Pages, all these different artifacts which are produced these days, are a manifestation of how this Design Literacy takes place. These are but a small outcome of this bigger endeavor, one that as the previous points urge and highlight, should be democratized across the entire organization.


Another Reality Check. Being a Designer these days is an enticing opportunity. It allows for professionals on this field to become aware of so many topics, not just for the sake of a trend or a superficial gimmick. Professionals are now empowered to understand more about the organization where they’re embedded, about the users they’re relating to, in essence, becoming powerful storytellers. These stories can only be told effectively, if we’re all understanding the plot and where we expect to be led. And nothing helps more in that path definition, than Design Literacy.


I’ll conclude with the following quote, from William Butler Yeats on the topic of education, which is one of the topics of this article:

“Education is not the filling of a pail, but the lighting of a fire.”


12-ux-design-trends-for-2020

The Designest Staff


The Designest Staff

Teamwork is something we are really good at! So sometimes we join our forces and experience to deliver even more useful, impressive content. Hope you enjoy it as much as our personal elaborations.

Related Posts

all-design-conferences

Predictive Maintenance 2020

The premier Predictive Maintenance 2020 conference, exhibition and networking forum brings together leading smart utility maintenance leaders from across Europe for an intensive review of the latest utility maintenance case-studies.

Jan 14, 2020

Berlin, Germany

CLT Sketch Meetup

An official Sketch meetup for designers and developers in Charlotte. Share knowledge, trade tips, and hear about new plugins and resources. Meet local designers and members of the Sketch team, learn more about the app and have fun with likeminded people.

Jan 15, 2020

Charlotte, USA

In/Visible Talks

A conference for creative professionals that celebrates the art of design. It focuses on fresh takes and honest talks about the process, inspiration, and challenges behind the creative practice.

Jan 16, 2020

San Francisco, USA

HalfStack Phoenix 2020

An authentic, high value experience for attendees and sponsors focused on UI-centric JavaScript and web development. The priority for HalfStack is the attendee experience, with great food, drinks, talks, swag, and community.

Jan 17, 2020

Phoenix, AZ, USA

DesignTO

DesignTO Festival is Canada’s leading (and largest) annual design festival that celebrates design as a multidisciplinary form of creative thinking and making, with over 100 exhibitions and events forming Toronto’s design week, January 17-26, 2020.

Jan 17, 2020

Toronto, Canada

UXCamp DC 2020

An unconference for people who love in design. It is an intense day of with 24 45-minute sessions and workshops presented by thinkers and doers from all levels of design experience from beginners to seasoned practitioners. It is a day of gathering for people who are passionate about creating great experiences for people.

Jan 18, 2020

Washington DC, Washington

You Got This

We’re back! An affordable one day conference for early-career developers to talk about the non-technical skills needed for a happy, healthy work life.

Jan 18, 2020

London, UK

2020 ICNSE Smart City & Intelligent ICT @ Nagoya, Japan

The 9th International Congress on Natural Science and Engineering (ICNSE) will be held from January 20 to 22 in Nagoya, Japan. World’s scholars, professionals and researchers interested in creating a better future

Jan 20, 2020

Nagoya, Japan

Awwwards Conference Tokyo

A digital thinkers conference is coming to Tokyo! It brings you the hottest topics and newest technologies on User Experience, UI Design, Web Design and Development, Animation, Technology, Branding, Trends, Creativity and much more.

Jan 22, 2020

Tokyo, Japan

New Adventures

A digital design conference where you’ll explore speculative and critical design, radical inclusivity, climate, sustainability, and much more.

Jan 22, 2020

Nottingham, UK

Snow Camp 2020

A unique conference for devs, ops and architects

Jan 22, 2020

Grenoble, France

Humanising Design

Figma’s meetup where you’ll dive into cognitive UI/UX principles that can be used to create delightful experiences for users.

Jan 25, 2020

Lagos, Nigeria

Frontstack – Media on the Web 2020

Frontstack is a tech community built on the foundation of technological excellence and developer awareness. As its name implies, it’s all about front-end web technologies and their affinities. Our mission is to effectively grow the developer ecosystem, stem world-class developers through the community by creating exposure to front-end technologies

Jan 25, 2020

Lagos, Nigeria

NDC London 2020

NDC London will offer a combination of talks, lightning talks, workshops, and panels. In the previous years NDC has been primarily focused on .NET, frontend and agile, but as the .NET developers world has changed, so has NDC.

Jan 27, 2020

London, United Kingdom

Nielsen Norman Group UX Conference

Full-day immersive courses about UX best practices, proven methods, and hands-on exercises led by NN/g experts and world-class invited speakers.

Jan 27, 2020

Austin, Texas

Creating Product Illustration Libraries with Pablo Stanley

Illustrations are emerging as a vital part of the user experience of a product, as they help tell your brand story, articulate and communicate your values and brand personality. How do you create a successful illustration system, shaping a strong visual identity? How do you decide a core set of principles?

Jan 28, 2020

San Francisco, USA

Byteconf GraphQL 2020

Byteconf GraphQL is a 100% free single-day conference with the best GraphQL speakers and teachers in the world. Conferences are great, but flights, hotels, and tickets are expensive, so not everyone can go. Byteconf is streamed on YouTube, for free, so anyone and everyone can attend. RSVP at the link below, and we’ll see you on January 31st!

Feb 1, 2020

Online

IxDA

A mix of workshops, talks, and hands-on experiences aimed at inspiring designers around the world. It brings together the brightest minds in design, science, philosophy, psychology, and business.

Feb 2, 2020

Milan, Italy

Interaction Design Education Summit

With a panel of international speakers and hosts, we invite you to discover our take on the New Dawn of interaction design education.

Feb 2, 2020

Milan, Italy

Pause Fest

A festival for business and creativity with a mission to bring diverse intelligence together to fuel the next generation forward.

Feb 5, 2020

Melbourne, Australia

JSConf Hawaiʻi 2020

A two day, single track conference dedicated to web development, JavaScript and building a community. Join us for our second annual JavaScript conference, coming February 2020 at the Alohilani Resort! Listen to our panel of amazing speakers, meet new people, and enjoy the activities Hawaiʻi has to offer!

Feb 5, 2020

Honolulu, HI, USA

Config 2020

Config is a one-day conference where Figma users come together to learn from each other.

Feb 6, 2020

San Francisco, CA, USA

Front End North 2020

Front End North is a welcoming one day, single track, conference for developers, designers and others who work on the web. FEN is returning on 7th February 2020 at The Crucible in Sheffield, UK. Hosted by the organisers of the Front End Sheffield meetup, FEN is a grassroots, low-cost conference with a mixture of established and new speakers.

Feb 7, 2020

Sheffield, UK

Outcome

A conference that talks about startups, products, UX and design from a storytelling perspective.

Feb 8, 2020

Chandigarh, India

Sketch Dallas February Meetup Event

An official Sketch meetup for designers and developers in Dallas. Share knowledge, trade tips, and hear about new plugins and resources. Meet local designers, learn more about the app and have fun with likeminded people.

Feb 11, 2020

Dallas, USA

Workplace Summit

Calling all change-makers: Join us for the 2nd annual Workplace Summit—an afternoon of practical strategy for managers and team-builders of all genders.

Feb 11, 2020

San Jose, California

Watermark Conference

Inspiration, insights and community for working women.

Feb 12, 2020

San Jose, California

Brand New: First Round

A one-day showcase of original presentations made to clients showing initial design explorations for logo, identity, and branding projects.

Feb 14, 2020

Portland, USA

Figma Africa Enugu Meetup

Figma’s event where you’ll explore places where people could go and get resources and inspiration for their design and finally.

Feb 15, 2020

Lagos, Nigeria

Nielsen Norman Group UX Conference

Full-day immersive courses about UX best practices, proven methods, and hands-on exercises led by NN/g experts and world-class invited speakers.

Feb 17, 2020

Singapore

UXistanbul

The first UX conference of Turkey that gathers UX and Usability professionals from the world’s leading companies in Istanbul, to share their experiences.

Feb 18, 2020

Istanbul, Turkey

Mouvo

A festival presenting motion design in all its forms – as a creative field as well as an outlet for personal expression.

Feb 21, 2020

Prague, Czech Republic

World IA Day

World Information Architecture Day is a one-day annual celebration held in dozens of locations across the globe.

Feb 22, 2020

Online

Nielsen Norman Group UX Conference

Full-day immersive courses about UX best practices, proven methods, and hands-on exercises led by NN/g experts and world-class invited speakers.

Feb 23, 2020

Los Angeles, California

FITC Amsterdam 2020

Groundbreaking design and tech event on the future of innovation, design and all the cool stuff in between.

Feb 24, 2020

Amsterdam, Netherlands

Design Indaba Festival 2019

The annual Design Indaba Conference in Cape Town features the best of global creativity all on one stage. It is also simulcast live to cities around South Africa.

Feb 26, 2020

Cape Town, South Africa

ProfsoUX

Understand where to move at different stages of development yourself, how to develop a team / business;

Feb 29, 2020

Saint Petersburg, Russia

Bogotá Design Festival

Es un evento de 4 días que reúne y promueve la creatividad, la innovación y el diseño en todos sus estados, ya sea en objetos industriales o artesanales, artísticos, gráficos, digitales, gastronómicos, visuales, de interiorismo o de moda, donde las industrias creativas y el diseño son el sujeto transversal, que impactan tanto en lo comercial y lo cultural, como en nuestra identidad como ciudad.

Mar 3, 2020

Bogotá, Colombia

Convey UX

ConveyUX is the premier user experience conference on the West Coast. The 2020 conference in Seattle features 65 sessions from 50 UX leaders across three full days. Explore how UX really gets done.

Mar 3, 2020

Seattle, Washington

Leading Design San Francisco

Brings together experts who lead design teams, oversee design direction and instill a culture of design within their organizations.

Mar 4, 2020

San Francisco, USA

Service Design in Government

The original international community event for anyone involved in designing and commissioning public services.

Mar 4, 2020

Edinburgh, Scotland

NO/BS Conference

Is a place where like-minded people can get together, listen to some amazing stories and cut through all that.

Mar 11, 2020

Melbourne, Australia

Forward Festival

Forward brings together the best international and local creative heads, who provide insights into their success stories in an exciting atmosphere. The conference, the centerpiece of the festival, is accompanied by various side events, such as workshops, live art sessions and networking events.

Mar 12, 2020

Munich, Germany

SXSW Interactive

It covers all aspects, from futuristic product design to design-thinking approaches that can be applied to numerous other disciplines, businesses, and organizations. This programming will examine how design informs our interactions, shapes our experiences, and plays a critical role in problem-solving.

Mar 13, 2020

Austin, USA

Future London Academy – Design Thinking and innovation Week

Who is this programme for? — CEOs, CIOs and business owners — heads of design and innovation departments — product managers and team leaders — service and experience designers — UX researchers — innovators and trendsetters.

Mar 16, 2020

London, United Kingdom

ACM IUI

ACM IUI is where the Human-Computer Interaction (HCI) community meets the Artificial Intelligence (AI) community. We are also very interested in contributions from related fields, such as psychology, behavioral science, cognitive science, computer graphics, design, the arts, etc.

Mar 17, 2020

Cagliari, Italy

Design Research 2019

A three-day event dedicated to design research – from planning and conducting, to analysis and use. This event includes a one-day workshop program and two-day presentation program, and you can purchase tickets for one or both.

Mar 18, 2020

Melbourne, Australia

IAM Weekend

The annual gathering for creative thinkers & doers who care about the futures of the internet. Originally created as a collective research and learning initiative with an independent, ad-free, alternative and purpose-driven mindset.

Mar 19, 2020

Barcelona, Spain

Munich Frontend Conference 2020

An international conference focused on frontend concepts and technologies around JS/HTML/CSS. Two tracks of talks by speakers from all over the world.

Mar 21, 2020

Munich, Germany

Human-Robot Interaction 2019

Researchers from across the world present their best work to HRI to exchange ideas about the theory, technology, data, and science furthering the state-of-the-art in human-robot interaction.

Mar 23, 2020

Cambridge, UK

UX Copenhagen

What is influence in UX? This is the subject we have given our speakers for 2020: “Influence & Designing for Good”. Some of the subjects you will be hearing about are DesignOps, privilege, tech for social good, futures thinking, ethical OS, designing against domestic violence, and maybe even rocket science! Join us for two days filled with superb content from 20 speakers, hands-on workshops, inspiration, networking, new knowledge, and new insights.

Mar 30, 2020

Copenhagen, Denmark

AIGA Design Conference

Brings the design community together in a once-in-a-lifetime, cross-disciplinary exchange of ideas about the changing world of design.

Mar 30, 2020

Pittsburgh, USA

Advancing Research 2020

Rosenfeld Media produces some of the design industry’s most beloved books and conferences. Now we’re bringing our industrial-strength curation skills and obsessive focus on attendee and sponsor experience to the research world. We’re painstakingly designing a program that is grounded in both thought leadership and community research. The conference’s themes mirror the community’s most pressing conversations.

Mar 30, 2020

New York City, New York

UIArchConf

A conference and training event for those who work as UI Architects. Here you’ll explore the various aspects of UI Architecture and the massive role a UI architect plays in an organization.

Apr 1, 2020

New Orleans, USA

Creative South

A weekend of creative thinking, collaboration, and exploration. Enjoy workshops, talks focused on process & experience, and networking in the design community.

Apr 2, 2020

Columbus, USA

The Y Conference

A national-caliber design conference. It brings together industry thinkers, innovators, and change-makers for two days of creativity and collaboration.

Apr 3, 2020

San Diego, USA

Offset

A three-day creative conference. Celebrating creativity and bringing together the best in International and Irish creative talent in graphic design, illustration, street and fine art, film, photography, moving image and much, much more.

Apr 3, 2020

Dublin, Ireland

An Event Apart

An Event Apart DC is a three-day conference with 17 sessions and an intense focus on digital design, UX, content, code, and more, giving you deep insights into where we are now and where things are going next

Apr 13, 2020

Washington DC, Washington

Health Experience Design Conference

The Health Experience Design Conference provides a unique crossroads for a diverse community of executives and practitioners in design, innovation, research, strategy, and technology to help accelerate the transformation of our health system.

Apr 14, 2020

Boston, USA

IAC 2019 (Information Achitecture Conference)

Two days of workshops and a three-day main program and conference for practitioners and academics who confront the challenge of designing and managing digital user interfaces and rich information environments.The conference is ideal for user experience and information professionals who seek practical and innovative approaches in their discipline.

Apr 14, 2020

New Orleans, Louisiana, USA

Crop Baton Rouge

A two-day celebration of creativity, community, inspiration, learning & more. Find out inspiring talks and knowledge dropping workshops together with vendors, live events, live music, after-parties.

Apr 16, 2020

Baton Rouge, USA

Forward Festival

A festival gathering around a conference with the best international and local personalities who provide insight and success stories. Accompanied by a saucerful of side events with workshops, live art and networking sessions.

Apr 16, 2020

Vienna, Austria

Future Sync

Future Sync is a tech conference keeping you in-sync with the latest digital trends. Exchange ideas and forge new partnerships whilst experiencing some of the innovative work happening across the region. A great opportunity to engage with the thriving digital community of the South West.

Apr 16, 2020

Plymouth, UK

Design Week Portland

Celebrates design as their city’s most promising cultural and economic resource. Their purpose is to explore process, craft, and practice across disciplines through a city’s vibrant design programming.

Apr 18, 2020

Portland, USA

FITC Toronto 2020

An event showcasing the best the world has to offer in design, digital development, media and innovation in creative technologies – it’s three days and nights of presentations, parties, installations and performances that unite and transform the industry.

Apr 19, 2020

Toronto, Canada

SmashingConf – SF

A friendly, inclusive event that is focused on front-end and UX, but it covers everything web, be it interface design or machine learning. Live sessions on performance, accessibility, interface design, copywriting, designing for emotion, debugging and fancy CSS/JS techniques.

Apr 21, 2020

San Francisco, USA

OFFF Barcelona 2020

A three-day journey of conferences, workshops, activities, and performances. All for the community of designers: sound, graphic, motion designers, thinkers, theorists and more.

Apr 23, 2020

Barcelona, Spain

CHI 2020

The premier international conference of Human-Computer Interaction, is a place where researchers and practitioners gather from across the world to discuss the latest in interactive technology.

Apr 25, 2020

Oahu, Hawaii, USA

Beyond Tellerrand

The affordable single-track event where creativity and technology meet.

Apr 27, 2020

Düsseldorf, Germany

UX Burlington

An annual single-day conference, focused on what it really takes to build great digital user experiences on the web, in apps, and beyond.

May 1, 2020

Burlington, USA

Frontend United

A non-profit, developer-first, community-focused conference. They aim to connect frontend developers and designers from all kinds of backgrounds closer together to share knowledge, experiences and ideas.

May 1, 2020

Minsk, Belarus

Pixel Up!

Africa’s premier user experience and design conference. 3 days of learning, connecting, and discovery with local and international speakers in beautiful Cape Town.

May 4, 2020

Cape Town, South Africa

HOW Design Live

A four-day conference and 3-day expo for design, marketing and creative professionals, with a focus on in-house practitioners in major corporate brands and design firms.

May 4, 2020

Boston, USA

and& Leuven

An innovation festival that brings together changemakers of today to inspire curious minds of all backgrounds. It provides a platform for interdisciplinary innovation that aims to transform our society & acts upon the challenges we face today.

May 6, 2020

Leuven, Canada

From Business to Buttons

Scandinavia’s premier User Experience and Service Design conference, it is the meeting place for everyone who wants inspiration, and hands-on advice, on how to generate business value by creating great experiences.

May 8, 2020

Stockholm, Sweden

Camp Digital

An inspirational conference that brings together the digital, design and UX communities for a series of seminars exploring the latest thinking in our industry.

May 13, 2020

Manchester, UK

JAM Product Leaders Weekend 2020

Hosted in the beautiful Welsh countryside, this experience is designed to help you connect candidly with peers, grow your product leadership skills and solve your biggest challenges together.

May 14, 2020

Cardigan, UK

Games User Research Summit

The #gamesUR Summit consists will feature a keynote, traditional presentations and panels at all experience levels in games user research and user experience.

May 14, 2020

Montreal, Canada

Confab

Confab is an event for people who care about making content better for their users and organizations. Spans several areas related to content strategy, including analytics and performance UX design, Workflows and stakeholders, content design for AI and bots, editorial assignments and calendars and hiring and staff management among other talks and topics.

May 17, 2020

Minneapolis, Minnesota

D&AD FESTIVAL 2020

A three-day immersion in the world’s best craft, creativity and culture for the global creative industries.

May 19, 2020

London, UK

UXLx

Four days of inspiring talks and hands-on workshops featuring top industry speakers.

May 19, 2020

Lisbon, Portugal

ACE!

ACE! brings a mix of foreign and Polish speakers at the top of their fields. They bring innovative and actionable ideas to the IT community and showcase some of the best practices that are working. Past speakers include many famous authors and innovators of key design and software practices used globally.

May 20, 2020

Kraków, Poland

GI20 (Graphics Interface 2020)

Graphics Interface 2020, is a conference on computer graphics, visualization and human-computer interaction, the program covers technical and fundamental contributions in both Graphics and HCI.

May 21, 2020

Toronto, Canada

webinale

The conference for product owners, web designers, and frontend coders. It combines user experience with code and offers a variety of topics that are important for digital professionals nowadays.

May 25, 2020

Berlin, Germany

UX London

A three-day UX event by Clearleft, combining inspirational talks with in-depth workshops presented by some of the industry’s biggest names.

May 27, 2020

London, UK

C2 Montréal 2019

C2 Montréal is the most forward-thinking business event in the world. Named best conference four years running,it is much more than just a conference. It combine progressive and inspiring content in a highly creative, festival-like setting that will blow your mind.

May 27, 2020

Montreal, Canada

Berlin Letters Festival

A festival bringing together professionals and amateurs of lettering, sign painting, calligraphy and type design. Three days of inspiration, fun and skillshare with international speakers, awesome workshops and general jamboree.

May 28, 2020

Berlin, Germany

DesignOps Global Conference

Designops conference is a convergence of ideas and insights from people who are shaping and informing Digital Design and its related fields.

May 28, 2020

Manchester, UK

Front Conference

Attending the Front Conference you’ll get to meet and learn from people that have been building digital experiences for years. Listen to leaders in our industry that are making the biggest impact and working with high performing teams. Learn ways that you can advance in your career through soft and hard skills that will help you compete in this competitive tech industry.

May 28, 2020

Salt Lake City, Utah

Forward Festival

A festival gathering around a conference with the best international and local personalities who provide insight and success stories. Accompanied by a saucerful of side events with workshops, live art and networking sessions.

May 29, 2020

Berlin, Germany

CreativePro Week

Event for graphic designers and Adobe Creative Cloud users. Whether you work in print or digital publishing, you’ll learn techniques and best practices you can take home and start using immediately to improve your productivity.

Jun 1, 2020

Austin, USA

Fluxible

A gathering of people who share an interest in user experience design and the fields with which it intersects. Fluxible is an inclusive, cooperative environment where everyone is welcomed, open dialogue is encouraged, and all perspectives are appreciated.

Jun 1, 2020

Waterloo, Canada

Eye Tracking Research & Applications

ACM Symposium on Eye Tracking Research and Applications brings together eye tracking researchers from Computer Science and Psychology/Cognitive Science under the motto Bridging Communities.

Jun 2, 2020

Stuttgart, Germany

UXR Collective

Brings together people from across the globe who are committed to championing their users, surfacing better insights, and bettering the tech ecosystem.

Jun 3, 2020

Toronto, Canada

99U Conference

Adobe’s career resource and annual conference, helping creatives of all stripes supercharge their work and make their ideas happen.

Jun 3, 2020

New York, USA

Birmingham Design Festival

A celebration of the local, national and international design industry held in the UK every June.

Jun 5, 2020

Birmingham, UK

Eyeo Festival

Brings together creative coders, data designers, and creators working at the intersection of data, art & technology for talks, workshops, labs, and events.

Jun 8, 2020

Minneapolis, USA

SmashingConf – Austin

An inclusive, practical and friendly conference on front-end, design and UX, with CSS/JS techniques, accessibility, performance, privacy, internationalization, designing for mobile, HTML email and real-life case studies.

Jun 9, 2020

Austin, USA

Enterprise Experience 2020

Enterprise Experience is for enterprise UX practitioners up-level their skillsets to become “enterprise-ready” with keynotes, talks, and full-day workshops helping UX leaders and managers more effectively partner with their peers in product management

Jun 10, 2020

San Francisco, California

Dsgnday

A full-day conference with eight presentations about web design and user experience. Expect plenty of practical advice on designing for the web—on any device.

Jun 11, 2020

Amsterdam, Netherlands

ECSCW 2020

ECSCW is a series of international conferences on computer-supported cooperative work located in Europe. A venue for defining and further developing the agenda for collaborative work research.

Jun 13, 2020

Siegen, Germany

Car HMi

The Annual Car HMI Europe is a well-established international knowledge exchange platform bringing together all stakeholders playing an active role in the technical and design field for automotive HMI and UX development. In 2.5 days you will get the chance to discuss opportunities as well as challenges in HMI and UX development that lie ahead of the automotive industry.

Jun 22, 2020

Berlin, Germany

Fintech Design Summit

The FinTech Design Summit pulls together the world’s most innovative FinTech companies; to talk about Product Design, UX and Strategy. Our ambition is to create a dialogue within the FS community, in order to accelerate the digital transformation of our financial services for generations to come.

Jun 25, 2020

New York City, New York

Forward Festival

A festival gathering around a conference with the best international and local personalities who provide insight and success stories. Accompanied by a saucerful of side events with workshops, live art and networking sessions.

Jul 2, 2020

Hamburg, Germany

DIS 2019

The ACM conference on Designing Interactive Systems (DIS) is the premier, international arena where designers, artists, psychologists, user experience researchers, systems engineers and many more come together to debate and shape the future of interactive systems design and practice.

Jul 6, 2020

Eindhoven, Netherlands

Design/Content

The conference for designers & content strategists. Hear from industry leaders about crafting experiences and telling stories that shape the future of the web. A day of workshops, two days of talks, and thoughtful extras in one of the most beautiful cities.

Jul 15, 2020

Vancouver, Canada

SIGGRAPH

The forum where inspiration creates progress. Collaborate with our forward-thinking community to find the most transformative advancements across computer graphics and interactive techniques.

Jul 19, 2020

Washington, USA

HCI International 2020

One of the oldest HCI conferences with an aim to provide an international forum for exchange of up-to-date scientific information on the areas of HCI, Information, Universal Access, Engineering Psychology, Cognitive Ergonomics, Virtual Augmented Mixed Reality and many more with presentations, parallel sessions, poster sessions, tutorials, exhibitions, competitions, mentoring sessions and much more.

Jul 19, 2020

Copenhagen, Denmark

Loupe2020

A conference from Framer on interactive design and creative coding. Talks from designers, prototypers, and developers on the way they work and their creative process. There are also Framer X workshops so that attendees can get some practical stuff at the end of the conference.

Aug 19, 2020

Amsterdam, Netherlands

Framer Loupe

A conference from Framer on interactive design and creative coding, Loupe is days of insightful speaker talks, practical workshops, and valuable community time with people willing to help and share their knowledge.

Aug 20, 2020

Amsterdam, Netherlands

Beyond Tellerrand

Motivating, thoughtful and educational talks, workshops and side events. The main show takes place on August 25th and 26th with workshops and side events around these two days. Tellerand is one of the most interesting and inspiring digital conferences on Europe.

Aug 24, 2020

Berlin, Germany

Design Leadership

A two-day event exploring the issues, methods, philosophies and strategies of Design Leadership in Australia and abroad, a two-day event dedicated to design leadership – looking at the issues facing design leaders at all levels, from career development to team dynamics.

Aug 25, 2020

Melbourne, Australia

Growth Marketing Summit 2020

Uniting like-minded optimizers from all around the world to exchange on topics moving the digital world and to learn from world-class talks. Europe’s biggest conference for digital growth and optimization.

Sep 1, 2020

Frankfurt, Germany

SmashingConf – Freiburg

Friendly, inclusive events that are focused on real-world problems and solutions. Their focus is on front-end and UX but we cover everything web, be it UI design or machine learning.

Sep 7, 2020

Freiburg, Germany

Circles

A three-day creative design conference, bringing together designers and makers from around the globe. Learning from transformative thinkers and connecting with like-minded innovators, it provides a space where you’ll be challenged to push yourself in the creative process.

Sep 10, 2020

Richardson, USA

Construct

An affordable, one-day conference aimed at those designing and building the latest generation of web-based applications.

Sep 11, 2020

Brighton, UK

Digital Labin

A two-day ICT conference bringing you top of the line keynote speakers in web, mobile and software design and development. Additionally, we are happy to have professional workshops, many networking activities and a party to remember.

Sep 25, 2020

Labin, Croatia

Creative Works

A conference is for creative professionals who are serious about their craft and want to sharpen their skills and learn how others work. Dozens of talks, workshops, vendors, and afterparties that encourage inspiration, connection, and growth among creative professionals.

Oct 3, 2020

Memphis, USA

Canvas

Perfect for people who design, make and deliver digital products and experiences. A single day digital product and experience conference sharing the insider stories from people solving real customer problems, real people, in the work, sharing their experiences and learnings.

Oct 8, 2020

Birmingham, UK

Adobe MAX

Adobe’s annual events where you can learn the latest Adobe announcements, attend 300 sessions, labs, creativity workshops and network with each other.

Oct 19, 2020

Los Angeles, USA

SmashingConf – New York

An inclusive, practical and friendly conference on front-end, design and UX, with CSS/JS techniques, accessibility, performance, privacy and real-life case studies.

Oct 20, 2020

New York, USA

Seattle Interactive Conference

Is a celebration of the incredible work happening at the intersection of technology, creativity and industry. They spotlight innovation in experience, design, and strategy. They believe in the power of creative thinking, and that data and technology can be leveraged to help us make better, intentional choices.

Oct 20, 2020

Seattle, USA

Brand New Conference

A two-day event on corporate and brand identity with some of today’s most active and influential practitioners from around the world.

Oct 22, 2020

Austin, USA

Design Thinkers

Canada’s largest annual graphic design conference, connecting designers from around the world.

Oct 24, 2020

Toronto, Canada

EPIC

Building new ways of thinking, knowing, and working at every stage of the product cycle. EPIC2019 is the premier international conference on ethnography in business.

Oct 25, 2020

Melbourne, Australia

ICMI 2019

CMI is the premier international forum for multidisciplinary research on multimodal human-human and human-computer interaction, interfaces, and system development.

Oct 25, 2020

Utrecht, Netherlands

Beyond Tellerrand

Motivating, thoughtful and educational talks, workshops and side events. The main show takes place on August 25th and 26th with workshops and side events around these two days. Tellerand is one of the most interesting and inspiring digital conferences on Europe.

Nov 2, 2020

Munich, Germany

Digital Thinkers Conference

Leaders, Designers, UI/UX Experts and E-commerce Entrepreneurs join 500 designers to share their innovative expertise on creating new experiences. Inspiration talks with Founders, Influencers, Artists and Designers.

Nov 18, 2020

San Francisco, USA

the-next-decade-of-design-will-be-about-fixing-the-last-century-of-excess

The 1980s have gone down in history as the decade of excess (as if the gas-guzzling V8 cars of the 1970s or the rise of fast fashion in the 1990s never happened). But the 2010s have put it all to shame.

This was the decade where convenience crushed everything else. Prime two-day shipping became not a luxury, but a way of life—that would give way to one-day shipping, then same-day shipping. Grubhub, Doordash, and Uber Eats became the ubiquitous, on-demand service to have any delicacy delivered. We had the explosion of smartphones, built from rare, mined materials. These were the supercomputers in our pockets, but due to planned obsolescence, fundamental fragility, or just the promise of “thinner, faster, better,” they still mandated upgrades every 12 to 24 months (no matter the consequence). Over the past decade, so many of the consequences of consumption became invisible: We forget that every search we make or song we stream has a cost: The cloud is really a server farm that needs impossible amounts of energy—though that did nothing to quell the cryptocurrency boom.

None of this hit home until the last days of 2019, when I reached out to experts—who specialize in everything from packaged food to airline travel to architecture—asking them to share their predictions for their industries in 2030. And while I said nothing about the environment, it was top of mind for almost everyone.

[Source Photo: design56/iStock]

How we’ll eat in 2030

“The products we choose to consume are more important than the clothes we wear or the cars we drive. People don’t post pictures of their cars, but they post pictures of their food regularly. They want their friends to know two things: 1) what new thing they have discovered, and 2) what the decision to consume it says about them. This spirit of sharing and discovery has made people more adventurous, but where it was once about a specific in-restaurant dining experience, it now extends to everyday consumption of snacks and beverages.

“Thankfully, advancements in e-commerce infrastructure have allowed our industry to make more product varieties available to consumers.

“The tension we will face going forward is balancing consumer demand for endless options with the inconvenience of having to actually make choices. Choices can sometimes create friction in the purchasing process. We will have to design and deliver indispensable offerings and provide consumers with the knowledge and guidance to select products that best meet their needs.

“Related: How will consumers balance the struggles of prioritizing sustainability with the need for convenience? Our consumers’ need for convenience is real, and it’s not going away—that’s why delivery is on the rise. However, convenience creates waste: bags, boxes, plasticware. When my team is innovating at PepsiCo, sustainability is one of the top considerations. In the future, packaging must be more responsible while still being portable.” Dena vonWerssowetz, senior marketing director for global beverages, PepsiCo

[Source Photo: scyther5/iStock]

How we’ll travel in 2030

“With absolute certainty, climate change will be the defining force in the next decade for all of us. There will be a growing earnestness to rethink how we live, work, and move around in response to conspicuous signals that we’re in trouble, from everyday tidal flooding to increasingly bizarre weather. Despite these alarm bells, the challenge ahead for designers will be to reconcile these necessary changes with our penchant for greed and laziness as consumers. This can be done, though, and here are two opportunities that fit this bill.

“First, not moving around as we much as we do now will become a focus, especially for private and public employers compelled to curb business travel in the interest of reducing their carbon footprints. The design opportunity here is to create all-new ways of replicating in-person collaborations. Forget videoconferencing, which is a cave person version of what’s ahead. Instead, there will be breakthroughs in extended reality, robotics, and smart surfaces that let us transcend geography.

“Second, we’ll have to be a lot more efficient when we are moving around. All transportation will become intermodal (meaning it orchestrates handshakes with other modalities) and multifunctional (meaning it does more than just one thing). Jammed city infrastructures will not tolerate one-dimensional vehicles that just deliver people or just deliver freight. This will require new vehicle form factors that are born of co-designing. Earlier in the decade, vehicles that are actually designed for both ride-sharing and delivering food and parcels will emerge. Later on, we’ll see wilder mashups between cars and non-automotive brands that offer entirely new mobility experiences.” —Devin Liddell, principal futurist, Teague

[Source Photo: ExFlow/iStock]

How we’ll value companies in 2030

“Whether it’s CEOs declaring the need to redefine capitalism or the climate movement sparked by Greta Thunberg, there is a reexamination of fundamentals afoot: of the place and purpose of governments, businesses, and individuals in society. As we look at what’s ahead, we’re seeing a groundswell of people—­­­enabled by digital—exerting pressure on organizations to redefine their success in ways other than financial growth alone. People want their purchases to reflect the social, environmental, and political causes they care about. After a long streak of pure profit-chasing, this is an epoch-defining opportunity for companies to reimagine their business models, services, and products around new definitions of value—to switch from digital transformation to purpose-led transformation.

“We’ll see more leaders espouse purpose—and then get caught up because it’s not aligned with some element of their operation. This reality is going to be really hard to resolve because as we transition, everyone is open to critique about something. Social media may not make plastic or dig up minerals that cannot be renewed, but it is open to criticism that it is causing social and political distress. Retailers may shift to ethically sourced products, but ship from halfway across the planet. The important thing is to start—and that means with metrics. French corporate services giant Sodexo, with a number-driven emphasis on cutting food waste, is a great example. Could they reinvent everything they do? Probably. Should they start somewhere (and they have)? Yes. Ethical paralysis is not an option and will be called out. We believe it is better to be on the journey and admit you have a distance to go than burying your head. There’s a cynical game being played of looking at percentages as they are applied to contributors to global warming. There is always a sector more responsible than yours for CO2 emissions for example. But if we all take that approach, then nothing changes.

“Over the next few years the idea of ‘consumer’ will come to feel really backward as a label—like the idea of ‘servant’ is pretty awkward in the 21st century. As causes grow as a motivation for purchase, we will see companies try to grow a direct link between the purpose of their employees and that of their customers, and to grow that as a direct connection. If you look at Bo, a new U.K. bank from RBS—they are explicitly trying to help their customers develop better money habits—as they say ‘you do a little, we do a little.’ It’s not hard to imagine a next step that connects their employees directly to customer outcomes.

“As people begin to shift from a ‘me’ to ‘we’ mindset, tomorrow’s success stories will belong to organizations that design with all life in mind. As designers, we must begin to address people as part of a greater ecosystem, embracing a broader, more holistic systems mindset that starts to make the traditional user-centered design approach sound way too self-centered.” —Mark Curtis, cofounder and chief client officer, Fjord

[Source Photo: iStock]

How we’ll build in 2030

“In the next decade I believe experiential design will play a greater role and impact lives as people interact with the built environment. With the launch of 5G technology, the ability to create and transmit massive amounts of new content while we’re in constant motion and engaging—in real time—with the built environment will be a major disrupter in communities. Experiential design’s elevation to customizable and personal experiences that are built around individual behaviors and preferences will impact daily actions from a healthcare doctor visit, to educational experiences at two- and four-year institutions, to even vacations.

“Imagine if you’re a history buff, standing at the base of the Statue of Liberty. You’re presented—based on your profile and interests—information as to how Lady Liberty was created and built. Then you’re connected to details about Ellis Island regarding immigrant passengers, maybe even about your ancestors and the ships they arrived on. Instead of going back and researching, the information is curated and accessible in real time. Our engagement impact within the built world will be defined not only by what we see and feel, but with tailored experiences and information.

“I believe the next decade will couple and improve these individual experiences with a greater focus on personalized health. With companies designing more high-tech wearables that gauge and record data, knowledge focused on healthy lifestyle and well-being choices will shape physical spaces, from college recreation spaces to athletic performance and research facilities, where the built and virtual environments become more integrated and seamless.” —Bradley Lukanic, CEO, CannonDesign

[Source Photo: NordWood Themes/Unsplash]

How nothing might change by 2030

“While ‘tech’ boosters, hypemongers, and Davos dwellers continue to proclaim that we are living in a moment of technological ‘revolution,’ economists, historians, and other observers have been telling a different story over the last decade: that we have been experiencing an extended period of slow economic and productivity growth since the 1970s. One possibility is that this period of slow growth will keep on going for many years, a potential some economists are, in fact, predicting. Overhyped and buzzword-laden technologies—like today’s ubiquitous ‘AI’—will continue to underperform on expectations and incremental change will remain the norm.

“Part of what makes meaningful growth so hard is that we underestimate the amount of significant change that has taken place over the last 150 years. Uber and Lyft provide some improvement over taxis, but that advance is not as great as the ones humans experienced earlier through the invention of automobiles, concrete and asphalt roads, and, well, taxi companies themselves. The difficulty in creating deep change is reflected in companies failing to produce profits. Lyft and, especially, Uber have struggled to be profitable, but so have WeWork, Tesla, Twitter, Peloton, and several other hyped firms. Moreover, research productivity in general has decreased over the last 50 years—that is, it takes more human effort and money to produce new research—perhaps in part, because, as some argue, all of the ‘low-hanging fruit’ of technological and scientific change has been plucked. While boosters will always argue that some revolutionary technology, be it nanotechnology or true AI, is just over the horizon, there’s really no reason to go along with such predictions or assume that our extended period of slow growth will end soon.

“In this possible low growth future, our infrastructure will continue to degrade, and we will persist in our mastery of not acting to stop global climate change. Designers might capitalize on this moment by creating cheap solutions for consumers to adapt to their ever-warming world. But designers might also find their work increasingly casualized and precarious, as employers turn to temp labor and Uber-like apps that define designers as ‘partners,’ not employees. Jobs will come and go, but wages will remain stagnant. This isn’t your grandparents’ dystopia, a Blade Runner-esque hellscape of skyscrapers, androids, and flying cars, but rather something not much different than what we live in now, just continuing to molder.” —Lee Vinsel, assistant professor of science, technology, and society at Virginia Tech

6-category-page-design-examples

Dozens of people find your business when looking for a type of product but aren’t sure which product fits their needs best. With a well-designed and organized category page, you’ll help people browse products easier and find what they want.

To help you get inspired, let’s take a look at some excellent category page design examples that showcase how you can design and develop these pages.

On this page, we’ll explore six inspirational category page design examples to help you get started with your product category pages. Want to get more tips and tricks about web design? Sign up for our newsletter, Revenue Weekly, to stay in the know-how!

1. HP

HP offers many category pages that provide users with a positive experience.

Let’s look at their desktop computer category page.

On this page, the user immediately sees a collage of desktop computers and accessories HP offers. When a user looks at this page, they can see high-quality photos of the desktop computers HP offers.

From gaming computers to all-in-one computers, users can choose different categories to explore different options.

If you scroll down the page, you’ll see a bar with icons for the different computer categories.

When users click on these different categories, they’ll see options for different desktop computers. If they see something they like, they can click the “Shop Now” button and explore that product.

 Why this category page design works

The design is simple and visually appealing.

Users can easily find their options in one place in a visually appealing format.

Having the option to choose each category and see some products in that category also makes for an A shopping experience. This feature streamlines the buying process and guides users to their next click.

Overall, HP provides a great user experience for people just starting to browse computers.

How you can use this category page design for inspiration

When you’re doing category page design, you must think about your audience and how they’ll browse your products. Like HP, you’ll want to use high-quality photos to catch your audience’s attention and get them interested in your products.

Make it easy for people to browse products in a category too. Creating sub-categories within your category pages makes it easy for your audience to focus on what matters most to them.

2. Costco

Costco makes it simple and easy for you to browse products within a specific category.

You can easily see the different types of products they offer within each group.

 Users can look at each category to figure out where they want to shop first. It makes it simple and easy for users to find the products they need in the right category. People also have the option to browse products based on same-day delivery or two-day delivery options.

Why this category page design works

This layout works well for people looking to browse products in different categories. It helps users find the category they need and get straight to the products they want.

How you can use this category page design for inspiration

Creating categories with photos is a great way to guide people to the right product listing pages. By creating a “Shop by category” section, you make it easy for your audience to get straight to what they need.

3. Staples

Staples takes a visual approach to their category page design.

Let’s take a look at their office supplies category page.

When you look at their product category design for office supplies, you immediately see a visual.

This visual element features numerous office supplies that Staples offers. As you scroll down the page, you see categories for different types of office supplies, like writing supplies, desk accessories, and folders.

Within each of these categories, you’ll see different types of products.

For instance, the writing supplies category features pens, pencils, and markers.

If you scroll down the page more, you can see categories for brand names.

This setup makes it easy for people to browse by brand name if they want a specific brand.

Why this category page design works

This category page works because it’s easy to find the information you need. People can find the right category and look at the products underneath it. It makes for a positive user experience that enables people to find products quickly.

How you can use this category page design for inspiration

Creating organized category pages will help your audience navigate your site better. You can break up your category pages into boxes, like Staples, to keep information separated and make it easy for your audience to browse your products.

4. Kohls

Kohl’s category page design allows users to browse the way they want to browse.

We’ll use their bedding and bath page as an example.

On this page, users see a bedroom filled with different bedding items. It has a slogan, “Create your comfort zone,” on the photo. This visual immediately draws users in and gets them to browse the page.

As you scroll down the page, you see categories for different bedding options.

From comforters to pillows, users can click on the product based on their interests. If you keep scrolling down the page, you can select bedding based on the size of your bed, making it easy to get to relevant products.

Why this category page design works

This product category design works because it allows users to get directly to the products they need. It helps them browse by product type or size. The page contains excellent visuals, so people know what they’re looking at, without reading the category name.

How you can use this category page design for inspiration

One of the best features of this category page design is the ability for users to browse sheets based on size. When you’re creating category pages, consider how you can build a better browsing experience based on this design example.

Think about how users shop for products and create a way to make it easier and faster.

5. Lowes

If you’re looking for simple, yet practical, category page design examples, Lowes’ category pages fit the bill.

Their category pages are organized, clean, and cohesive.

Lowes’ category pages for bathroom vanities and vanity tops are great examples. The beginning of the page lures people in by showing one of their vanities in a bathroom setting. As you scroll down the page, you see different countertop and vanity options available.

As you move down the page, you can shop for vanities by color or size. This setup creates a great shopping experience. It allows people to start browsing based on what they need, whether they’re looking for a specific vanity size or color.

Why this category page design works

This category page design example works because it fits with Lowes’ brand and keeps the brand image consistent. All the photos are the same style, creating a cohesive product category design. Additionally, Lowes created different ways to shop (color, size, look), that make it easy for users to find the right product.

How you can use this category page design for inspiration

Similar to Kohls, it’s great to offer multiple ways for your audience to shop so they can find the right product.

When you set up your category page design, think of the different ways people will look for your products.

Create different categories, like “by color,” “by style,” or “by brand,” to help organize your page and build a better browsing experience.

6. Apple

Apple is a pioneer of great design. From their phones to their commercials, every aspect of Apple is sleek, modern, and eye-catching.

Their category page design is no different.

One of the best category page design examples is their iPhone page. Right at the top of the page, you see icons that allow you to view phone options, as well as accessories that go with their iPhones.

This design makes it easy for users to see their options for the right product on this product listing page. As you scroll down the page, you see bold, high-quality photos of the iPhone. These visuals get people to stay on the page and browse more.

If you scroll further down the page, you’ll get to a section called “Which iPhone is right for you?”

This feature makes Apple’s design one of the best product listing pages because it allows users to see and compare the different types of phones before deciding which one is the best option for them.

Overall, Apple’s category page design is clean, attention-grabbing, and focused on the user.

Why this category page design works

Apple’s product category design ticks all the boxes. It reflects their brand style, provides stunning visuals, and makes it easy for users to weigh their options. It’s a visually dense product page, which keeps people engaged and gets them to learn more about the iPhone.

How you can use this category page design for inspiration

You can learn a lot from Apple’s approach to their category page design. From using high-quality images to creating product comparison features, there are many opportunities for you. Use this example to create product category pages that offer a better user experience.

Take these category page design examples to inspire your own

Your category page design is an integral part of your website.

Category pages play an essential role in helping guide people to the right products from your business. You’ll keep more people browsing on your site when you invest in designing category pages for your audience.

If you feel overwhelmed by this monumental task, WebFX is here to help.

We have an award-winning, in-house design team that can help you build a category page that wows your audience. Check out our portfolio to see how we can help you create a category page that works for your business!

To learn more about our web design services, contact us online or call us today at 888-601-5359 to speak with a strategist!