Back in the day, I used to assemble my wireframes and designs into a presentation deck, printed it all out, and then reviewed the work with my team/clients. Many designers still do this today, and it’s a bad habit developed in the agency world where everything is printed out and put up on a board for review. Some folks might not print everything out, but they’ll still view the static screens side-by-side on a computer screen. This might work for designs meant for print, but it’s a lousy way of reviewing product designs meant for devices.
First, it’s important to view your designs on the actual device they’re intended for. This puts your work into context and in its environment. You get a feel for the tangible things that you don’t get with a print or static screens, for example, if a button is positioned in a location where you can’t easily reach it with your thumb, or how scrolling with your finger feels a lot different than doing it with a mouse on a monitor. This kind of stuff isn’t visible in your designs, but it affects the overall experience.
Second, an interactive prototype gives you a better sense of how the experience flows from one screen to another, in both directions. A proto also allows you to experience the transitions and interactions by actually tapping on stuff, and seeing it react. Paper or static screens don’t offer this feedback. There have been plenty of times when I’m reviewing wireframes in Sketch, and everything looks and feels great, and then I discover issues in the design when actually viewing it as a prototype.
Wireframes and UI designs should be reviewed as a prototype with basic interactions, and on the device they were designed for. The time you usually spend assembling and printing a deck, use it to build a prototype instead. Tools like Invision, Marvel, Atomic and Pixate allow you to create functioning prototypes in minutes. These services also make it really easy to share your work with your team or client, so everyone can view it and add comments.
Why have a single static screen on paper, when you can have your entire user flow, with interactions, on an iPhone. You can’t beat it.
I’ve always approached design in a systematic way. Thinking about things in basic pieces that together form other pieces.
I remember assembling those plastic car models when I was a kid, and always starting with the basic parts, that by themselves didn’t form anything, but once assembled with other parts, they’d form a vital component of the car.
I’d isolate the rim, tire and bolts, and focused on them individually to form the wheels. Then I’d join the wheels with the axles, and suspension to form the front-end. And finally, the front-end would be assembled to the chassis to complete the car.
I did this for every section of the model. I never tried to assemble the complete car all at once. By doing this, I could ensure that each part was precisely assembled and functional, which would make for a better car model at the end.
This has been my approach to product design. Instead of designing a screen or page, my method is a design system consisting of Elements, Components and Templates. Each a different stage in the process.
Brad Frost’s atomic design is very similar to my approach, but with additional stages. I definitely recommend reading it.
Here is how my system works.
Elements are the core parts of a design. They’re the buttons, input fields, checkboxes, radio buttons, drop-down, icons, colors, type styles, grids, and so on. These are some of the standard elements, but each design will dictate its own set.
I think of elements as the “seeds” of my design. They start off as a single thing, and then grow into something more useful when combined with other elements.
First, I design the elements individually. I really like to focus on how the element is formed, and the details associated with it. Then I look at how the elements work together and adjust from there.
A component is set of elements that are assembled into something functional. They’re self-contained and usually focus on doing a single task. Combine a header style, a paragraph style, a close icon, a color, and a button to form a modal. A search form, footer, and a filter selection are all examples of simple components.
Components can also be more complex, like a persistent shopping cart. These type of components still focus on a primary task, but they also allow you to do secondary tasks. For example, in a persistent shopping cart, its main job is to display cart items and total price, but it can also allow you to delete an item, or change its quantity.
Templates are where components come together to form the interface and experience. For example, a contact template on a website will be made up of a navigation, form, and footer components. Templates can represent a single section of a website, and an entire user path, like a registration flow.
I create two kinds of templates: UX templates and UI templates.
A UX template is a wireframe where the content structure and user experience are defined. Here I start piecing together the components, moving them around like puzzle pieces, slowly forming the experience and content structure.
The UI template is where I shape the layout and refine the visual styles, using the UX template for structure. As I mentioned above in the Elements section, I start with designing the individual elements. I then design the components and full templates, and refine any elements that need it. For example, a button might look perfect on its own, but it ends up being too big as part of a component or template.
Folders and Libraries
This system is also great for creating a folder structure, and building pattern libraries.
My top level folder is always the project, usually based on the platform, for example iOS, Android, Web. Within the project folder lives the system I’ve outlined above:
I assign the numbers to keep the folders in a specific order.
Within each main folder I break down the category. So for example, inside the Elements folder you’ll find folders for Buttons, Colors, Icons, Input, Typography, etc. In Components you’ll find folders for Navigation, Search, Footer, etc. Inside each of these folders you’ll find a design file for that element or component.
The Templates folder is a little different. Same idea, but within a template folder I will break it down into two folders: UI and UX. This keeps things more organized. Sometimes components will have wireframes associated with them, so the Components folder can be divided this way as well if needed.
Files are named using the following convention:
So, for example, the first version of a website homepage template done in Sketch would be named web-homepage-v1.sketch.
Not only is this your filing system, but it also acts as your pattern library. The entire system is clearly organized, with every file easily accessible.
If you build these files in a smart way, like using Symbols and Layer and Text Styles in Sketch, or Smart Objects in Photoshop, you save a ton of time when making a change because you just do it in one place. Symbols in Sketch are a bit limited in this case, since they don’t sync across files, but it’s still a good way of setting up your files.
This system also makes it really easy for people new or unfamiliar with the project to find and navigate the files. Great for when adding new members to the team, or sharing files with companies or clients.
Benefits of Systems
For me, designing this way just makes sense. A systematic method provides consistency for the user interface, user experience and functionality. It also offers great flexibility and efficiency, because by designing at the elements level, instead of focusing on a single screen, you’re creating a design that’s modular and scalable.
This method works for me, and it might work for you. I’ve opened up the comments section to get a discussion going. I would love to hear from you if you’ve implemented the system in your workflow, or have any questions or comments.
I’ve been working on an app with Jordan Halvorsen called Cull, and we’re getting close to launching it. Cull essentially allows you to view your web stats from services like Mint, Google Analytics, Twitter, Facebook, Vimeo and more. It presents the data in a simple, beautiful way. It’s all gesture-based, and very simple to use. I will be sharing more of the design very soon.
I primarily write about print design on this site, but most of the work I do is User Interface and User Experience design.
Until recently, Photoshop was the only real application one could use for UI design, even though it wasn’t designed for it. It’s kind of like using a road bike to bomb down a mountain. You’ll eventually get to the bottom, but you’ll bang yourself up good on the way. The feature set, and the workflow, of PS is not optimized for UI design. We accepted it, and kept trucking along, only because we had no other choice.
Sketch is a vector-based graphics app by Bohemian Coding that offers a set of features, and workflow, specifically built for UI design. I’ve made the switch to Sketch at home, and at work. It’s been such a breath of fresh air.
Some of the benefits of Sketch are:
Super easy to use. The app is very intuitive, and never feels complex or overwhelming, but at the same time it’s powerful. You can get comfortable using it within a few hours.
It’s vector-based. All elements can easily scale without degrading, including drop-shadows, gradients, blurs and strokes.
Text is rendered exactly like it’s displayed in an app or on a website in a browser.
Smart guides. You can easily line things up and see the pixel distance from one object to another. You don’t understand how much time this saves.
Built-in grids. ‘Nuff said!
iOS mirroring. Using their iOS app, Sketch Mirror, you can see your designs on your phone in realtime.
These are some of the great features you’ll find in Sketch.
It’s not all perfect, though. There are some issues with it, but they’re minor. The app is still a little buggy. It’s in the early stages, so it’s expected. Things like zooming in and out can cause some weirdness. It doesn’t handle raster images that well, but that’s expected from a vector-based app. Artboards and export features are only focused on iOS. Would be great to include other platforms like Android and Windows Phone. None of these are deal-breakers and the app just gets better and better with each release.
Now, I know this sounds like a paid advertisement, but I can assure you that I haven’t received a dime from Bohemian Code. This is all of my silly love for this app. It’s really changed the way I design, and it’s exciting.
Down below I’ve put together a list a resources to help with the transition from PS. A lot of great info here on the app, its benefits, how to use it, and the workflow.
I’m going to open the comments in case you want to ask questions.
I don’t write much about apps, but I plan to do so more in the future.
Today, Facebook announced a beautiful app called Paper, that will be released February 3rd. From the video and images, it looks like a great experience. It seems really well designed, and I love the gesture based interactions. I’m looking forward to trying it out. The site is also really well done. Simple and to the point.
From what I’ve read, Mike Matas was responsible for the design, but not 100% sure.