Umar Hansa walks through the setup to make sure you're getting the most out of both. It doesn't mention Chrome DevTools Autosave which I haven't tried yet either but I've heard good things.

Direct Link to Article — Permalink

Developing With Sass and Chrome DevTools is a post from CSS-Tricks

There are plenty of great startup websites using signup forms to capture early users. Both email newsletters and user accounts are two methods for bridging new people into your startup. A crucial aspect to a successful registration form is the user interface design.

Often times designers will overlook forms in favor of other typical webpage elements like headings, graphics, sliding panels, etc. But in this article I would like to focus on various trends within login & signup forms. These are all very typical in startups which is why I have chosen to focus a bit deeper on these concepts. But generally each design principle could be applied into any style of website.

Informative Signup Tips

One of the best points to start building on would be helpful tips/hints for the user. Especially if your form has multiple inputs which may be somewhat ambiguous. These hints may be sprinkled on top of the UI as smaller labels, or even hidden as popup bubbles. The design is what gives your form character. The interface is what provides benefit to the user.

The registration page for Startup Stock Exchange is a great example of this technique scaled to a large proportion. As you focus on each individual input field you will find hints added into the right sidebar area. Each field is a common aspect like your name, email address, and account password. Visitors may skim these hints quickly and since they aren’t obtrusive to the overall website, everything blends very naturally. This is definitely the look & feel you might aspire towards when building a signup page.

Desktime is a little different and it doesn’t use the exact popup/popover tips I was explaining. Instead you can sign up with the typical email/password combo or use Facebook direct connect. If someone is not familiar with this feature, they can simply hover the question mark icon and you get a nifty popup dialog which explains how OAuth connect works. Theoretically you could expand these popup bubbles onto any form element as needed.

Catchy User Interfaces

The aesthetics of your webpage design are almost as important as the usability factor. Obviously you want people to be using your forms and not to get confused along the way. But that doesn’t mean you have to forfeit beautiful design aspects for the sake of user experience. In fact, I would argue the UX can be expanded with the use of brilliant design colors and textures.

I really like the example from Spacefinity because it is located directly on their homepage. The site is an online marketplace for physical storage needs. Each of the input fields is designed in a very unique way – almost flat on the page. It takes up the entirety of the site layout and definitely captures your attention. The goal is to catch visitors early and then entice them to fill out your registration form. Using a memorable design is the perfect solution to give off the vibe that you know exactly what you’re doing (even if you don’t!).

I want to contrast this example with the Vidyard login page. I would not say this form interface is all that spectacular in custom CSS design. But the webpage itself does catch your attention with the company logo and the adorable vector robot peeking out from the side. It gives off a nice branding effect which showcases a broader aspect of what the site is all about.

And remember that making mistakes on your own is part of the learning process. Don’t be afraid to jump in head-first with your own ideas and gauge visitor reaction. Then you can study which design ideas further draw people into your site and which ideas repel them away.

Mobile App Logins

There are plenty of new startups which are based solely on mobile devices. Now some of these projects will spill over into the web, which often leads to a customized web interface. But mobile app login forms are generally a lot more minimal than other startups. Plus you won’t often find registration/signup forms on the site because mobile products typically require that you download the app to register an account.

I am referencing the login page from Life360 as one such example. If you already have an account it is super easy to gain access to your profile and to reset your password. No extra elements or design features aside from the list of mobile device support. This is crucial for startups which are heavily based in the realm of mobile smartphone applications.

And why is that? Well, because the majority of any mobile startup’s functionality is within the mobile app itself. You can have people logging onto Instagram from their PC but the majority (if not all) of the submitted photos are done from a phone. So along with any login pages you should also offer visitors a chance to look into your app on the iOS/Android stores.

OAuth Connect

I mentioned OAuth earlier and I feel it is one of the bigger points moving forward through 2013. So many people are using networks which support OAuth connect well beyond Twitter or Facebook. Nowadays I see websites offering to authenticate my account through Google, Instagram, and even Github.

I would note that forcing users to register solely through OAuth may be considered a poor decision. Not everybody wants to connect their personal accounts into other networks, while others actually prefer the idea since it saves on the hassle of memorizing passwords. The signup page on DogVacay is a nice example where you can directly authenticate with Facebook or register a brand new account with just your e-mail address.

