So You Wanna Make An App? Start Wireframing!

What is wireframing?

A wireframe is an architectural blueprint for your web-site. Before contractors go to work building the web-site of your dreams, they need a clear vision into what exactly you’re trying to construct. How many pages is your site going to have? Each page should have it’s own wireframe. At a much deeper level, a wireframe is very useful in determining how the user interacts with the interface. So as you conceptualize your web-app always keep the end user in mind.

How do I begin wireframing?

Well first, get some inspiration! Visit your favorite web-sites but this time really think about how those sites are laid out. Most of them probably have a universal navigation bar (nav-bar), a body, and a universal footer that includes contact information and all the links typically found in the nav-bar. Here’s an awesome tool called Wirify that lets you view any page as a wireframe. Try it out on your favorite sites.

Unless you have some experience using UI/UX tools like Sketch or Adobe Illustrator, your best bet is to either start with a pencil and paper or use this nifty online tool called Balsamiq. Balsamiq has a huge library of reusable components which you can drag and drop very easily to design your wireframes. Forget about things like colors and typefaces in the beginning, just focus on boxes. At it’s core, a web-site design begins with drawing boxes and then later these boxes will be filled with things like pictures, buttons, links, icons, maps etc… The navigation bar is probably going to be on every page of your site so it’s a great place to start! It’s just a rectangle with a bunch of links/buttons inside of it. Focusing on the nav-bar first will force you to think about all the other pages you would like your users to easily navigate to.

Next is the body of the page. Since you’re starting out on the homepage, make sure to clearly inform the user of what your site is. It could be a 1-3 sentence mission statement or a collage of images that illustrate what it is the user has landed on. Depending on your concept, the body could be broken up into many sections/boxes each containing pertinent information. Same as the nav-bar, start out with one big rectangle and draw smaller rectangles inside of it with labels that refer to what type of content you would like inside.

Lastly, design the footer. Sometimes the footer is just a bigger version of the nav-bar. It’s bigger because it might contain a contact form, a google map with a location marker and/or a quote. Think of it this way, after a user scrolls through your site and reaches the bottom you want to provide a way for them to continue the journey or you want to facilitate some kind of call to action. The last thing you want is a user scrolling to the bottom, losing interest and just leaving. Providing a bunch of options will help you retain attention.

simple-wireframe

What should I focus on when I’m wireframing?

Focus on user experience. If you show any one of your friends your black and white simple wireframe and they can’t understand how to get from one page to the next, you’re doing something wrong. Every good web-application has a flow to it and it’s almost impossible to get lost or not know where you are. If it’s an e-commerce site the flow is going to be designed to make the transaction process as simple as possible with the fewest amount of clicks. There’s this rule of 3-clicks that many companies have adopted, it states that your product(s) should never be more than 3-clicks away from the home-page. In fact, the fewer web pages you have the better. Usually, having a separate page just for user login is unnecessary; you can have the user login from any publicly visible page.

What kind of notes should I add to my wireframe?

If your wireframe is exceptional, which is rarely the case, any web-developer will review it and very quickly grasp what you’re trying to accomplish. Notes are great for letting developers understand what data you want to be visible on these pages and how a user is going to request certain data. Logged-in users will typically be able to view more information than non-logged-in users. When a user clicks a link that’s part of an accordion-like-element and that accordion section opens up, what data would you like to be rendered in that section? Does that data depend on other factors e.g. other users or time of day? Well placed notes could be very informative to developers. The more complex behavior your app exhibits the more notes your wireframes need. If you feel like notes are cluttering up your app, create a separate page(s) for notes.

Wireframes usually start out simple and could end up looking something like the sketch below, but it’s important to start out from a very high level perspective and gradually work your way down.

new-york-times-wireframe

 

Sketch A Logo

My full-stack ambition has led me to Sketch. I always wanted to learn how to use photoshop or illustrator but never quiet had the time. I started using Sketch a few weeks ago after stumbling on this article. Sketch is a fairly new designer-centric application that’s really gaining popularity. Sketch is primarily focused on user interface design. Everything is already in vector, so you don’t have to worry about designing for multiple devices, and delivering assets is a breeze. It’s super lean and intuitive, the interface is bare bones and not nearly as cluttered as photoshop and illustrator. Programmers are notorious for opposing anything that has to do with design and with bloated adobe products you can’t really blame them. I argue that the wider your range of expertise the more valuable you are. And honestly making something like a neat logo, as I’ll demonstrate in this post, isn’t terribly difficult in Sketch!

Let me briefly discuss some of the awesome features in sketch that any full-stack developer would appreciate. If you’re wireframing in Sketch you don’t have to worry about your design translating to CSS. So all of the textures, gradients, shadows etc… are easily coded for. This is because all of the tools in sketch can only produce attributes that can be converted to CSS. With photoshop you can go crazy with all the options available and have a very hard time translating your outlandish design to CSS. If you’re familiar with Rails you know how many decisions are made for you so you don’t have to waste time, Rails confines you but in a very good way. Any design in Sketch can easily be exported to the web. Many designers use ~3 different apps for 3 different tasks: wireframing, UI design, and vector logo graphics. Sketch is a one stop shop for all 3 of these tasks. Lastly, familiarity with grid systems is essential to building responsive sites. Sketch has a customizable grid system. Most of the time you’ll probably be using the default 12-columns but sometimes you’ll want to fit more content on the page and go with 16-columns.

Screenshot 2015-08-07 15.39.40

These are the 2-logos I was able to sketch, with Sketch…. hi-hat! I’m currently a student at Turing so I figured why not redesign the school logo. Turing is mainly a back-end developer program so design excursions like this are usually side projects. So how does someone with zero experience with this software quickly build a neat vector logo? Designing like anything else is essentially problem solving, and the best approach is to break everything down into tiny manageable chunks, just like programming. I sketched some stuff in my notebook to kinda have an idea of what I wanted and took it from there.

I split the logo up into a bunch of pieces: circles, lines, and text. Creating and styling each element taught me a little bit more about the software and anything I got stuck on I would google or find the 1-person I know who uses it. The biggest challenge was getting text to neatly wrap around an oval or any shape for that matter, thankfully Sketch has something called “Text on Path.” Believe it or not the big-logo on the right consists of 22-peices, 19-peices for the one on the right! After building all of the components separately I chunked some of them together for the assembly process, and wa-lah!