Being a young designer—I’ve been in the professional field just under two years—I was thoroughly excited to be heading to the Big City for the GenerateNYC conference. Like, beyond excited. I had never been to a design conference; heck, I had never even been to New York.
I had the opportunity to attend the GenerateNYC conference this spring. I'll be doing a series of posts on the amazing design insight I took away. Read my previous posts below:
I was even more excited to absorb all that I could about web design from my colleagues: At Sanger & Eby, we’re always learning, always adapting, and always seeking new ideas that can help our clients achieve their goals. It’s what we do; it’s who we are.
On top of how entertaining all the speakers were, we realized we’re already doing a lot of the things touched on, and we learned a few things to improve upon along the way—so cheers to that! In the next few weeks, I’ll be talking about some of the key ideas and best practices from the conference, as well as how we bring them to life for our clients.
First, I want to talk about…
Biology + Design = Magic
When you get the parts right, the whole will follow suit; it’s a natural fact. Brad Frost, the keynote speaker, spoke about the concept of Atomic Design. In a nutshell, it’s about designing the content and not the container.
“Web is not a platform. It’s a continuum.” — Jeremy Keith
In today’s world, there’s a new device released hourly, it seems, and none of them house a standard screen size—so how on Earth are we suppose to design a layout for all of them?! We don’t. That’s the beauty of atomic design. We design what’s going on the page and not the actual page, at least not initially.
We’ve seen it work for our clients. Take Clark State Community College. A college website is delivering a vast array of content to a number of audiences, and needs to be able to reach them wherever they are. When we began the redesign, after sitemap and wireframe approval, we began by looking at content types. The information that needed to be communicated called for tables, statistics, buttons, text fields, content callouts, contact information, photo callouts—the list goes on and on…
So that’s how we started. How does each of those pieces look? How do they fit together? We created a system specific to Clark State Community College that would fit any screen size, as well as their growing content needs.
When you start with the content, the container doesn’t matter. Once we’ve created a component library full of buttons and charts and photo galleries and drop-downs and … (you get the point), we start figuring out how each piece will fit together to create a system—a responsive system—that will work in any situation: mobile, tablet, desktop and everything in between. Atomic Design leads to Responsive Design, and the result is magical.