UI/UX Design

User Interface and User Experience are the fundamentals for not just how your site looks but how it operates, the color of a button but also where that button takes a user on a journey through a user flow. Together these work to define a look and feel for your site and how users access and navigate and can shape and define how users feel about your brand.

User Interface

Basic building blocks of a website, typography, color, look and feel.

Color

Picking a color pallette requires an in-depth understanding of color theory and psychological effects of colors, the goal is to create a unified color language representative of a family - colors that work harmoniously together, are readable and pass ADA and WCAG guidelines, and follow a sense of brand identity.

Is your color pallette monochromatic, is it responsive to device offering a light mode and a dark mode, bold saturated colors or muted subdued colors or pastels. Do you want to invoke a time period and bring nostalgia for 80's neons?

Typography

Choosing a font or set of fonts helps define a brand in ways that aren't always thought about. Serifs can feel old and stuffy, whereas sans-serifs can feel modern and clean, splashes of script fonts or handwritten looking fonts can add an air of whimsy. What is the goal of your branding and the feeling that you want your users to get from your design, how does that affect your identity and the way your users view your brand.

Atomic Design

Atomic design principles are a methodology wherein you create building blocks in the design system that then go on to craft larger and larger pieces of the overall design, creating a cohesive language between elements and eventually the page and site. Color and typography for example inform button styles, and buttons are used on forms whose own elements draw from the same atoms of color and typography. A page s built from larger components that are built from the smaller pieces. It is a vertical integration where the design system and page structure carry a back and forth language creating a system that functions and feels connected.

User Experience

The holistic overview of your site's functionality and how the user navigates throughout.

Information Architecture

At the very basic this is a site hierarchy and site mapping using card sorting to bucket and align the overall structure of a site. How can pages and ideas be broken apart or how do those pieces fit together? What's a logical arrangement of menus and submenus and the site as a whole?

User flows

Ask yourself what are the steps required to order something from an online shopping experience, how do you search for an item, pick a color, add it to your cart, sign up and add your credit card and shipping address, and finally checkout. This is the heart of user flows

Journey Mapping

Journey mapping expands on user flows and asks where the pain points are, the number of clicks it takes to complete a task. Its more wholistic and expanded than a simple user flow, and perhaps starts before the user first comes to your site, and ends long after they've left. It handles multiple touch points and has more focus on emotion and feeling than a user flow might have. There is more of an emphasis on user interaction and journey over time and holistic understanding of the entire user experience.

Personas

Do you present different experiences based on user types or states, is a page or information or action defined for example by if a user is logged in versus not? Do you cater to different types of customers and need to provide different experiences based on demographics or some other touch point? New user versus returning user? Personas can affect information architecture, user flows, and journey mapping into buckets targeting certain traits and present information and actions along all those lower parts crafting wholly unique experiences or subtle minute differences.