Hack Design
Categories
Welcome Introduction Typography User experience User interface Graphic design principles Mobile Interaction design Front-end design Product design Advanced user interface Advanced user experience Context and next steps

Welcome

Hello World

Welcome to HackDesign! Lesson 0 will prepare you for the lessons you'll start to receive every week, which will guide you towards design literacy and proficiency. Excited? This week, it's just one link. It happens to be the most powerful design resource I am personally aware of, and I'm excited to share it with you...

Wells Riley
6333866d 1dba 4f5f 8ec3 bca293391b15.png?ixlib=rails 2.1

Introduction

What is design? Why is it important?

Why design? What purpose does it serve? It's not purely aesthetic, nor wholly analytical and functional. When considering the design of your projects, you must think about how everything fits together in harmony - some would call this a holistic approach, but it's really the only practical way to approach design problems, as I see it...

Wells Riley
6333866d 1dba 4f5f 8ec3 bca293391b15.png?ixlib=rails 2.1

Dive Into Typography

In this lesson, we'll dive right in and learn a few quick – but really important – rules about typography. Before we start the course, let's define typography quickly. Typography can simply be described as the art of type. It's everything you can think of – like fonts, sizes, and readability...

Kerem Suer
Keremsuer@2x.jpg?ixlib=rails 2.1

The Amazing New Mobile Web

It's no surprise that the amount of people browsing the web on a mobile device is speeding past desktop usage with no sign of slowing down. More and more people are getting their hands on a pocket sized device that is connected to the internet every minute. Designing for this split landscape of mobile and desktop to bring the user the best possible experience is an absolute must...

Luke Beard
9e34ae4c 5eca 483a 8eeb d9b6e595b5d2.jpeg?ixlib=rails 2.1

Know Your Tools

The phrase "a poor workman always blames his tools" has always bugged me — poor tools hinder the quality of your work. Great workers blame their tools too! If they're not performing, they should be blamed. You simply can't do your best work without amazing tools and the skills to wield them well. Great tools let us do the impractical and the impossible. They give us super powers...

Marc Edwards
Marcedwards@2x.jpg?ixlib=rails 2.1

Typography

Typography in Product Design

A few weeks ago we were introduced to the art of type, and gained a basic understanding of the rules surrounding it. But where does it all fit in? Of what value is typography to the interfaces we interact with on a regular basis? We put extreme emphasis into the code and pixels pertaining to our products. But both are rendered useless without the content...

Jared Erondu
Jarederondu@2x.jpg?ixlib=rails 2.1

Exploring the World of Typefaces

When we look back at black and white movies, we marvel at the results they could achieve without color. Despite this, we can agree color film was a good invention: you can still shoot in black and white, but color gives an extra dimension and opens up a lot of new avenues for those who want to use it...

Sacha Greif
Sachagreif@2x.jpg?ixlib=rails 2.1

Responsive Typography In Action

Typography has always been at the foundation of design & communication. We're at an interesting point in time where we're being given previously unknown amounts of control over our work, but also new & scary challenges as we try to adapt to an ever-changing sea of devices and contexts...

Jon Gold
Jongold@2x.jpg?ixlib=rails 2.1

Typography in Practice, and Where to Go from Here

The goal of this last lesson in typography is to provide a wide-angle view of this fascinating field, and highlight resources from some of its best practitioners to direct you as you continue your studies beyond this course...

Moiz Syed
Moizsyed@2x.jpg?ixlib=rails 2.1

User experience

An Introduction to User Experience Design

It took our industry a number of years to fully understand how important user experience (UX) is to everything that we build. Now that we can measure and confirm the relationship between good UX and successful websites, UX skills are in high demand: PayScale shows a median wage of about $41k for web designers, $50k for web developers and $77k for user experience designers...

Dan Zambonini
Danzambonini@2x.jpg?ixlib=rails 2.1

Rapid Prototyping Tools & Best Practices

Rapid prototyping can mean the difference between quickly finding your path to a successful product and toiling away at a pipe-dream for months. Putting together a prototype will force you to think through the details and user experience of your product ideas. Once you have a prototype, you'll be able to show it to people and collect detailed feedback...

Joe Robinson
Joerobinson@2x.jpg?ixlib=rails 2.1

Defining & Expanding User Experience

Newton's 3rd Law says, "To every action there is always opposed an equal reaction". In my opinion this is the best way to describe an experience. Experiences ultimately define our lives. When we are young, we have no experiences thus our artifact is of little knowledge. When we are old, the opposite...

Patrick Algrim
Patrickalgrim@2x.jpg?ixlib=rails 2.1

Understanding the User in User Experience

