background preloader

Design Articles

Facebook Twitter

Brand to interface: A slice of a product design process. Here’s a slice of a product design process—synthesizing a client’s brand and turning it into product concepts that then lead to a full visual design system.

Brand to interface: A slice of a product design process

Step 1: Brand intake Different agencies have their own spin on this step, so this isn’t the end-all-be-all process, but what I’ve been a part of is a hybrid of the Cooper Brand Experience Workshop. Here’s a crude outline of the workshop: Grab around 100 photos of different products and other things while keeping your client’s industry in mind (cars, watches, packaging, abstract shapes, data visualizations, movies, drinks, logos, celebrities, etc.)Tile the photos on the wallAllow stakeholders to react to these photos while thinking about how their brand should be experienced—they can mark positive and negative reactions with red and green stickers (this takes some coaching around subjectivity)Draw a spectrum, from positive to negative reactions, and hang a few key photos along the spectrum. Photo credit: Cooper.

Step 2: Brand synthesis. Unleashing The Full Potential Of Symbols In Sketch. Advertisement Today, too many websites are still inaccessible.

Unleashing The Full Potential Of Symbols In Sketch

In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! No matter whether you are designing a whole design system or just a couple of screens, symbols in Sketch will help you keep your file organized and will save you a lot of time in the long run. But first, a bit of a backstory. The apparent lack of features in Sketch, compared to the alternatives full of menus and stacked panels4 that I was used to, was in fact one of its major advantages and helped me to design faster. What are symbols? This concept is not exactly new (nor is it exclusive to Sketch, to be honest). In this article, I’ll outline how to make use of symbols in Sketch in order to unleash their full potential, going from the most basic situations to some more advanced use cases. Tip 1: Be Organized Link. Intro to the 8-Point Grid System – Built to Adapt.

As a designer you’ve probably heard the term grid whether you’re designing a website, a magazine, or a mobile app.

Intro to the 8-Point Grid System – Built to Adapt

We have grids for all sorts of content arrangements. We use column grids to align content horizontally. Baseline grids to vertically align bodies of text. Soft grids and hard grids to describe how strictly we adhere to them. I took interest in the 8pt grid system after hearing Bryn Jackson avidly talk about it. What’s the problem? I’ve used design systems like Bootstrap or Foundation to jumpstart web projects, even tried to build a few similar systems myself. How to Create a Fullwidth Gallery with the Divi Gallery Module. This post is part 1 of 5 in our mini series titled 5 Impressive Divi Gallery Layouts and How to Create Them.

How to Create a Fullwidth Gallery with the Divi Gallery Module

Stay tuned for all five unique examples of the gallery module and tutorials on how to achieve them! Galleries are one of the most important tools in web design today. Whether you’re a designer wanting to showcase your work, a photographer wanting to display your photos, or a business wanting a prominent portfolio–-the need for online galleries goes on and on. With the Divi Gallery Module we can create awesome, eye catching galleries that’ll draw in our website visitors. In this Divi mini series, we’re going to go over 5 Impressive Divi Gallery Layouts and how to create them. My hope is that whether you’re a newbie at Divi and web design or if you’re an experienced Divi expert, you’ll be able to apply these ideas and will be inspired to take your Divi galleries to the next level!

Today’s Before & After: The Divi Gallery Module Default Gallery Module Hover Over 2) Label your files. Learning from Lego: A Step Forward in Modular Web Design. With hundreds of frameworks and UI kits, we are now assembling all kinds of content blocks to make web pages.

Learning from Lego: A Step Forward in Modular Web Design

However, such modularity and versatility hasn’t been achieved on the web element level yet. Learning from Lego, we can push modular web design one step forward. Rethinking the status quo#section1 Article Continues Below Modular atomic design has been around for a while. So far, we have been doing it on the content block level—every block occupies a full row, has a consistent width, and is self-contained. Achieving similar modularity on the web element level is not as easy. I’ve been using Bootstrap and Foundation for years, and that’s exactly what would happen when I’d try to write complex layouts within those frameworks—rows nested in columns nested in rows, small elements in larger ones, all with paddings and margins of their own like Russian dolls. It was not the prettiest thing I could do to my stylesheets, but it was still tolerable. Learning from Lego#section2.

How To Make An Insanely Powerful Business Card - The Daily Positive. Sympli: complete collaboration tool for designers and developers.