The signup form is originally hidden until you click a link expanding the email/password signup. By doing so it keeps the page a little cleaner and easier to skim at a glance.

Now an interesting tidbit worth discussing is the major benefit of connecting through OAuth. You can import the user’s profile picture, username, email, and other account settings too. The signup page on Listia actually offers new users a bonus of 50 points when signing up through Facebook connect.

This concept of incentivizing registration is nothing new, but these direct connect OAuth apps are still fairly new and growing rapidly. It is worth considering if your target market includes users who may already be using such popular social networks – the signup process is a lot quicker and there are no passwords to remember, either.

Email Invitations

Early-access signups and email newsletter forms are a much different subject. For these interfaces you are only asking for a single input (email address) but they can also be a lot harder to gain traction. My reasoning is that visitors are more interested in checking out your services than getting a newsletter delivered to their inbox. Registration is a more active process because you can signup and then directly gain access into your account within minutes or even seconds.

The email invitation form on Pokke has an awesome animated effect when you focus on the input field. This does blend nicely with the entire website and it is a great example of one startup’s landing page. But my biggest problem is the lack of further interaction on the page. When your product isn’t ready this is quite acceptable but it still leaves me wanting more. It would be nice to create a new redirect page where you supply more information on the product and a potential release date for beta invites.

Another fullscreen background landing page for Bolt uses many of the same elements. But this site is designed for a mobile application instead. The signup form takes either your e-mail address or phone number. It is only one field and very easy to signup – but where is the ambition? If people don’t immediately know what your product does then they probably won’t go research on their own.

Try to surround your invite signup fields with more details about your product or service. People want to know in advance what they are signing up for and why they should give out their email. So be sure that your invite forms give visitors a reason to use them!

Quick Yet Efficient Designs

The final point I want to leave with is to keep all these forms as efficient as possible. This doesn’t mean you have to remove fields just to trim the form smaller, but instead try to make the progression flow quickly and almost effortlessly. I tend to find that bigger input fields make me feel more accomplished as I fill out each one.

Looking at the signup page for TribeHR you can see there are only two required fields. A subdomain for the new account and the user’s e-mail address. Talk about simple! Typical registration forms will have a few more fields than this. But keeping everything simple, organized, and easy to read will expedite the time it takes for new signups.

A really cute new startup named Web Maily is an e-mail service built for kids. Their signup page looks like it was designed specifically for a toddler. Just input your requested e-mail address, password, and check the box for accepting terms & conditions. All of the interface elements are big and clean – nothing else on the page to distract from the signup process.

While you are building your own signup/login pages keep asking yourself questions about the interface. Is it easy to just start typing immediately after the page finishes loading? Would you (or your mom) have the patience to use the form? What could be done to make the form even more effortless for the user? These questions will not always have perfect answers but if you keep asking questions then you’re at least working in the right direction.

Conclusion

These ideas should bolster a newfound confidence when attempting to build more enticing web forms. There is no foolproof solution to start bringing in boatloads of new registered users. It is all about testing the waters and not being afraid of failure. Because through our screw-ups we can learn what doesn’t work and what does work. Along with my ideas feel free to share your own thoughts in the post discussion area below.

The post Startup Design Examples of Login Forms and Signup Pages appeared first on Treehouse Blog.

Responsive design is everywhere, and whether you’re using a framework or writing media queries yourself, some elements on your page are bound to move or scale.

If your media queries are based on browser dimensions and the browser is resized, then your elements will jump into place. Adding a little animation to those properties is a nice touch for any responsive site.

Today, I’m going to show you how easy it is to add that extra touch, by animating the width and opacity of elements between media queries.

The Layout

For this simple example we’ll use a div, containing 3 smaller divs. The divs will scale according to the size of the browser window. The HTML is simple:

<div class='layout'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
</div>

Now, our main CSS will place the three boxes inside the main div and also, in line with a margin to the right:

.layout {
    width:960px;
    height:600px;
    background:#b34d6f;
    margin:auto;
}
.box {
    width:300px;
    height:200px;
    margin-right:25px;
    background:#4d77b3;
    display:inline-block;
    margin-top:50px;
}
.box:last-child {
    margin-right:0px;
}

This is our main layout, without media queries, this layout will not adapt if the viewport changes. Now that we’ve got the basics in place, let’s add the media queries.