Effective user experience starts with a good understanding of your users. Not only do you want to know who they are, but you want to dive deeper into understanding their motivations, mentality, and behavior. This deep insight into your users will help you keep your product focused on delivering a great experience. But how do we know what our users really want?

Grace Ng
Graceng@2x.jpg?ixlib=rails 2.1

User interface

Vector Interface Design

User Interface design plays a very important role as the translator in the communication between the user and the application's back-end or core functionality. It's purpose is to make the user feel comfortable interacting with and understanding your product. Most of a UI designer's job is spent thinking – the rest is executing the vision using the tools which work best for you...

Jeff Broderick
Jeffbroderick@2x.jpg?ixlib=rails 2.1

The Medium and Mechanics of Iconography

Iconography is arguably the Esperanto of the digital world. Icons cannot replace the written word, yet they serve as cognitive waypoints for areas of interest and/or interaction. Iconography can also be an efficient way to communicate a concept in a small amount of space, which is increasingly important in the era of the shrinking screen...

P.J. Onori
Pjonori@2x.jpg?ixlib=rails 2.1

Making the content flow: introducing responsive web design

Almost three years ago now, Ethan Marcotte introduced responsive web design. So far there were as many lovers as haters and many argued about the difference between responsiveness and native, mobile design. In the era of almost unlimited connectivity and wide variety of devices our designs can no longer be static, 960px wide layouts...

Karolina Szczur
Karolinaszczur@2x.jpg?ixlib=rails 2.1

UI Design with Purpose

The purpose of UI design, above all else, is to deliver content and make visual sense of well planned out UX. The often debated battle between flat versus skeuomorphic design poses us a pivotal style decision in how we allow the content to communicate through our designs...

Travis Silverman
Travissilverman@2x.jpg?ixlib=rails 2.1

Graphic design principles

Building Color Confidence

Color is a powerful form of communication. We are so attracted to color and so repelled by it that even if the coolest design were presented to us, if we didn't like the color, we wouldn't like it at all. The objective of this lesson is to help build color confidence. This means being able to create harmonious and effective color combinations in our designs...

Joanne Chang
Joannechang@2x.jpg?ixlib=rails 2.1

White Space: Designing the Invisible

No matter what visual style is hot, no matter what great product you're using, every piece of good design uses "white space" well...

David Kadavy
Davidkadavy@2x.jpg?ixlib=rails 2.1

Achieving Visual Hierarchy

One of the key principles of design is visual hierarchy, which encompasses almost everything you’ve learned on Hack Design so far. Whether you’re dealing with screen or print media, you have content—words and images—that needs to be organized into a layout. Visual hierarchy is the organization and prioritization of content as a means to communicate a message...

Lise Statelman
Lisestatelman@2x.jpg?ixlib=rails 2.1

Deciding What's Good: Design Principles

Design is (by nature) a subjective thing. It's also a team sport. When making design decisions about look or feel or content, disagreement is common and tensions can emerge. So how do you decide what "good" is for your product? Good design happens when a good user experience meets a solid brand identity...

Kate Rutter
Katerutter@2x.jpg?ixlib=rails 2.1

Mobile

Designing your first iPhone App

It's undeniable that mobile devices have become a huge part of modern society. Similar to what the web did, iOS has revolutionized what digital products can be by giving them a home. The huge difference, however, are the two foundations. iOS is much different than the web in that it's able to provide a native home with a tightly controlled experience for it's applications...

Brian Benitez
Brianbenitez@2x.jpg?ixlib=rails 2.1

Designing for Mobile Web

If we've entered any particular age or genre in web development, it's most likely that of accessibility. We can now view web pages on almost any device and, WiFi permitting, from almost anywhere in the world. What's even cooler is that we finally have the tools to make web pages usable, functional, and beautiful without designing entirely separate apps for the mobile experience...

Julie Ann Horvath
Julieannhorvath@2x.jpg?ixlib=rails 2.1

Mobile App Analytics Is Not That Special

There are a handful of special concepts that are important in mobile analytics, but most of the concepts people use in building out custom web analytics are very transferable to mobile app development. 4 of the 5 items below come from the general analytics or web analytics ecosystem – but I'll ask you to think about how they apply to your mobile app.

Kyle Wild
Kylewild@2x.jpg?ixlib=rails 2.1

Using Icons in Interfaces

With the proliferation of mobile devices, icons play an increasingly important role in interface design. Icons can help aid in scannability, save space at smaller screen sizes, and afford clear, tappable targets. That said, icons can cause user confusion and frustration when used poorly...

Brent Jackson
Brentjackson@2x.jpg?ixlib=rails 2.1

Interaction design

Power to the People – Mastering Human-Centered Design

