Sophie Houser and Andrea Gonzales, creators of Tampon Run and authors of Girl Code.
Coding knowledge can be used to do more than build a great website or land a lucrative job. It also has the power to inspire personal growth and shine a light on social issues.
Andrea Gonzales and Sophie Houser learned this firsthand when the video game they created, Tampon Run — in which players throw tampons at bullies and tackle taboos surrounding menstruation — went viral in 2014. Gonzales and Houser, then teenagers, met as students at the all-girls coding program Girls Who Code in New York City and created the game as their final project.
Revamp your Rolodex with tips from this pro, Andy Whelan! Illustration by Rob Goodman.
Think about the people who have made the biggest impact on your life — the friends, family, and teachers who have invested in you as a person. They push you to be better, can be a sounding board for bold new ideas, and have your back when you’re facing life’s harshest challenges.
The road to professional success can be tumultuous, and as you navigate the highs and lows, it’s equally important to have these kinds of people in your work life, too. Rewarding professional relationships are critical to your career and need to be nurtured as authentically as ties to friends and family. If you find yourself floating around solo on your jobs journey, there’s a good chance you may be doing it wrong.
When it comes to building a reliable professional community, we could all benefit by taking a lesson from career guru, speaker, and teacher Andy Whelan, a career coach at General Assembly’s San Francisco campus.
This piece has been adapted from Talent Economy. Read General Assembly and Whiteboard Advisors’ full white paper, Investing in Talent, here (PDF).
Amid complex external and economic pressures, companies must face the reality that the nature of business is changing. The pace of technological change continues to accelerate, and in an era in which the shelf life of skills is less than five years, it is critical for employers to prepare their workers to adapt to the shifting demands of work in the digital age.
The good news for employers is that current federal policy provides tax-advantaged opportunities for companies to support employees’ educational aspirations. Rooted in sections 117, 127, and 132 of the tax code, educational tax benefits are somewhat unique in that they provide a double benefit: They are both deductible for the employer, and tax free to the employee.
In this digital age, employee roles and responsibilities are changing as quickly as industries are evolving. Most jobs available today don’t have higher education programs, standardized exams, or textbooks that definitively tell people which skills they need in order to land them. Without this industry standardization, employers also struggle; they don’t have clear boxes to tick when evaluating job seeker’s qualifications. How can companies get a better sense of which skills job candidates and employees need? How can job seekers become more savvy about developing and communicating their qualifications?
At General Assembly, we work every day to answer these two questions. We provide job seekers with the competencies they need to be successful in today’s workforce. We also help employers understand how to evolve with their industry and connect with skills and talent that will enable them to grow. But in order to provide guidance to employers and job seekers most effectively, we must have a clear definition of each field ourselves. As the job landscape changes and General Assembly grows, we constantly refine our offerings and frameworks to better unite our product and message.
Let’s look at the field of digital marketing, which has seen exponential change in the last few years.
Every industry — from tech, to finance, to retail — needs user experience (UX) designers. These master problem-solvers work to create on- and offline experiences that put users’ wants and needs first.
Harnessing skills like user research, wireframes, and prototyping, UX designers have a unique perspective when it comes to understanding the interactions between users, business goals, and visual and technology elements. For companies, their work fosters brand loyalty and repeat business. For consumers, it means frustration-free online experiences, intuitive mobile apps, efficient store layouts, and more.
When you have the perspective of a UX designer, “you start to see design gone wrong everywhere,” says Beth Koloski, who has taught the full-time User Experience Design Immersive (UXDI) course at GA’s Denver campus. “You stop blaming yourself for not understanding badly designed software.” She says she admires when someone gets design right because she knows “how incredibly hard it is to make something easy and seamless and actually get it out into the real world.”
With digital media surpassing TV as the largest channel for ad spending in 2016, digital marketers are more important than ever. Through clever concepts, smart storytelling, and a keen understanding of audience behavior through analytics, these data-driven brand specialists move business forward through strategic email, paid search, social media, and beyond.
Recent data from General Assembly’s Credentials division — which helps companies determine the capabilities of team members and potential hires through assessments and more — suggests that digital marketing is an open playing field for anyone who can acquire the skills needed to succeed.
But once you have the skills, how do you land the gig?
All aboard! It’s never been a better time to embark on your digital marketing journey.
We all seek experience. Personally and professionally, experience captures what we’ve done and what we have the potential to do. In hiring, prior experience is used as a shortcut to qualify job-seekers for interviews, job offers, and higher compensation. This shortcut works well in steady fields where the practices of the industry rarely change. If someone has done it before, they can probably do it again.
But does this shortcut work in a field that is dramatically changing? Marketing is an occupation undergoing rapid change. Adults now spend six hours a day with digital media, compared to three hours a day in 2009. As consumers move social, professional, and personal interactions online, advertising has followed. 2016 was the first year that digital media overtook TV as the largest channel for ad spending. Successful digital campaigns now require proficiencies across a host of new platforms, and the question for veterans and aspiring marketers is: Does general experience in marketing still matter?
An interface is a means by which a user interacts with a computer, service, or product. It’s a way of simplifying a complex system so that it’s easy to use. In this day and age of modern digital services and businesses, interfaces are omnipresent. Every day, we interact with websites, apps, and even voice assistants that all require some sort of interface for us to use.
For a business, having a well-designed interface for your app, website, or even your internal dashboards or CMS means easier actions and easier ways for users to find information. This ultimately ensures that your users take advantage of your product in a seamless way. A good user interface is one that’s largely unnoticeable. When a user starts noticing clashing colors, misplaced buttons, or unreadable text, they may feel frustrated and leave, never to return.
The practice of designing interfaces can take years to master and teams of people to execute. An interface is the result of the collective thinking of user experience (UX) designers, visual designers, developers, and other business stakeholders, whose different perspectives ensure that each user’s experience is simple and clear. UX designers plan and structure the interface, assuring that has been tested with users, works properly, and meets their needs. They then work with visual designers to craft the interface’s appearance so that it’s easy to use and actions are simple and clear to understand. This is all done in close collaboration with web developers, who build the interface in code and bring it to life.
It might seem like a lot of work, but interface design fundamentally rests on a few simple guidelines and principles. If you ask these questions and follow these steps, you’ll have an interface that enables your users to easily take advantage of your what your business has to offer.
Who Are Interfaces Designed For?
Like with any product design, it’s important to set a clear direction and goal before you actually pick up any tools. A “user experience” or “understanding your users” phase helps you research the business goals of your product and the people for whom you’re designing it. Before you embark on any design for your product — especially one for its interface — try answering these questions:
What’s your product’s ultimate goal? What do you want users to do with your site or mobile app?
Who is going to use your product? What do they want or need?
What are the benchmarks for success? What interfaces work well and why? Which don’t work as well?
On what devices will your product be used? Where is it going to be used the most?
Having the answers to these questions informs every decision you make with regard your interface design and helps to avoid any confusion about what it needs to do.
Using Wireframes to Plan an Interface
Wireframes are the digital equivalent of a house’s blueprint. They provide a clear understanding of how an interface will function — the layout of the text, buttons, images, and more. Most importantly, creating a wireframe helps you establish hierarchy (the order in which you want your users to read information on your interface). Wireframes are meant to be quick and dirty, which helps you focus on your design’s logic rather than its looks.
Wireframes are simple ways of demonstrating the layout of your interfaces and how they will work.
Wireframes should be low fidelity; i.e., you shouldn’t pay attention to how they look, but rather how they work. Use only three shades of gray, along with clean and simple fonts, symbols, and iconography. These elements only represent the structure of the interface, so there’s no need spend a lot of time crafting it. Think of it this way: If your interface doesn’t work when it’s low fidelity, then it’s probably too complicated.
While there are many approaches to creating wireframes, they all share a common goal: to plan what you need to design for your interface with a solid framework and demonstrate how it will function. As long as your wireframes achieve these goals, your method doesn’t matter!
How Visual Design Powers Usable Interfaces
The common misconception is that adding visual design to a product is only “making it look pretty.” While attention to visual elements does make a interface good-looking, it also makes it more usable, as colors, typography, and images can all provide clarity to a user when they’re using your product. When it comes to your interface’s visual design, consider the following techniques.
Grid guides give you a framework, making it easier to fit all of your interface’s elements together and maintain consistency within the structure of your site.
A grid is the first thing you should include when designing an interface, as it provides a rigid structure in which all your elements will sit. It is a set of lines that helps designers align elements and fit them together (like a giant puzzle). Grids guide a natural flow of information on interfaces and ease the strain on development. Here are some considerations to keep in mind when creating your grids:
Grids work best when their values are factors of 12, as this provides flexibility in your layout — i.e., a 12-column grid means you can have a three-, four-, or six-column layout.
Remember that the smaller the device, the smaller amount of usable space you have. Typically, for mobile devices, you want a three-column layout for main content and up to five columns for buttons.
Text not only helps your interface present information, it also adds depth to the overall look and feel of the design. As it is your design’s main carrier of information, a subtle, clean font is best. Choosing the right typography for your site can be difficult, so keep the following rules in mind to avoid getting caught up in the complexity of it.
Creating typography guidelines can help you control how your font looks and, more importantly, how readable it is.
Set up rules and guidelines for your typography (like the ones as above) as soon as possible to help control the number of fonts you use, enabling you to pair interesting fonts quickly.
Aim for 14pt as a minimum font size for mobile devices and 16pt as a minimum for desktop. Fonts that are too small end up being unreadable and therefore not functional.
Use sans-serif fonts to display simpler information (e.g., Terms and Conditions or other legal language), as they’re easier to read than serif fonts.
Stick to a maximum of three different fonts. Anything more makes your interface look cluttered and directionless.
Make sure your fonts are readable. Favor readability over style, as an interface needs to provide functionality more than it needs to be “artistic.”
Color wheels help you choose colors that work together because of their relationships.
In interface design, color adds visual cues and draws attention to key actions a user can take. Here are some general rules to follow.
Use a maximum of three colors: a primary, secondary, and tertiary. This helps you prioritize colors within a design and prevents too much variation. Your primary color should be your most prominent and reasonably bright color.
Consistency is key. Having all buttons be the same color helps the user easily find clickable links.
Use color perceptions to the best of your advantage. E.g., even though it’s not in your color palette, using red implies an alert or an error.
Some colors work better together than others. Using the color wheel will help you find the ones that work best with your selected color. For example, yellow works well with purple and blue because they are close to one another on the color wheel. This color relationship is called “split complementary.”
Always keep accessibility in mind. This ensures that as many users as possible can use your product. For example, white text on a yellow background is hard to read, especially for people with visual impairments. Use color-contrast checkers to ensure that your combinations pass the test.
Buttons and Interaction Elements
Adding color to buttons helps draw attention to specific areas of an interface, making it easier to understand.
Buttons and interaction elements such as carousels and image galleries encourage users to explore your interface and complete an action. Keep the following rules in mind when deciding how to design these elements.
Make your buttons clear and distinct from the rest of your interface to help direct the user to complete an action. Use contrast with color, shapes, and typography to highlight important information and key buttons they may find useful.
Always experiment. A carousel might be good for your product promotion, but it may not always be the best solution. Your goal is display information in the best possible way, so play around with different elements to discover what’s most effective.
Experiment, Test, and Reiterate!
Remember that your interface is constantly growing; you’ll always be testing and iterating to improve it. If you’re getting feedback that some parts are difficult to use, then try different colors, interaction elements, buttons, etc. until you find the best ones for your users. There is no shame in getting it wrong and improving your design.
A simple, usable interface is no easy feat, but if you follow these guidelines and principles — and keep your users at top of mind — you’ll be able to design one that helps you and your business grow.
Paolo Sta. Barbara is a multidisciplinary experience designer with a passion for innovative design thinking and problem-solving. With a background in animation and digital design, he focuses on designing experiences that are not only user-centric, but also crafted and memorable to use. After working with some of Australia’s top digital agencies, Paolo is now the lead experience designer for WiTH Collective (part of Isobar), working on a range of clients, including Qantas, Foxtel, and NRMA. He also teaches various visual design workshops and courses at General Assembly’s Sydney campus.
“Learning design gives you the skills to define the experiences that affect everyday lives. More importantly, you’ll learn to innovatively solve problems and stay a step ahead of the ever-changing landscape around you.”
Paolo Sta. Barbara, Visual Design Instructor, General Assembly Sydney
“People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color.” — 99designs, online graphic design marketplace
Color has a predictable and quantifiable physiological effect that influences our perception and behavior. It’s about emotions, and whether you realize it or not, the colors used in a design strongly affect the emotions of your users.
At the core of all product design is visual communication. What users do with a software application depends nearly entirely on what they see. The color of elements like buttons, toggles, input boxes, navigation, and the primary sections of the application can play a significant part in how users understand and interact with the software.
In our user experience (UX) and visual design classes at General Assembly, we spend a lot of time discussing how, when, and why to influence our users with everything from information architecture to user interface (UI) and interactions. To say the use of color is just one of those ways is to underestimate its power over everything from the user interface (UI), to graphics and transitions, to the subconscious message you’re sending to your users.
Color Is Subjective and Culturally Defined
It’s commonly believed among most designers that the color blue conveys a feeling of trust, calm, and masculinity; that yellow makes you think of creativity, summer, and positivity; and red is the color of passion.
Blue is often thought to be for boys, pink for girls, and white for purity.
But wait — be careful!
Not all colors mean the same thing in all contexts, or all cultures. Not only is color subjective — it is also contextual and culturally defined.
Color has a different meaning depending on how it’s used, and by whom. Red can be the color of love and valentines, or of serial killers and cult leaders. Red can be fast like a race car, cool as an icy-cold Coke, or dead as a zombie.
Colors are culturally created; in America, the color white often signifies purity, chastity, and virtue, and so is the color of a wedding gown. In India, widows wear white saris as a sign of mourning, and brides often wear red to signify prosperity and fertility. An American may see green and think of the great outdoors or jealousy (“green with envy”), whereas the Chinese are likely to also think of sickness or infidelity — and both cultures associate the color with eco-friendliness and wealth.
How you use a color — what palettes you put together — must be thought through carefully, and with sensitivity to the culture in which that brand or product will be displayed.
Building and Testing a Color Palette
While the psychology of color may help to explain why someone feels a certain way about a certain color, it isn’t the only determining factor in selecting a color palette for a brand or product. The entire design, including UX, UI, branding, and logo, all work together with color to convey a subconscious message to your customers. To effectively leverage the power of color, designers have to think holistically across the brand, as well as in detail about particular uses of the palette, and the context in which it will be used.
Even more specifically, at GA, we teach designers to ask, “What emotions do we want our brand to promote or project?”
So how do we figure that out? By using a few handy tools like mood boards, usability testing, and palette generators.
Creating a Mood Board
One way to begin developing a color palette for your product is to start with a mood board. A mood board is an arrangement of images, ideas, inspiration, and products intended to evoke or project a particular style or concept that you associate with your product or want people to associate it with.
Mood boards are an excellent way to play around with themes, images, and colors in context. From there you can start to put together a working palette to test with your customers, stakeholders, and users.
Here are some of the contradictions you’ll find across designers’ thoughts on building color palettes:
Some designers recommend limiting the palette to three colors, while others say four or five.
You’ll also find colorists who say you need a neutral, a bright, and a dark for any workable palette.
Others caution designers to stay with the same saturation and brightness values but select different hues.
Contradicting that, some advocate for all one hue and vary the saturation and brightness.
What to do, what to do? The answer is: It depends. Sometimes just knowing basic palette theory will help you with your own. Here’s a breakdown of the five most common color harmonies:
Monochromatic colors all have the same hue, but vary the saturation and brightness. This palette comes across as sophisticated and subtle, and it’s great for when the content is the focus and the UI elements need to fade to the background.
Triads come from three opposing points on the color wheel. When the saturation and brightness are kept the same, the hue variations are complementary to one another, and will liven up your designs.
Analogous colors sit next to each other on the color wheel. The closer they are in hue, the more they will blend together. It takes careful balancing to find the three that work happily together without clashing.
Complementary and split complementary are colors that sit opposite from each other on the color wheel. These colors make a great contrast for each other and work well with any product that wants to pop.
Color Theory and Branding
Finding the perfect color for your brand depends on your product, the emotional response you’re hoping to evoke, the color trends of the year (or season, or moment), and cultural aesthetics and values. Once you’ve got a few possible palettes together, start designing with them and test your creations:
Throw some logos, UIs, and social media posts at your customer base and stakeholders, and ask them what they see and feel.
Composition is how we see information. It influences the relationships we see between objects, perceptions of complexity, and affects our desire to engage with content. Learning composition as a visual designer will allow you to make information appear in ways that convey different meanings, or leave different impressions, like sophistication, affluence, cleverness, or strangeness.
If someone asked you to write down your phone number, you might instinctively group the numbers into two groups of three and a group of four. This is a system developed by designer Ladislav Sutnar, who used the psychological principle of “chunking” to group information in ways that are easier to remember. Composition is constantly shaping our perceptions around familiarity, relationships, and ease of use. If you see a row of clickable buttons near the top of the web page, you might assume they share a common function, likely navigating through that website. Simply by placing the buttons in that location and in that proximity to one another, a designer has leveraged composition to imply function and orientation of the design.
The Gestalt Principles, Continuation, Complexity, and More
Let’s see composition in action: How many triangles are in the following image?
Many people guess three or more, but the real answer is zero. You’re looking at a series of V shapes and Pac-Man-looking figures. Your mind is following the Gestalt principles of proximity (which states that objects near one another share a common relationship) and figure-ground (which states that the mind will choose a foreground and background). Being aware of how the mind instinctively derives meaning from visuals is a critical part of understanding how to leverage composition in powerful ways.
The Gestalt principles were first developed in 1890 by a school of German experimental psychologists who were interested in qualifying how the mind perceives information. While their initial list of principles has since been greatly expanded, even learning the basics will help a visual designer think critically about compositions and how to influence perceptions.
Beyond simple optical illusions, composition affects things in our everyday lives. Consider the following designs.
In the first example, the design utilizes a phenomenon known as continuation. By deliberately cutting off the bottom row of images and text, it suggests to the user that there’s more to see below. Users know they can scroll, so they’re likely to do so instinctively and continue exploring.
In the following example, however, the design neatly ends its grid within view. Many users in this scenario would not attempt to scroll. If this were the homepage design, some users may confuse an even grid of shows to be all the website has to offer if they aren’t familiar with the service.
As Steve Jobs said, “Design isn’t just what it looks like, it’s how it works.” The composition a designer chooses influences how a user perceives something works.
Like most elements of design, the more complexity you add to a composition, the more difficult it is to balance. Simple designs with large type and clear focal points are often perceived as more accessible and easier to understand. They are often faster to make. However, more complex compositions can also make for longer consumption.
A Skill for Many Careers
Combined with typography and color theory, a mastery of compositions can help a visual designer compete in a range of design job markets from editorial layouts to app design. For example, visual designers at large tech companies like Facebook and Google often specialize in designing icons, user interface details, and general page layouts. They collaborate with engineers, product managers, and other specialized designers (like user experience) to apply visual principles in ways that further the goals of the user and the business. Visual designers in publishing, advertising, and lifestyle brands often focus more on ads, page layouts, or book jackets. Using composition in these settings means a visual designer is either making an object more eye-catching or easier to digest dense information.
While the roles may have different mediums to focus on, the principles of composition remain true for all visual designers.
Composition in Visual Design at General Assembly
At General Assembly, we teach composition primarily in our part-time Visual Design course, which I teach at GA’s San Francisco campus. However, some of its concepts overlap with our user experience design courses, since composition can also implicate how something works to a user. Students can expect to learn by doing at GA: They’ll analyze their favorite web pages and apps to detect how subtle choices in composition influence their understanding of functionality and impact an interface’s feeling.
Shawn Sprockett is a design manager at Postmates, design advisor to Axiom Zen, and an instructional lead for General Assembly’s Visual Design course in San Francisco. His work has spanned a wide breadth of industries over the last 10 years, having worked with brands including Victoria’s Secret and Airbnb, and trained under legendary designers like Milton Glaser and Stefan Sagmeister. Shawn has also been a part of big business transformations like Conde Nast’s shift to mobile publications and IBM’s implementation of design thinking at scale. Shawn has an MFA in design and entrepreneurship from the School of Visual Arts. His recent projects are at the intersection of artificial intelligence, behavioral psychology, and generative design.
“Visual design is everywhere, always informing our behavior and perceptions. Understanding visual design changes the way you look at the world, and a mastery of it will give you superpowers that open the door to new careers.”
Shawn Sprockett, Visual Design Instructor, General Assembly San Francisco