Adding media queries

Media queries are used frequently nowadays. Most web designers understand them, but in case this is your first time, here’s a quick refresher: media queries check the capability of the device you are using (width, orientation and resolution) and they run specific CSS if the conditions specified for the media query are met. In our example, we’ll use two media queries that will check if the browser is smaller that 960px, and whether it’s smaller than 660px. We’ll then set the width of elements accordingly, we’ll also hide the last child div so that the other two have more space:

@media screen and (max-width:960px) {
    .layout {
        width: 870px;
    }
    .box {
        width:270px;
    }
}
@media screen and (max-width: 660px) {
    .layout {
        width:570px;
    }
    .box {
        width:170px;
    }
    .box:last-child {
        opacity:0;
    }
}

That’s all we need for our media queries. Note that it’s important that this code is placed beneath the original CSS code above so that the media queries overwrite the code above them. If you test your file now you’ll see the size of the divs changing and the opacity of the last child div change when you resize the browser window.

You’ll notice that to hide the last child div we’re setting its opacity to 0 instead of setting it to display:none. That is because we want to be able to animate the property; opacity has many different degrees, whereas display is either true or false (and therefore can’t be animated).

Adding the animation

CSS animations have proved to be really handy when performing these little animations that we used to run in jQuery, such as animating color, width and opacity.

Because we want the page to animate as a whole, we use the * CSS selector and set up our animation. CSS animations degrade gracefully, but you’ll want to add the vendor prefixes too, so that there’s as much support as possible:

*{
    -webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;
}

You can see the finished result here.

Conclusion

Adding simple animations like these, are a nice finishing touch to any website. A few lines of code adds a really nice polish to your responsive site.

Have you animated media queries in a project? What effects have you achieved? Let us know in the comments.

Featured image/thumbnail, scale image via Shutterstock.

PhotoBulk: Batch Photo Editing for Mac – only $4.97!

I've had the opportunity to be a guest on a couple of podcasts lately. I'm on episode 18 of The Gently Mad podcast with Adam Clark.

I'm also on Authored Content episode 22 (video) with Morten Rand-Hendriksen, James Williamson, and Ray Villalobos.

On both I get the chance to talk about some projects I've worked on both past and present as well as hot topics of the day!

Speaking of podcasts, ShopTalk is going great. We've had some fun episodes lately like with Raquel Velez and Val Head. Also a RAPIDFIRE episode, which there will be more of in the coming months since we air those when Dave or I has to be gone a particular week.

Speaking of ShopTalk, Dave and I did a live ShopTalk show at Front End Design Conference. We typically record "live", but this was our first time in front of a live audience. It was super fun and hopefully we get to do it again sometime. We're hoping there is a good audio recording of it so we can post it as a real show, so it'll come across iTunes n' stuff.

It was the fifth year of the Front End Design Conference and it was just fantastic as always. If you're looking for one to attend, make sure to mark this one down as soon as they announce it next year.

I was stoked to see CodePen used by a number of presenters to show off demos during the conference.

Speaking of CodePen, that's going really well also. We've had some pretty big features roll out lately like using other Pens as resources, including including HTML, and showing errors right in the editor.

We have tons more features and refinements large and small underway so keep coming back for more. We work on it all day every day. In fact the whole CodePen team is at my house for a few weeks for a super code jam.

There has been some good threads in the forums lately like Opinions on CSS Frameworks, Computer for Web Programming, a thread about Macaw, and How big should my background image be?. I like seeing that the opinion threads are alive and well, as well as specific technical stuff getting solved left and right.

You may have noticed a decent amount of guest posts happening here on CSS-Tricks lately. It wasn't planned really, they just kind of happen naturally through conversations I have with people who email in about ideas. If you have an interest in writing a guest post to be published here 1) have an idea that you think is really cool and you really care about 2) do some research / make demos 3) contact me and I'll check it out 4) use this template for creating the article.

I don't have a huge budget but if your article is awesome, takes time, and doesn't benefit you otherwise - I'm sure we can work something out.

CSS-Tricks Chronicle XIV is a post from CSS-Tricks

Using computers to virtually test new molecules could lead to new types of solar cells.

