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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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?
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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.
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...
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...
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...
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...
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...
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...
Front-end design
Designing with Code
Some designers are terrified of touching code and others simply prefer other tools...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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.
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...
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...
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...
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...
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...
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.
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...