The importance of user-centered design is well-established. This blunt statement from Dieter Rams says it all: "In my eyes, indifference towards people and the lives they lead is the only sin a designer can commit." But it's a significant challenge to translate high-level, human-centered concerns into the actual clicks and taps of a software product...

Chad Mazzola
Chadmazzola@2x.jpg?ixlib=rails 2.1

Content Strategy for Interfaces

The design of your idea – its simplicity, usability and ability to hook and delight people – is the reason your product could succeed when others fail. But design isn’t just about color swatches, logos or the placement of buttons and labels. It’s about creating an environment that tells people the story of your product and shows them how to use it...

Amy Thibodeau
Amythibodeau@2x.jpg?ixlib=rails 2.1

Creative problem solving and everyday design

Design is about an open and inspired way of working. It's about solving problems, and that's applicable to anyone, whether you're a CEO, graphic designer, middle school teacher, or MBA student. Abstracted from it's traditional graphic or industrial roots, design is now being applied to a wide variety of new spaces and pushing the bar of what many industries can achieve...

Andy Hagerman
Andyhagerman@2x.jpg?ixlib=rails 2.1

Effective Behavior Design

Part of designing a user experience is convincing the user to behave a certain way in order to reach a specific outcome. For example, right now I'm asking you to read articles, watch a video, and fill out a form to become better skilled at design. Behavior design gives us an organized and specific model to define and foster behavior change...

Alex Baldwin
File.jpeg?ixlib=rails 2.1

Cultivating Compassion

Being a great designer isn’t just about devising the best possible solution; it’s about making sure we’re solving the right problem. To do so, we need to hone our listening skills and deepen our capacity for empathy — both for our users and our colleagues. This requires being present, open-minded, caring, patient and accepting...

Whitney Hess
Whitneyhess@2x.jpg?ixlib=rails 2.1

Front-end design

Designing with Code

Some designers are terrified of touching code and others simply prefer other tools...

Chris Lee
Chrislee@2x.jpg?ixlib=rails 2.1

It's All Just Systems Design

As someone who designs and codes, I find new similarities between visual design and programming every day. At Segment.io I work on all of our visual design, but also on our Javascript library and components. I've found the same principles to apply to both fields, and I think it's crucial for more programmer and designers to realize that...

Ian Storm Taylor
Ianstormtaylor@2x.jpg?ixlib=rails 2.1

Designing with Grids

The human brain has a penchant for identifying patterns, decoding them, then recoding them for later reuse. Not only does this cycle make it easier for us to understand the world around us, but it helps us constantly improve the tools we use to interact with it. Perhaps one of the most salient manifestions of this in the design world are grids...

Reda Lemeden
Redalemeden@2x.jpg?ixlib=rails 2.1

Summer Vacation!

We hope you've been enjoying Hack Design so far! As we prepare to finish up the second half of the year, take this week to go back and complete any lessons you haven't finished yet. If you're all caught up, go you! Try hacking on a project this week and design something you couldn't possibly have made eight months ago...

Wells Riley
6333866d 1dba 4f5f 8ec3 bca293391b15.png?ixlib=rails 2.1

Product design

Designing Quality Products

It's time to stop churning out software and start creating quality products. Ideas are a dime a dozen. Design and Development tools are advanced. Let's focus on what really matters. Great products begin and end with great design. Design should influence all product decisions. Even fundamental business questions like what to build, or how to sell it, should be treated as design decisions...

Nathan Manousos
Nathanmanousos@2x.jpg?ixlib=rails 2.1

The Little Things Matter

As the bar for great design keeps getting higher and higher, having a keen attention to detail will help your products stand apart from the crowd. Your app should delight its users, whether that's through a beautifully executed feature, organic interface design, or even just having a bit of fun...

Kyle Bragger
Kylebragger@2x.jpg?ixlib=rails 2.1

Designing Habit-Forming Products

How do companies design experiences to repeatedly engage users? Designing for habits builds upon the principles of consumer psychology to create new routines. I've spent the past 2 years researching how products create habits and I've included a few articles to pique your interest. As you'll soon learn, the world is becoming a more persuasive, and potentially addictive place...

Nir Eyal
Nireyal@2x.jpg?ixlib=rails 2.1

A Holistic Guide to Product Design

Product Design is the process of identifying a market opportunity, clearly defining the problem and then developing a robust solution to take to market. An effective Product Designer (in the software space) possesses multidisciplinary skills across business, user research, interaction design and visual design. Previous lessons focused in depth on some of the aforementioned disciplines...

Joseph Huang
Josephhuang@2x.jpg?ixlib=rails 2.1

Advanced user interface

Animation, Direct Manipulation & Feedback