Using donated computing power and drawing on the theory of quantum mechanics, Harvard researchers have computationally screened 2.3 million organic molecules for properties relevant to photovoltaic applications and then organized them into a searchable, sortable database. The new library, which was released to the public today, will help guide the search for new organic photovoltaic materials.

Mobile user experience design is maturing. One way to gauge this is to look at the tools at our disposal. Prototyping tools such as Balsamiq, Axure and Fireworks enable us to build wireframes and click-dummies, helping us to explain the targeted user experience. Cross-browser frameworks such as PhoneGap, Zurb Foundation and jQuery Mobile help us to create prototypes using the native languages of the Web: HTML, CSS and JavaScript.

Why? The Case For Sketching

We seem to be in a better position than ever to design great experiences in virtually no time. However, these tools come with a hidden cost: they tempt us to skip the key step necessary to creating a well-designed product — which is to take the time to understand the problem we are given.

That’s why I suggest to start using sketches to understand the problem and to come up with a concept before firing up your favorite tool.

Right now, you are probably thinking one of the following:

“We have a tight deadline and there is no time for doodling. We need to get started.”

“Designing in [insert your favorite tool] is faster by far. I need to get results quickly.”

“We need to present results to our [client or project partner or peers]. We cannot show them hand-drawn stuff.”

“Sorry, but I really can’t draw.”

Not only have I heard these objections a couple of times before, I’ve also said all of them myself.

Defining the Problem and the Solution

Sketching enables us to explore the problem space and define the solution space at the same time. It frames our current understanding of the problem, while also helping us to figure out possible solutions.

While we sketch out our thoughts, new ideas will emerge. The ambiguity and lack of detail in sketches foster new ideas. Here, ambiguity is a good thing, because we will automatically try to fill in the blanks in our heads. That’s what makes sketching “generative”: it captures the ideas we already have and sparks new ideas. As Bill Buxton says in Sketching User Experiences:

“Learning from sketches is based largely on the ambiguous nature of their representation. That is, they do not specify everything and lend themselves to, and encourage, various interpretations that were not consciously integrated into them by their creator.”

By sketching different solutions to a problem, we can explore them without immediately committing to one of them. This gives us new insight and raises new questions. Sketching is essentially a brainstorming exercise.

The “Cost” of Sketching

The fastest way to get something out of our heads is to grab a pen and a sheet of paper and quickly sketch it out. Trying to do the same in our favorite prototyping tool takes more time: We have to create a new project, decide on the right library to use, place our little rectangles on the canvas, draw little arrows connecting our little rectangles, rearrange everything a bit to make it look nice — and suddenly 30 minutes or more are gone.

If we don’t like what we see on a sheet of paper, we can just toss it in the bin and start over. Using our prototyping tool, however, makes throwing stuff away harder because of the time and effort we’ve spent creating it — even if the idea wasn’t a great one. Starting over is harder. Paper sketches, on the other hand, are cheap and fast.

The fastest way to capture and evaluate a concept is to sketch it out.

Sketching as a Communication Tool

However worn out the saying is, a picture does say a thousand words. Sketching enables us to walk our peers and stakeholders through our current understanding of a project. We can use various visual representations to explain different aspects of the project (we’ll cover the most common ones in the next chapter). In The Back of the Napkin, Dan Roam says:

“Pictures can represent complex concepts and summarize vast sets of information in ways that are easy for us to see and understand, they are useful for clarifying and resolving problems of all sorts.”

Our peers will be able to point out gaps in our thought process and discuss possible solutions and alternatives with us. They will most likely understand our shorthand and be able to give us feedback on the details of our concept. Presenting our idea to others also allows us reflect on our concept; we see mistakes and can find better alternatives just by walking through it.

Sketching as a Collaboration Tool

Sketching is a powerful tool for involving stakeholders early on in the design process. The following chicken-egg problem is typical when defining the process: Stakeholders are not able to formulate a complete set of requirements before they have seen some visual representation of the solution, but we designers are reluctant to start working on a solution before we are sure that the requirements we have been given are stable — we want to avoid unnecessary revision, which would result in extra work.

A way out of this dilemma is to start sketching possible solutions in a collaborative workshop, such as a design studio session (see Will Evans’ article “Introduction to Design Studio Methodology”). We can walk stakeholders through our concept (and alternatives) step by step and explain to them the impact of their requirements on the design.

