07/20/15 • 17 min
Episode 32: The Web Design Equation
In this episode:
Feeling overwhelmed with your web design project? Too many things to keep track of? Today Sean shares the system he uses to manage projects — keeping him focused on solving problems instead of worrying about what he’s missing.
iTunes • Overcast • TuneIn • Pocket Casts • RSS
Show Notes & Links
Apps & Tools Mentioned
Sketch 3 by Bohemian Coding
Sketch Mirror by Bohemian Coding
Designing like a Mathematician
Whether it’s designing a website, a mobile app, or something in between, there are five parts to the design equation: Constants, Variables, Constraints, Maximums, and Minimums. When confronted with a large project, it’s helpful to identify what bucket each element of the screen falls into. From there, it’s easier to iterate and refine towards a final solutions. So let’s explore these in a little more detail.
But before we can explore those ideas in more detail, there’s one methodology that will help you out immensely: Atomic Design
Unlike print design, designing digital products, e.g., websites, apps, lend themselves to so many variables that are outside of your control that it can get overwhelming.
But First, Biology and Atomic Design
Atomic Design is a concept that Brad Frost first presented in 2013, and has been refining ever since — even creating Pattern Lab, a tool to help implement this approach to front-end web development. It breaks down the web page into 5 different building blocks:
The idea behind Atomic Design is to create reusable patterns through combining atoms, molecules, and organisms to create templates. With these templates, they can be translated into specific pages. The deeper dive into what each group is, and how it’s defined can be found on Pattern Lab’s about page. For a basic overview:
These are the single solitary building blocks of a web page. These would be your headers (h1’s and h2’s) , buttons, and input fields. Just single entities that live by themselves.
Take one atom, and combine it with another atom. There’s your molecule. It can have more than two atoms, but the goal is that the molecule performs one function, and it performs it well. Take a block quote with a citation at the end of it. That would be combining the block quote atom with the citation atom to create that molecule.
Organisms are combinations of molecules and/or atoms. The best example of an organism would be a header. You have navigation (atom), a logo (atom), a search box, input text, and a search button (all together a molecule). This fits right in with what an organism should be.
This would be a fully composed layout of what kinds of information should be displayed on the page, but not actually filled in with information. T
Now, if you are to take a look at your Facebook Profile, you can see everything that I just mentioned, but filled out with content that makes it a real page.
Onto the Equation
Now that you know what atomic design is, and how it helps you to identify and design reusable patterns, let’s get into the nitty gritty.
When working in an agile environment, it sometimes feels as if the only constant is change itself. But within a project, there are things that become staples and will never change, or at least they hopefully won’t change for an extended period of time.
Constants can be items such as:
- Brand Logo
- Company or Product Name
- Color Palette
- Existing Content
These are more or less the essentials to a basic website
Other than those basic fundamental parts of a web design, there are tons of other constants that are used within ...
out of 5
eg., What part of this podcast did you like? Ask a question to the host or other listeners...
Generate a badge
Get a badge for your website that links back to this