When we talk about Animation and Direct Manipulation in interfaces they can often seem like completely disconnected concepts. You might explain direct manipulation as a user sliding a slider; or animation by showing a list updating by shifting around...

Ben Taylor
Bentaylor@2x.jpg?ixlib=rails 2.1

The Human Element

User interfaces consist of so much more than a series of mockups, typography choices or error states. The interactions that happen beyond the static are those that introduce life into your interface — enabling you to reward your users’ proficiency, increase positive emotions, and introduce new methods of interactivity that have permeated app design for years...

Scott Hurff
Scotthurff@2x.jpg?ixlib=rails 2.1

Essentials to tame a wild beast - Pushing prototypes with Quartz Composer

Recent shifts in mobile design means we must also shift our thinking. The use of motion and animation plays an essential part in conveying the personality of your work. Think of your favorite apps and Im sure you can pick out an interaction coupled with animation that makes each unique as well as adding function...

Dave O Brien
Daveobrien@2x.jpg?ixlib=rails 2.1

Prototyping Advanced Mobile Interactions with Framer

As motion and animations become more and more important in UI design, designers have started searching for the best tools to help them add a layer of interactivity to their work. You might have heard about After Effects, Quartz Composer or Xcode before in this context...

Cemre Güngör
Cemregngr@2x.jpg?ixlib=rails 2.1

Advanced user experience

The All Encompassing User Experience

One thing product designers and companies must try their best to excel in, is the art of creating a product that is built with empathy. In doing so, you have the ability to create a great user experience. UX is more than just visual and interaction design. It’s in the way you market, engage users, simplify the ease of use with your product, customer service and more...

Cat Noone
Catnoone@2x.jpg?ixlib=rails 2.1

Designing With Your Ears

Design starts before you even draw your first sketch. As a designer, your goal is to impact people's life in a positive and meaningful way. But how to make sure your product will actually solve a real problem? How do you make sure your target audience will actually use it? Here are a few links that will help you build empathy for your user and teach you how to design with your ears.

Arthur Bodolec
Arthurbodolec@2x.jpg?ixlib=rails 2.1

Win The Internet With A/B Testing

Designing websites and building products for people is an exciting job. You get to use creativity and problem solving skills to create, in some cases, world-changing solutions. The most exciting part of this, however, is being able to run user-research sessions and A/B tests to see how your customers actually use your product...

Manik Rathee
Manikrathee@2x.jpg?ixlib=rails 2.1

Design Your Mobile App For Multiple Platforms

These days it has become commonplace – if not necessary – for mobile apps to be designed across multiple platforms. Whether you’re starting from scratch or adapting an existing app to a new OS, the biggest challenge when designing for multiple platforms is balancing the consistency of branding and functionality with the conventions of individual platforms...

Nikki Will
Nikkiwill@2x.jpg?ixlib=rails 2.1

Context and next steps

Kickstarting Your Design Career

Formal design education is lacking in many areas, which means being proactive about your education in the beginning stages of your career will greatly benefit you when you step out into the real world. A solid body of work in your portfolio will get you noticed, but it's your soft skills, the aspects that are often pushed aside in favour of technical mastery, that will get you hired...

Janna Hagan
Jannahagan@2x.jpg?ixlib=rails 2.1

How To Get Your First Design Job With No Experience

Last week, we examined a few different paths designers can take in their careers. Developing your soft skills—and gaining confidence in them—is essential in transitioning to the professional world of design...

Devon Ko
C929fa27 e80b 41fd 9329 7e1f2c40648f.jpeg?ixlib=rails 2.1

Why Design?

“Questions are places in your mind where answers fit. If you haven’t asked the question, the answer has nowhere to go. It hits your mind and bounces right off. You have to ask the question – you have to want to know – in order to open up the space for the answer to fit.” – Clayton Christensen When learning, you must question before you can receive an answer...

Alex Baldwin
File.jpeg?ixlib=rails 2.1

Vim as a Design Tool

For many designers, editing and writing text comprises a large chunk of our work. Whether it's writing down ideas, editing code, or comprising an email, text-editing makes up a non-trivial part of our day. With this in mind we'll explore how and why we could use Vim, a command-based text editor, to improve our design workflow.

Adam Morse
Adammorse@2x.jpg?ixlib=rails 2.1

Finale: A field guide to being better at design by being self aware

Being great at design is as much about knowing the theory as it is about knowing your own areas of growth as a designer. As the Hack Design course comes to a close with this last lesson, I want to point to a few resources that will help you understand yourself better as a designer. These are questions that, as designers, we have all asked ourselves at some point of time...

Tuhin Kumar
Tuhinkumar@2x.jpg?ixlib=rails 2.1