Sketching also has a low barrier to entry, allowing non-designers to participate. (Whether you hand out pens to stakeholders is a matter of personal taste and of much debate. You’ll have to make up your own mind.)

Because sketches are rough and unfinished, giving feedback is also easier. Some people hold back upon seeing a pretty finished-looking version of a page because they think of all the work that must have surely gone into it. High-fidelity visuals also tend to distract people — instead of focusing on the concept, they are tempted to comment on the visual design or on minor details. Sketches keep them focused on the core concept.

The only thing you’ll need to overcome is your reluctance to show your unpolished work to others.

Sketching Is Not Drawing

A common misunderstanding is that your sketches have to be pretty. But interaction design is not art class. Your sketches don’t need to look good; they only have to convey your idea. They are supposed to spark discussion and generate ideas; they are unlikely to be framed on a wall. As long as you are able to draw boxes, arrows, circles and stick figures, you are good to go. As Joshua Brewer notes in “Sketch, Sketch, Sketch”:

“The sketch is not the end goal. The end goal of the drawing process is what you learn while sketching. So don’t worry if you can’t sketch.”

Learning how to sketch is beyond the scope of this article, but look at the following presentations, article and book to get the basics:

• “The ‘Art’ of Sketching Interfaces” (slides), Jason Mesut and Sam Smith
• “Sketching 101” (slides), Jackson Fox
• “The Messy Art of UX Sketching,” Peiter Buick
• Sketching User Experiences: The Workbook, Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt, Bill Buxton (Morgan Kaufman: 2011)

How To Sketch

Now that I have (hopefully) convinced you that sketching should be a part of your workflow, let’s talk about what to sketch in a mobile project.

Divergent Sketching

In the beginning, you will want to capture different ideas for your mobile app or website. Start sketching different versions of a single key screen or parts of it. Your goal is twofold: to generate a lot of different ideas, and to explore and evaluate them — at the same time. The more ideas you come up with, the more options you will have to choose from later on. This process is often called “divergent sketching.”

A useful tool for this type of sketching is a multi-page template. It offers enough space to sketch six different versions on a single page, and it provides some guidance on the available screen space. By showing different ideas side by side, it makes comparing and discussing them later on easier.

A lot of templates are available online (I use Erik Loehfelm’s most often). Pick the one you like.

Wireframe variants for global navigation. (Large version)

The screenshot above shows six different ideas for an app’s main menu (plus vivid proof that my sketches are not pretty). I don’t often come up with six versions (I like to tell myself that I am a structure-first person), but I do try to create at least three variants of a single key screen. Because this is brainstorming and you will want a lot of options to discuss later, quantity is your friend here.

If you happen to be short of ideas, browse some mobile UI galleries for inspiration (such as Inspired UI, Pttrns, Lovely UI and UI Parade). They showcase solutions grouped by topic and feature (for example, main menus, chat windows). Include the things you like in your sketches, and mix them with your own ideas.

Make a habit of titling each sketch. This will make it easier to differentiate between them and refer to them later on. I add notes and annotations to explain the sketches and the thought processes behind them (such as strengths, weaknesses, trade-offs compared to other concepts, questions, new features, etc.). Labelling and dating the sheets are also a good practice.

Convergent Sketching

Once you have sketched multiple versions of a screen, pick the one that best solves the problem. Unfortunately, a single sketch will rarely check all of the boxes. In most cases, you will have to combine ideas or parts of ideas into a single winning concept. To do this, you will need to explore in more depth by making a more detailed sketch on a single page. Use the white space to annotate. Jot down all questions, new ideas, important or unclear areas, and things to discuss. This will help others to understand your thought process. This activity is often called “convergent sketching.”

For more information on divergent and convergent sketching, see Leah Buley’s presentation from FailCon 2010, “Good Design Faster,” and Brandon Shauer’s article “Sketchboards: Discover Better + Faster UX Solutions.”

Creating UI Flows

After boiling your ideas down to a set of key screens, the next step is to explore how they work together. For this, create a few UI flows (i.e. a series of key screens) that showcase how a user would use your solution to accomplish a task. UI flows highlight which interface elements are used (for example, which button is clicked or which gesture is used) and how the system responds (for example, with an animation, transition, pop-up dialog or new screen). They also show key screens in different states (for example, initially empty and then later filled with content).

You can visualize different outcomes within a UI flow (such as a list of search results versus an empty list). Your flow would then no longer be linear; different branches would show different outcomes. But try to limit the number of branches in a single UI flow. Each branch increases the complexity, making your flow harder to understand. It also makes them harder to explain.

UI flows visualize how a user gets from A to B. (Large version)

You don’t need to sketch all use cases; pick the ones that are important and will be used most. The Pareto principle offers a good rule of thumb: prototype the 20% of functionality that will be used 80% of the time.

I usually start sketching one of the key use cases to try to come up with a way to solve it. I will highlight the interactions on the screens and (usually) connect the screens with arrows. I’ll explain each step and label the key screens. As always, I annotate wildly.

For inspiration on how to sketch mobile screens and UI flows, look at Gisele Muller’s article “Inspiring UI Wireframe Sketches”; MOObileFrames, a blog that showcases mobile wireframe sketches; and Wireframes, a website by Jakub Linowski. You can also use Jakub’s “Interactive Sketching Notation” (PDF) in your UI flows.

Steps to Take

To give you some more context and to show you how the three activities above relate to each other, here are the steps of a typical sketching session:

• List the information you have and what you want to capture.
• Make a first set of sketches (such as variations of a key screen or an initial UI flow).
• Review the sketches yourself.
  • What are the strength and weaknesses of each variant?
  • Are the UI elements and data consistent (i.e. the same elements are used for the same task)?
  • Do you show data the same way?
  • Are the interaction options clear?
• Get some feedback from others. Start with peers and continue with potential users if possible.
  • What are their first impressions?
  • What do they like best? Why?
  • What do they dislike? Why?
  • What is not clear in your sketch?
  • What improvements have they suggested? Why did they suggest them?
• Iterate on the concepts.
  • Can you combine different strengths of separate concepts into a new concept?
  • Can the sketches be clarified?
  • Can steps be reduced or simplified?
• Review the results in light of the initial feedback.
  • Have new questions come up?
  • What insights have you gained?

As you can see, a lot of these are “Why?” questions. This is because sketching is about trying to understand the problem while simultaneously working towards a solution. Write down all of the questions that come up during sketching next to the sketches themselves. This will guide you towards the right concept.

Beyond Sketching

After you’ve created sketches of the key screens and the main uses cases, you will want to try out your concept live on a real phone. Apps such as Pop and Protosketch enable you to import pictures of sketches and turn them into a prototype. This very fast and low-fi method will give you a feel for the concept’s interaction. Both apps allow you to define clickable hotspots and page transitions, which make a prototype’s interaction more realistic.

Alternatively, import your screens into a more advanced tool such as Axure and build a prototype in there.

Whatever method you choose, your goal is to test the concepts quickly and with little effort on a real phone.

Take-Aways

Sketching helps you better understand the problem you are trying to solve and lets you visualize possible solutions. It is a fast and inexpensive way to brainstorm and to test out a lot of UI ideas before committing to one. Sketching speeds us the concept creation and iteration phase and makes it possible to get feedback early on, when changes are easy to make.

For your next sketching session, keep the following principles in mind. They will help to keep you on track:

• Be lazy.
  Don’t try to reinvent the wheel. Use a template to guide your sketching.
• Get inspired.
  Browse design pattern libraries and mobile UI galleries, and look at wireframe showcases. Take what you like, mix it with your own ideas, and come up with something new.
• Stop at good enough.
  You sketches need to get your ideas across. Don’t get lost in (unimportant) details.
• What would Pareto do?
  A small set of your solution’s features will be used the most. Focus on them. Which 20% of the solution will be used 80% of the time?
• Be consistent.
  Use an existing sketching notation and/or develop your own. This will make your sketches reliable. Peers will understand your style and will need less time to look through the sketches to give feedback.
• Annotate everything.
  During sketching, new questions, ideas and problems will pop up. Write them down; otherwise, they will get lost.
• Be open.
  Make your sketches visible. Pin them on a wall, and always show them to others to get feedback.
• When in doubt, sketch some more.
  If you are unsure about a solution, start sketching variations. List their pros and cons and get feedback to see what works best.

Happy sketching!

(al)

© Lennart Hennigs for Smashing Magazine, 2013.