5 Fundamental UX Design Concepts to Improve Discoverability & Usability

UX design refers to the overall experience that a person gets from using a product. This is different than UI design, which is an aspect of the user experience (UX) that specifically involves the design of the visual interface.

Two critical aspects of UX design are discoverability and usability. Discoverability refers to the process of learning about a produce and understanding how to use it and what it is used for. Five fundamental concepts can be used to properly explain discoverability and its application to user experience.

 

1. Affordances

uxdesign_blog_01

An affordance, simply put, is what a product is used for. A chair affords sitting; Uber affords car rides. Visibility is crucial to an affordance. If your app allows you to instantly order a pizza, it needs to be obvious to the user that they can do that. If the affordance of your app is not clearly visible, then your user will never realize that they can order pizza, which renders your app useless.

However, products also have anti-affordances: actions it cannot be used for. To be effective, anti-affordances must be easily perceivable. For example, glass offers the affordance of transparency and support, but offers the anti-affordance of allowing objects to pass through it. This is why birds often fly into glass windows. A signifier is necessary to identity an anti-affordance: the signifier makes the anti-affordance perceivable. Putting window clings or a sign on a glass door would act as a signifier.

 

2. Signifiers

uxdesign_blog_02

A signifier communicates what the affordances of a product are. If you slide your finger across the screen to answer your phone, this needs to be clear to the user. In addition to these intentional signifiers, unintentional signifiers exist: signs that you did not intend to produce that the user interprets as signs. For example, if you have an arrow pointing down to signify that the user should scroll, they may incorrectly interpret the arrow as a button and try to tap or click it. Be aware of what users interpret when they test your app, and actively work to reduce confusion and make signifiers as clear as possible.

 

3. Mapping

uxdesign_blog_03

Mapping refers to the relationship between the elements of two sets of things. For example, if you have an iPad magazine with multiple stories, swiping right and left (signified by arrows) might switch among stories, while swiping up and down (signified by the words “swipe down to read more”) would allow the user to read more of an individual story. When determining how to lay out the interface to incorporate these interactions, one must use mapping. Straightforward mapping is the goal: it should be obvious on a page what features can be tapped, moved, zoomed in on, etc., and the location of these signifiers on the page (mapping) should make sense. If you swipe right and left to go among stories, these arrows should be on the far right and left of the page. Putting the arrows somewhere else on the page can cause confusion; if you put right and left arrows under a photo, the user will think the arrows signify a photo slideshow, not the ability to read the next story.

 

4. Feedback

uxdesign_blog_04

Communicating with the user is crucial, and when the user makes a request, they must receive an indication that their request was noted. Imagine if you turned off your device, and instead of seeing a screen that said “Shutting down; please wait,” nothing happened. You would assume you did not press the button hard enough and try to turn it off again and again. User feedback is essential. With that being said, avoid using too much feedback, as that will become annoying for the user. Feedback must also be prioritized; minor actions should receive less obvious and continuous feedback than major actions. Imagine a phone on vibrate: a long vibrate means a phone call, which is very important, whereas a short vibrate signals a text or email notification. If all interactions used a long vibrate, the user would be confused and annoyed.

 

5. Conceptual Models

uxdesign_blog_05

A conceptual model explains how something works. This is usually highly simplified. Consider the desktop on your computer: obviously there is much more to an operating system than those 20 icons, but most users do not wish to know or understand the inner workings of their laptop—they just want to open the programs they need. Most users understand their devices based on perceived structures presented to them. Making these structures easy to understand is essential.

These five aspects of discoverability and usability combine together to create an effective interface that a user can easily understand and interact with. All five components are necessary to have a great product, and when these five elements are properly used, the end result leave the user feeling satisfied and rewarded.

Sexual Assault on College Campuses: Motion Graphic

Last year, I watched The Hunting Ground for the first time. It’s a full length documentary about sexual assault on college campuses, and it combines testimonies and stories with statistics and facts to provide an in-depth look at the high rates of sexual assault at universities. After watching the documentary, I kept thinking how important the topic was and how useful it would be if everyone watched the documentary. However, I knew it was difficult to convince people to devote an hour and half of their time to something. I wanted to find a way to communicate the same information in a way that was significantly shorter and would reach a wider audience.

I decided that, rather than wishing this short video would magically happen, I should take the initiative and solve this problem myself. I knew I had skills in motion design, talents in writing, and knowledge about the topic of sexual assault. Thus, I decided to use my skills to create a 10-minute motion graphic about sexual assault on college campuses, which you can view below (or here).

One of the biggest challenges when creating this motion graphic was determining how to address such a serious issue using animated graphics. Motion graphics are typically bright and positive, featuring fun animations and cheerful, bouncing graphics. I decided to use dark colors and keep transitions and animations simple in order to best communicate the gravity of the situation I was explaining.

Another challenge was visually expressing the script, especially when discussing rape and sexual assault. You can’t find a simple icon to accurately represent the complexity and horror of rape. I decided that when talking about serious topics, it was best to let the words speak for themselves, so I primarily used animated text for those sections. This would emphasize the staggering facts and statistics while still being visually engaging.

While the dark content of the video meant that imagery needed to be relatively simple, I enjoyed the creativity of finding interesting transitions between scenes. Finding music to communicate the mood of the scene was another creative challenge I enjoyed.

My intention when creating this motion graphic was to design a piece that was less than ten minutes but still explained the complexity of the problem and offered solutions and actions people could take to improve the situation. My goal was to design and visually engaging piece that told a story and was interesting and short enough to be easy to understand and spread to others.

I was very happy with the final result of my motion graphic, as it accomplished the goals I set and provided me with a unique creative challenge. I also enjoyed using my skills in graphic design to address a problem I am passionate about.

To learn more about sexual assault on college campuses and ways you can get involved in ending this epidemic, visit endrapeoncampus.com, seeactstop.org, and notalone.gov.

The Evolution of a Logo: My Process of Branding Myself

If you have a brand, and especially if you’re a graphic designer, having a logo is important. Logos help establish your identity, and if you’re a designer, it’s another way to show your talents. When designing a logo, there are a few things to keep in mind:

  • Is it timeless? Will it still work a year from now? 5 years from now?

  • Is it scalable? Is it easy to see at small (as small as a favicon) and large sizes?

  • Is it versatile? Does it work for digital and print material?

  • What does it represent? Does the logo embody what I want it to? What does it say about me as a designer?

I’ll take you through the process of creating a logo to brand myself with, and I’ll show you some of my previous logos and then explain what did and didn’t work with them, based on the four questions above.

My First Logo

When I designed my first logo back in my sophomore year of college, I had very basic knowledge of graphic design. The logo was simple and clean, but it was fairly boring. I knew how to use the pen tool to make basic lines, and I knew how to make shapes. I had also recently learned how to design banners, which clearly I was very excited about.
LD-LOGO

The biggest problem with my first logo is that it was the first idea I had, whereas now I know the importance of sketching out ideas, setting goals for your design, and clearly defining what you want your logo to represent. When I designed this logo, I just wanted something that looked good. However, the goal of graphic design is not just to make things look good. Design is about form and function, it’s about usability, and it’s about solving problems. Having a pretty logo with no meaning offered no representation of who I was as a designer. So, let’s consult the questions:

  • Is it timeless? There’s no guarantee that banners would be trendy in the future, or that I would like banners in the future, or that I would like teal in the future.

  • Is it scalable? Scaling this down would make it hard to read, both because of the size of my name and the thin stroke of the letters in the logo.

  • Is it versatile? The logo is too detailed and complex to work with other images, and it would only look good standing alone.

  • What does it represent? I like shapes and lines. And banners.

Logo #2

As I began taking graphic design classes, I found myself learning a ton of new skills. I could make things look 3D! I could cut out parts of an image! I could divide a shape into different parts! I learned about the pathfinder tool and my world changed! It was a very exciting time for a young designer such as myself. However, my abundance of new knowledge and skills meant that my next logo was a little too eccentric.
LD-Logo-Design

This logo looked cool, but it had a bit too much going on. Some of the shadows and angles were not aligned or positioned property. Plus, it didn’t pass the four questions:

  • Is it timeless? The specific colors and 3D look of this logo could become outdated or out of style over time.

  • Is it scalable? Somewhat, but the lines in the design would get lost as size decreases.

  • Is it versatile? The logo only looked good on a dark gray background, and changing the colors made the logo look very different, so the colors needed to remain the same always. This meant the logo always had to be on a dark background. Short answer: No, not versatile.

  • What does it represent? The logo gives off a fun, playful vibe. While some of my work does have that style, the logo somewhat limits its portrayal of my capabilities and discredits more professional, serious work I design.

Current Logo

To reach my current logo, I put a lot of time and effort into creating the best possible design. I sketched out countless ideas, playing around with different ways I could align my initials and create interesting shapes and lines. I wanted to convey professionalism and position myself as a successful motion, UI/UX, and identity designer. Thus, I wanted my logo to be simple, bold, and easy to read, while still looking visually interesting.
LD-Full-Logo

I chose this design as my current logo because it looks sleek, professional, and clean. My initials combine to form a shape that looks like a mouse pointing towards my name, which brings the eye to my name. This logo is extremely effective alone (without my name next to it), making it ideal for marketing materials and branding. It passes all four questions, as well.

  • Is it timeless? Yes. The simplicity of the logo means it can adapt to different mediums, no matter what the future has in store.

  • Is it scalable? Yes. The logo is still easy to comprehend when it is as small as a favicon, and its boldness means it looks strong and powerful when sized larger.

  • Is it versatile? Definitely. Again, the simple lines and design of this logo means it can work for any product, whether that’s a 3D video, a business card, or printed on a pen. The shape is what makes the logo recognizable, which means I can change the logo’s color based on the product and not lose recognition.

  • What does it represent? This logo represents usability and clear, comprehensible design, which is what I focus on most in my work. With the move towards mobile devices and smaller technology, making designs usable and understandable is crucial, and this concept is demonstrated in my logo.

Branding yourself visually takes a lot of time, but once you decide on a logo and style for yourself and your brand, you’re going to look a lot more legitimate and well-established. To learn more about branding yourself, check out my blog post with 5 steps to build your brand online.

logo01logo02

lisadzera

10 Ways To Create Powerful Infographics & Data Visualizations

Using graphs and charts to display complex data in ways that make it easy to understand is not a new concept. From the creation of the pie chart in the early 1800s to early instances of visualizing information, such as Charles Minard mapping Napolean’s invasion of Russia, presenting data using visuals has always been around. With the rise of computers and technology, data scientists and statisticians are finding innovative and powerful ways to interpret data and draw conclusions. However, without visualizing that data and making it easy to digest, any important findings from the results will not be widely understood. Most people do not want to look at rows and rows of numbers and attempt to understand the conclusion of that data. If you have important statistics and facts to show, using data visualization is essential to promoting widespread understanding of that information. Effective infographics provide a clear, comprehensible way to understand complex information. Here are 10 tips for creating your own infographics and data visualizations.
 

1. Tell a story.

seahawks

Remember that you’re not just throwing data onto a page. You’re using visuals to guide a viewer through the topic, and it should flow linearly to make the information easy to understand. You don’t want your audience confused about what to read and what the data actually means. Breaking the information up into parts, clearly defining sections, and telling a story with your information is essential. In my Seattle Seahawks infographic, I told the story of the Seahawks’ journey to the Super Bowl, but I also created separate sections to communicate background information about the team and their history. By breaking up that information into different sections, there was a clear hierarchy and linear flow to the infographic, which made it easy to read and understand.
 

2. Design differently for digital vs. print.

wabi_05

If you’re designing for digital devices, like in my Wabi Sabi UI design, then your data should be interactive. Viewers should be able to click, tap, zoom, scroll, and more. Of course, these features should be used only when they help increase understanding. For example, if you’re making a data visualization about an oil spill, have a timeline the user can drag to see the progression of the spill over time. Additionally, digital designs should be more minimalistic and utilize white space. Print designs are one size, so you can design it knowing how the user will ultimately view it. For digital designs, however, they could be on a huge computer display or on a tiny phone screen. Thus, keeping designs simpler and using white space to your advantage will ensure that all viewers can clearly see your infographics, regardless of the device they’re viewing it on. Also, when designing digital infographics, keep the horizontal width less than 735 pixels (to ensure it works on mobile devices) and the height less than 5000 pixels (after that, people get tired of scrolling).
 

3. Use visuals to aid understanding.

PP_13

Don’t just put in images and icons because you have empty space. For every visual you add, you should have a clearly defined reason for doing so. In this spread for the Pretty in Plastic magazine, the visuals help explain the different types of plastic surgeries being described. Rather than thinking about the medical terms abstractly, the viewer can clearly see what is being done in each type of surgery. Thus, the visuals aid understanding in addition to breaking up the text.
 

4. Visualize the hook.

pancakes

Charts and graphs are interesting, but they’re not going to be what draws in your audience. Use a large visual to attract people’s attention. This should be the “hook” of your infographic: the most important takeaway. For my infographic about making pancakes, I used a large illustration of well-made pancakes to pull people in. You can use other visual aids to reinforce and draw attention to your hook. In the pancake infographic, I used typography in the title to tie in the large illustration. I designed the word “pancakes” in the same style as the illustration and made it appear like the word was written in syrup. Initially, the viewer sees beautiful pancakes and the word “pancakes” written in a fun, interesting way—how could they resist reading more?
 

5. Show the big picture.

conservation_infographic

When looking at specific groups of data, it’s helpful to take a step back and communicate the main conclusions and big picture to your audience. Visuals can help do this. For example, in the water conservation infographic I created for the UNC Environmental Finance Center, I used a visual of a house to show that there are ways to conserve water in every room in your house. Rather than just listing ways to save water, connecting these methods to a larger visual (the house) allows the viewer to understand that water conservation can be achieved many ways and contributes to an overall lifestyle of conservation, not just one small change. Visuals on the side also help show how a small leak can add up over time. Adding numbers about how many gallons of water one would save per month helps the viewer understand the big picture.
 

6. Use a variety of charts/graphs.

PP_08

This spread in the Pretty in Plastic magazine has a lot of information and complicated data. Thus, it was crucial to use a wide variety of different data viz techniques to ensure that there was visual interest and that the viewer wasn’t confused or overwhelmed. Using a range of charts/graphs shouldn’t be too difficult, either, because most data has an optimal way to be displayed; it’s unlikely that all your data would be perfect for pie charts. Use color, size, and layout to differentiate among the data viz techniques and ensure that the infographic isn’t overwhelming. In the example above, because all the graphs used similar colors, and nothing was too overpowering, the page did not look crowded or overcomplicated.

 

7. You don’t HAVE to use graphs.

Inbred_Small

Many people hear “infographic” or “data visualization” and automatically think they need bar, pie, and line graphs. But you can visually represent a complex topic without using graphs, especially if your data is qualitative, not quantitative. In my infographic about white tigers, I used smaller illustrations to show what each block of text was about. Since the main illustration was very detailed, I kept the other illustrations simple as to not compete. You don’t want to use infographics only when the data clearly calls for one; challenge yourself to find ways to use visuals to aid understanding, even if it’s not initially obvious how to do so.
 

8. Use colors effectively.

bottomhalf

Colors are an important resource that designers can use to aid understanding; they do a lot more than make things look pretty. Consider this infographic I designed for the UNC Environmental Finance Center. Throughout the bottom half of the infographic, small, medium, and large systems are referred to. By using consistent colors for these three systems throughout the piece, it helps the viewer understand which system is being referred to, simplifying the data and making viewers rely less on the text.

 

9. Avoid large blocks of text.

PP_10

Large blocks of text are difficult to read, and most people aren’t going to read them. Even if there is text you cannot put into a chart/graph/etc., you can still display the text in a way that breaks it up and into easily digestible parts. In this spread from the Pretty in Plastic magazine, a timeline breaks up the text on the right page. Even using bullet points (as on the left page) breaks up text and increases the chance that people will actually read what you write.

10. Animate it!

If you have so much information that there’s no way you can display it all on one page… don’t display it all on one page! There are other ways you can display infographics, and an animated infographic is a great way to do so. I was part of a team that created a motion graphic for UNC Healthcare. We used graphs and visual aids to communicate complicated information. This particular motion graphic ended up winning first place in the animated infographic category of the National SSND Design Contest. Think of outside-the-box ways to present your information and ways you can make your designs more innovative and engaging!

5 Steps To Building Your Brand Online

So, you had an idea. You want to sell a product, offer your expertise in an area, or post content online about something you’re passionate about. But where do you go from there?

brand01

1. Think about it.

  • Who are you? Write it out.

  • How do you want to represent yourself?

  • What are your goals?

  • What do you want to be known for?

  • How can you represent these abstract concepts in a concrete way?

Once you’ve thought about how you want to be perceived, ask yourself what you can do to ensure that your brand is translated to others. This includes visuals, content, marketing methods, and general business practices. Your brand should reflect who you are, and you should remain true to yourself.

brand02

2. Create a website & visuals.

  • Purchase a domain name.

  • Develop a website that reinforces your personal brand.

  • Design a logo and color scheme that reflects who you are.

  • Use those visuals in your business card, resume, and cover letter.

People like visuals, and visuals are a key way to communicate your brand. If you love kids and want to open a fun after-school program for toddlers, your website shouldn’t be black Times New Roman on a white background. The design of your website, business cards, and other assets help establish your identity. You’ll also look a lot more legitimate and well-established, which will help you gain attention and business.

brand03

3. Blog.

  • Create a blog on your website.

  • Put all your blog posts on LinkedIn.

  • In every post, link to others sites and other pages within your site.

  • Write about things you’re passionate about.

  • Include visuals, such as infographics, photos, charts, etc.

Blogging is extremely useful for boosting your search engine optimization (SEO). Blogs give websites 434% more indexed pages. And you don’t necessarily have to write articles; you can take photos, write poetry, post videos, design graphics, etc. Do whatever comes naturally to you.

brand04

4. Use social media effectively.

  • Post about your blog & other updates.

  • Use Twitter, Facebook, Linked In, Google Plus, Instagram, etc.

  • Posting on Google Plus is an effective and easy way to boost your SEO.

Social media is an excellent resource for you to use to increase your branding. Posting your blog on other sites (with unique descriptions for each medium) increases the amount of links to your post, which indexes it higher on search engines. Tailor what you post to each form of social media. For example, if you post an article about 5 tips for UI design, tweet one of the tips with a link to the rest. If you’re posting it on Facebook, write a short description of the blog post. And make sure you post on Google Plus! That will do wonders for your ranking on Google.

brand05

5. Reinforce your brand.

  • Send your blog posts to websites that accept article submissions.

  • Comment on other blogs/websites with links to related posts you’ve written.

  • Continue to blog, and don’t forget to link to pages within your site.

While your branding should be intentional and well thought out, at the end of the day, the most important thing is that it’s genuine to who you are. Create and share content about things you’re passionate about, be honest with who you are, and be open and vulnerable with your writing. Good SEO, an awesome logo, and an interactive website won’t help you out if your content is dry and uninspiring. So, whether you have an established brand or you’re just starting out, remember that the most important thing (as cheesy as it sounds) is to just be yourself.

UI vs. UX Design: What’s The Difference?

Learning the difference between UI and UX design can initially be very confusing. Designers will tell you that UI is part of UX, but UX is not “experienced” from UI only. But what does that mean? Which one is more important? How do you use them together effectively? Rahul Varshney, co-creator of Foster.fm, explains, “User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success.

“Something that looks great but is difficult to use is exemplary of great UI and poor UX. Something very usable that looks terrible is exemplary of great UX and poor UI.” –Helga Moreno

What is UX Design?

User Experience Design is the overall “feel” that a user gets from your product. It’s their entire experience. UX designers succeed if users have a positive and satisfying experience using their product. For example, if you open up an app on your phone and it’s confusing and complicated, and you feel frustrated after using it, that’s an example of bad UX design. On the other hand, if an app is simple and seamless, and you quickly and easily accomplished what you opened the app to do, that’s good UX. Remember that even though UX design is about how the user feels, good UX design doesn’t mean that after every interaction, the user is laughing and smiling because the interface was just so fun and easy to use. People expect apps to be simple and easy to use. So (unfortunately), UX design is not usually noticed unless it’s bad. It’s kind of like how people get annoyed if you forget to wish them a happy birthday, but when you remember, they just say “thanks!” and move on.
 

ux01

 

So, how do you construct this perfect user experience? It’s a whole lot more than just design. UX relies on research and data to determine what users prefer. Usability is influenced by visual aspects such as where buttons are, how a menu is formatted, and how you navigate through a product.

“UX designers are concerned with how the user experiences the product. They want the user to come away from the app feeling good.”
Matt Powers, web designer at Blue Soda Promo

Here’s an example of UX design: Most apps go to a loading screen (known as a splash screen) when you first open them. This splash screen usually is colorful and prominently features the app logo. And, it usually features some sort of animation. Why? Because when something is loading and a user sees a circle turning or a bar filling up, they can easily see that their app is indeed loading. If a loading screen is a static page, the user may wonder if the app is frozen, or they may get impatient waiting. If an app says it’s 90% loaded after a minute, the user is a lot more likely to wait than if they’ve been waiting a minute and have no idea what percent of the app is loaded yet. Little things like that contribute to the overall user experience.

 

UX02

 

What is UI Design?

User Interface Design is more visual. It’s how a user interacts with your interface and is a part of UX design. UI design is comprised of the visual aspects of a design, including the colors, buttons, images, etc. With the demand for digital products only increasing, UI design is the future of graphic design. Some UI roles require coding knowledge or proficiency, while others have a separate team of developers. Knowing coding as a designer definitely won’t hurt, though.

“If the UX designer is looking at a website from 40,000 feet, the UI designer is looking at it with a microscope.”
John T. Jones, digital marketing manager for USA Financial

UI designers create tangible elements that comprise an app or website. They want to optimize the layout and determine which assets appear where. Especially now, digital design is essential to establishing a website’s identity and legitimacy. If your website or app is unattractive, you lose a significant amount of credibility, which is going to hurt you.

How do UI and UX design work together?

UI design is one aspect of UX design. Larger companies separate these roles, while smaller companies often combine them. Either way, they’re both crucial. You don’t want an elegant interface that’s difficult to use. And you don’t want an app that’s easy to use but is boring and unappealing. When UI and UX combine together perfectly, the result is a clean, simple, stunning product that is both easy to use and engaging to the user.
 

ux03

 

So…how can I learn UI/UX design?

Because these fields are very new, there are very few college programs specifically tailored for UI and UX design. If you’re interested in UI design, you can enroll in a graphic design, interactive design, or visual design program and apply those concepts. A background in visual design, computer science, or psychology/sociology can help you with a career in UX design. Learning about emotional intelligence will also be helpful. For a more specific, immersive experience, look into UI/UX bootcamps or courses, especially if you live in a major metropolitan city. There are also online courses or tutorials you can try. No matter what route you take, pursuing a career in UI/UX is a great career move, as these skills are in extremely high demand.
 

Rebranding Mental Illness

Rethink: Psychiatric Illness is an organization at UNC Chapel Hill that aims to create networks and end the stigma related to mental illnesses. They are committed to changing the way we think and talk about mental illness, and they accomplish this by organizing events aimed at fostering understanding among students and raising awareness about the current challenges in our mental health system. Their biggest project is a student-led sensitization training held several times a year, where students learn the basics about mental illnesses, the resources available at UNC, and how to be an affirming friend and peer.
 

Rethink is an important and influential organization with a community-based approach. They aim to make all members feel welcome and comfortable. Rethink is innovative, modern, and filled with intelligent people. Thus, when they contacted me about redesigning their logo, I was immediately interested.
 

Rethink’s past logos did not quite portray the message they wanted to send. They included brains, lightbulbs, and question marks. They wanted to move past those: brains were too cliché, lightbulbs gave the wrong implication (i.e. that ending mental illness is as simple as turning on a lightbulb), and question marks implied that people with mental illness were just confused. Other mental health organizations use puzzle pieces and gears; but again, that implies that people with mental health issues are broken and need to be “fixed” or “put back together.” While mental health should be addressed, people who are struggling should not feel like they are broken or incomplete. We needed to move past their previous logos (below) and portray what Rethink was about now.
 

rethink01rethink02rethink03

 

Rethink’s leadership team explained to me that they wanted to communicate concepts such as “homegrown” and “familial” to describe Rethink. We decided that using a head would be the best way to represent mental illness, but that the ideas of community and support could be represented using multiple heads. That led me to the idea of overlapping heads to show a sharing of ideas and connection among individuals. For colors, I went with a teal blue color combined with a deep purple. Using cool colors is calming, and the contrast of the dark purple with the soft blue allows for easy readability. I noticed that when the two heads overlapped, they formed a shape that looked like a lightbulb, so I added that element into a few sketches, just in case the Rethink team wanted to move in that direction instead.
 


rethink01rethink02

rethink03rethink04rethink05
 

After seeing the initial drafts, the Rethink leadership team liked the text used in the top row of logos and liked the bottom center design with the head outlines overlapping. The overlapping heads represented community, and having outlines meant one head was not “on top,” which would imply that some people are more important than others. After making a few more edits, I created the final logo in blue, purple, and white to give the team color options.
 


RETHINK_purple_squareRETHINK_white_squareRETHINK_blue_square

 

Working with Rethink gave me an opportunity to think critically about how to represent the complicated topic of mental illness in a logo. I was challenged to create a logo that represented community and support and moved away from traditional mental health logos that rely on brains, puzzle pieces, gears, and lightbulbs. I also enjoyed the conversation as we discussed what we wanted the logo to communicate and the importance of what certain designs would imply about mental illness.

5 Simple Ways to Boost SEO Using Content Marketing

Your website can have the best, most interesting and engaging content on the entire Internet, but if no one sees it, what’s the point? Especially if you’re not an internationally known website, it can be difficult to obtain wide viewership on your posts. Luckily, you can use SEO (search engine optimization) to boost your content’s ranking on search engines and make it more likely that people will see it. Content marketing, creating and spreading content to increase traffic, is a great (and relatively simple) way to boost SEO. 93% of marketers use content marketing as part of their strategy.

b2b

The tips below are just a starting point. For more in-depth research on boosting your SEO, check out some more complex guides that offer even more ways to change your website to improve its SEO.

 

1. Think about your keywords.

Organic search is responsible for 64% of web traffic. That means that your keywords (what people search for) are crucial. Keywords can be a great way to boost your SEO, but you need to think critically about them. If you open an ice cream shop in Seattle, keywords like “ice cream” and “Seattle” won’t get you as much traffic as more specific keywords. If you sell lactose-free ice cream, then “lactose-free ice cream Seattle” should be one of your keywords. It’s more specific, so it’ll get searched less, but when people do search for that, you’re going to be much more likely to appear on Google than you would if someone just searched “ice cream Seattle.” To find analytics on your keywords, Google Adwords offers a free “keyword tool” that shows the search volume and competition for any keyword. You can also use tools such as KeywordSpy, which shows what keywords your competitors are using and how effective they are.

 

2. Use links.

The more times other people link to your content, the more reliable it seems in the eyes of Google. Think of it as a celebrity endorsement: if a popular website links to your blog, then your credibility gets a huge boost. Internal links are also a great way to boost your ranking: link to other pages on your site to boost your ranking. This is one reason Wikipedia does so well; every page has countless links to other Wikipedia pages. Also, note that sharing a page on social media counts as a link back to your site.

 

3. Post your content multiple ways.

In addition to posting on your website, you should also post on various forms of social media, which increases the audience. Also, don’t forget about Google+. Obviously Google will index your content higher if it’s shared on Google+, so make sure you post on Google+ as well. LinkedIn is also hugely important. As shown in the chart below, LinkedIn generates more leads for B2B companies than Facebook, Twitter or blogs individually.

socialmedia

 

4. Use social media sharing buttons.

This one is really, really simple: to make it easy for your viewers to share your content, add social media sharing buttons on the top and bottom of all your posts. This gives people a simple, quick way to share your post, which will drive more traffic to your site and ultimately help boost your SEO.

 

5. Consistently add content.

Create posts on a blog to drive traffic to your site, and post consistently. Blogs give websites 434% more indexed pages. And B2B companies that blog generate 67% more leads per month than those who don’t. At the same time, though, don’t write content just to have content. Everything you post should have a purpose and should be something you’re interested in and passionate about, because that yields the best content. Interesting content is one of the top 3 reasons people connect with brands on social media. And, as shown in the chart below, make sure you’re using a variety of tactics for your content: videos, infographics, podcasts, etc. Articles with images get 94% more views.

usagetactic

These tips will give you a good start on content marketing and boosting your SEO. For more stats about content marketing, check out these 50 awesome stats about SEO and content marketing. Good luck!

Are You An Ethical Designer?

Defining your own ethical code is difficult, but if you’re going to work with a variety of different clients, it’s necessary. What types of work would you refuse to accept? How far is too far over the line? Where is the line? Designers must ask themselves these questions to determine their personal ethical code.

To help you figure out your personal ethics in design, I’ve included The Road to Hell, a test developed by graphic designer Milton Glaser to help designers establish their own level of discomfort with bending the truth.
 

hell01
1. Designing a package to look bigger on the shelf.

hell02
2. Designing a package aimed at children for a cereal whose contents you know are low in nutritional value and high in sugar.

hell03
3. Designing a crest for a new vineyard to suggest that it has been in business for a long time.

hell04
4. Designing a jacket for a book whose sexual content you find personally repellent.

hell05
5. Designing a medal using steel from the World Trade Center to be sold as a profit-making souvenir of September 11.

hell06
6. Designing an advertising campaign for a company with a history of known discrimination in minority hiring.

hell07
7. Designing an ad for a slow, boring film to make it seem like a lighthearted comedy.

hell08
8. Designing a line of T-shirts for a manufacturer that employs child labor.

hell09
9. Designing a promotion for a diet product that you know doesn’t work.

hell10
10. Designing an ad for a political candidate whose policies you believe would be harmful to the general public.

hell11
11. Designing a brochure for an SUV that flips over frequently in emergency conditions and is known to have killed 150 people.

hell12
12. Designing an ad for a product whose frequent use could result in the user’s death.

 

What do you think? Which of these would you do and which would you not do? What are some other examples of projects or clients that you think would be unethical to work with?

9 Tips For Photographing Graduating Seniors

When May rolls around, most people celebrate the warm weather, colorful flowers, and abundance of green. But for photographers, late spring means something else: senior photograph season.

There are lots of articles and online galleries that offer examples of creative, out-of-the-box senior photography. But let’s start with the basics. For photographers who have less experience with senior portraits, or for experienced photographers looking for new tips and inspiration, here are 9 tips for photographing graduates.

 

1. Capture their personality.

DSC_0316

Not everyone you photograph will be as fun and silly as Gaitry, above, but if you spend time getting to know the person you’re photographing, you’ll begin to understand who they are and how to capture that. Learn their quirks, what makes them unique, and then find a way to capture that with a photograph. If they’re introverted and prefer to spend their time reading a good book, ask them to bring one of their favorite books with them. If they’re high-energy and active, consider a photoshoot with more movement and adventurous poses. Each photoshoot should be tailored to mirror the personality of your graduate. It makes the photos more special to them and more interesting for you.

 

2. Try different angles.

01

When I was photographing Erika and she lied down on NC State’s Brickyard, I originally took all her photos from above. However, in those photos, her red gown blended into the red bricks. I decided to lie down myself and get the colorful trees (perks of photographing a December graduate) in the background instead of the bricks. This created a much more visually appealing photo, and Erika stood out nicely against the colorful fall leaves.

 

3. Look for special moments.

DSC_0119

Especially when photographing multiple people, oftentimes the candid photos look much more natural than the posed ones. When I was photographing Garrison and Nigel, the unposed photos ended up being the best ones. Then you’re capturing real moments, real emotions, and real reactions, which give a better sense of who a person actually is.

 

4. Highlight their future plans.

Find ways to document where someone is going. Did they just get into college or grad school? Take a photo of them with a stuffed animal, flag, hat, etc. from that university. Did they just get an awesome job offer? Photograph them with their acceptance letter or company business card. Are they taking a gap year to travel the globe? Have them bring their passport to the photo session. Did they get accepted into the Disney College Program? Ask them to wear their Mickey ears during the photoshoot.

 

5. Find out what’s significant to them.

garrison 0100

I wouldn’t choose to photograph every graduating senior at the Campus YMCA. But for Garrison, the Campus Y was a place he spent a majority of his undergraduate career in, and he felt very connected to the people and experiences that the Campus Y led him to. Find out what places are significant to the person you’re photographing, and make an effort to photograph them at the most important ones.

 

6. Zoom in.

DSC_0485

Getting a few detailed shots helps capture intimate details about a person and who they are. Zooming in on the tassel, or a person’s jewelry, offers a unique angle and perspective on a person and shows objects that would get lost in a normal photo.

 

7. BYOP (Bring Your Own Props).

DSC_0890

Props are great, because they make your photos more interesting, and they also give your subject something to hold, which will make them feel less awkward. Have them use props significant to them: band members can bring their instrument, athletes can bring their equipment, etc. Also, if you’re photographing them before they actually have their diploma, just roll up a piece of white paper and tie it. Then you have the illusion of a diploma without getting the actual diploma rolled up/dirty.

 

8. Don’t be afraid to be artsy!

DSC_0368

Shoot through the grass, shoot through the trees, shoot upside down, shoot underwater. Try new things to get unique photos. It’s always better to try and fail than to never try at all. And, when you’re rolling around on the grass trying to find the perfect blade to photograph, you might get some good candid photos of your subject laughing at you.

 

9. Don’t forget your cliché shots.

10

Yes, your laughing shots and poses holding a basketball and grass angles are cool, but don’t forget the typical photos, too. Your creative bone might hurt, but there are landmarks at any high school or college that people want to be photographed with. And every college student wants a photo in front of the building their major is in, most likely while making a victorious pose. These photos are just as important as the unique ones, so make sure you set time aside for the cliché shots, too.

 

Good luck!

Use these tips to get great, unique, and memorable senior photos. If you’re interested in photography and want other tips, check out my blog posts about sports photography and zoo photography.

What is Design Activism?

I recently purchased a copy of The Design Activist’s Handbook, a fantastic book written by Noah Scalin and Michelle Taute. Their book discusses how designers can use their powers for good, creating graphics that inspire others, educate people about new topics, or provide a platform to people whose voices are often not heard. As designer David Berman explains in the foreward, “Design is a very young profession. We’ve barely begun. Over 95% of all designers who have ever lived are alive today. Together it is up to us to decide what role our profession will play. Is it going to be about selling sugar water, and smoke and mirrors to the vulnerable child within each one of us? Or is it going to be about helping repair the world?”

“We have the opportunity to decide whether we will simply do good design or we will do good with design.” -David Berman

Design activism has grown into a movement of its own. Organizations such as Design for America and IDEO aim to create social impact through design. Elefint Designs uses design to “help good causes create a better world,” and Design Corps uses design to “create positive change in traditionally underserved communities.”

“Design has the power to give a voice to people and causes without access to multimillion-dollar advertising budgets and to offer people alternative visions of how the world might be.”
-The Design Activist’s Handbook

Design activism is about using your talents as a designer to create a positive impact in the world. It means using your talents to help non-profits establish their identity or offering to create a logo for an organization run entirely by volunteers. It’s about designers using what they know best, design, to help solve problems and build a better world.

You don’t have to be the CEO of a nonprofit to make a difference. Anyone can make a difference using the skills and talents they have combined with motivation and passion. For designers, that means using your skills in design to improve the lives of others.

Design-Activist-3
The Design Activist’s Handbook, by Noah Scalin and Michelle Taute

A Graphic For Every Country in Africa

People often refer to Africa as if it is a single country, ignoring the fact that Africa is a continent with 55 distinct countries. I created this series to use my design skills to emphasize every country in Africa and help others understand the uniqueness of each country. Below you’ll find thumbnails of all the graphics. Click them to see larger versions!

 

55545352515049484746454443424140393837363534333231302928272625242322212019181716151413121110090807060504030201

 

I created this series both to educate myself and others. I learned a lot along the way and plan to create similar series for other continents. Special thanks to Africa.com, Country Reports, and Afripedia, which were my main sources for information and photographs when researching the countries. Feel free to share these and familiarize others with these beautiful countries!

When Animals Don’t Smile: 10 Zoo Photography Tips

Taking photos of animals at the zoo is a lot different than photographing your pet dog at home. You can’t spend hours getting the right lighting and angle, you can’t change the background, you can’t position the animal differently, and you can’t put quirky objects near the animal to get a funny picture. In zoos, you’re stuck with what’s in the exhibit. But this challenge is what makes the outcome so rewarding; taking a stunning photograph despite the obstacles that come with zoo photography is a difficult feat, but with a little practice, you can become an expert. Below are some tips to help you achieve the best photographs possible. All these photos were taken at the North Carolina Zoological Park in Asheboro, NC.

 

1. Look for special moments.

DSC_0014

Especially when there are multiple animals, look for intimate moments where they interact with one another. These shots end up looking very special and unique, as the interaction between two animals is never going to be exactly the same.

 

2. Get in close.

DSC_0360

Zooming in is crucial. Many animals prefer not to sit right in front of the fence, so zooming in makes the image look more like you’re just hanging out with your bear friend and less like you’re far away with a fence dividing you.

 

3. Don’t rule out any animals.

DSC_0105oi

I’ve never had any particular desire to photograph ostriches, and I had very low expectations when I arrived at that exhibit. To my surprise, however, the ostrich ended up being my favorite animal to photograph. I was able to get very close to it, and it was extremely expressive and engaging.

 

4. Go to all the exhibits, especially the butterfly house.

DSC_0200

A lot of zoos have butterfly houses or aviaries. These are great, because they allow you to be in an enclosed environment with animals that you normally would never be able to get close to. But, as pointed out in this blog, remember that these areas are often humid, so you need to wait for your camera to transition to the climate change as to avoid condensation on the lens.

 

5. Focus on the eyes.

DSC_0163pDSC_0137DSC_0094DSC_0057

Just as with photographing people, the eyes are essential for telling a story with your photo. Focusing on an animal’s eyes will help create a more personal connection between your subject and the viewer of your image.

 

6. Use the surroundings to your advantage.

DSC_0190

Reflection in the water making your shot look less like you originally planned? Find a way to use that to your advantage! You can’t control the animal’s habitat, but you can control how you photograph it.

 

7. Be patient.

DSC_0021

People spend an average of 28 seconds at each exhibit. The chance of having the perfect, most photo-worthy moment in those 28 seconds is highly unlikely. Be a little patient and you’ll capture a unique, interesting moment.

 

8. Crop images to help tell a story.

DSC_0158DSC_0157

Showing just part of an animal often tells a better story than showing its entire body, especially if this means zooming in on the face. You can do this in post-production, but look for different ways to frame the same shot when you’re in the field, too.

 

9. Get low.

DSC_0313

Oftentimes, zoo visitors are above the animals, so photos are taken at a downward angle. As explained here, this distorts features and creates boring compositions. You can fix this by kneeling down to be at the same eye level as an animal; this creates a much stronger photo.

 

10. Be creative!

DSC_0025

Zoos present a lot of opportunities to be creative. Play around with different types of compositions, use the background to enhance your subject, and use the rule of thirds to make your images more dynamic and engaging. And, above all, have fun!

6 Typography Tips & Tricks

Typography is a crucial aspect of design, and the art of using typefaces beautifully goes far beyond avoiding Comic Sans and Papyrus. Learning the basics of typography improves your design. Typefaces are not pretty decorations; they’re an essential part of your design that directly impacts the readability and usability of your final product. If your design is flawless, but the text is distracting or difficult to read, your entire project may be disregarded. Below are some tips for optimizing your typography and using it to help, rather than hurt, your overall design.

 

1. Make the hierarchy obvious.

You want the reader to see the headline, then the subhead, then the paragraph text. How do you ensure that’s the order they read it? You create a hierarchy. Hierarchy is not good if you’re an anarchist, but it’s very important if you’re a designer. It allows the user to easily understand what text is most important and least important, and it guides the eye throughout the page.

font01

 

2. Use less than three fonts.

…and sometimes 3 is pushing it. If you’re using a second or third font, you need to have a clearly defined reason for doing it. Oftentimes, you can use different weights of the same font to achieve the look you want, and then using less complicated fonts actually makes the design easier to read. Using fewer will help the faces you do choose stand out. If, for example, you want a more decorative typeface for a headline and a body text that is clear and easy to read, go for it. Just make sure you can justify to yourself and your client why you are using different fonts.

font02

 

3. No widows and orphans.

A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. They both look really awkward. Fortunately, it is easy to avoid them. You can either change column widths, find words to add/remove, or slightly change the tracking, which is the distance between letters in a word (not to be confused with kerning, which deals with one space between two specific letters).

font07

 

4. Kerning is your friend.

Especially if you are designing a logo or large headline, kerning is extremely important. Because some letters (like an uppercase W) leave empty space before the next letter begins, some words can look awkward if you do not manually adjust the spacing between two specific characters. It’s very easy to do this and goes a long way. Plus, you don’t want to your design to end up on one of these lists.

font04

 

5. Use complementary fonts.

Serif with sans-serif, bold with light, decorative with Roman, etc. Opposites attract, and if you use two fonts that look oddly similar but are not similar, it’s just going to look awkward. You want your fonts to complement each other, not compete for attention.

font05

 

6. Let your words breathe.

It is okay to use some of your precious white space to allow your fonts to have room to breathe. Putting a bunch of fonts on top of each other is confusing and feels cluttered. Give them space.

font06

From Canvas to Computer: Combining Traditional Art With Graphic Design

Earlier this week, I wrote a blog post about the research and planning phases of a white tiger infographic I designed.

 

One of the key aspects of that infographic is a large illustration of a white tiger. When creating the design, I wanted it to look rustic and rugged. The infographic is about the horrors of the breeding industry, and making the illustration look slightly distressed would complement the content well. I wanted to stay away from the clean, polished look of vector images. While I could create a computer-generated rustic look in Photoshop, I decided to take things a step further and design the tiger without a computer, both to challenge myself and to create the look I wanted.

 
DSC_0012

 

I wanted to use black paint to create bold lines with a sketchy/distressed feel. I began experimenting with a paintbrush, but the lines still looked too polished, and they didn’t look rugged enough. I then saw a pencil sitting nearby with a foam pencil grip on it, and I was inspired. I dipped the pencil grip in the black paint and made a few practice strokes. They were bold, commanding, but still had a rustic look. I began using the pencil grip to paint the entire tiger, angling it for thicker or thinner strokes, and moving quickly to create an illustration that looked natural, not planned or perfectly calculated. Working with traditional art better allows you to create things that aren’t perfectly aligned, which is better when creating illustrations with a more natural feel.

 

DSC_0008

 

The final illustration had the rustic, natural feel I wanted. It was a good start, but the illustration was not done yet. I scanned it and opened the file in Photoshop. Then, I added some subtle blue and orange colors, changed the shadows and highlights a bit, and faded the colors slightly to blend the illustration in with the rest of the infographic. The final file was a perfect integration of traditional and computer design skills; it had the rough, rugged look I wanted without looking messy or unprofessional.

 

Inbred_Small

 

Using traditional art can be intimidating for a designer who is used to working in Photoshop and Illustrator, but the challenge is definitely worth it. Obviously the traditional art route takes longer and can’t be used for every project, but when you make a deliberate choice to enhance your work using this method, it pays off. Plus, now I can say I know how to paint with a pencil grip. I should probably add that to my resume ASAP.

The Devastating Truth About White Tigers: Changing Design Direction Mid-Project

When I was babysmall enrolled in an Infographics class taught by Terence Oliver at the UNC School of Media and Journalism, I wanted to make my final illustration-based infographic about white tigers. They’re cute, stunningly beautiful, and very rare, making them even more interesting.
 

I eagerly looked at photos of white tiger cubs online, obsessed with their soft fur and bright blue eyes. They were the perfect combination of regal tigers and adorable kittens. I imagined the illustration I would make for this infographic: two cuddly white tiger clubs playing, their little paws up in the air, their mouths open in what would almost look like a smile… I couldn’t wait to get started.
 

Before starting research, I decided to do some preliminary research. I wanted information about what the tigers ate, where they were most common, why their fur was white, and how they were different from other tigers.
 

However, as I did more research, I noticed something troubling. All the sources I found about white tigers did not talk about how cute they were or what their favorite food was. Instead, I was finding quotes like this:

  • “The ONLY way to produce a tiger or lion with a white coat is through inbreeding brother to sister or father to daughter; generation after generation after generation.”

  • “The kind of severe inbreeding that is required to produce the mutation of a white coat also causes a number of other defects in these big cats.”

  • “Breeders of white tigers do not contribute to any species survival plan. They are breeding for money.”

 

I then tiger_downsynrealized that my dream of creating a cute, non-controversial infographic about white tiger cubs was not going to happen. Instead of reading about how tiger cubs like to play, I found myself reading about Kenny, the white tiger who was born with with Down Syndrome and physical deformities as a result of forced inbreeding.
 

Ignoring the huge problems in the breeding industry would be unethical. White tigers do not exist naturally and are inbred for profit because of our fascination with their beauty. Creating an infographic celebrating their beauty would only further perpetuate this problem. I knew it was my duty to tell the truth about these tigers, so I decided to make that the focus of my infographic.
 
It was time to completely change my creative direction.
 

I created an illustration of Kenny, the white tiger with Down Syndrome, and used the text in the infographic to discuss the problems with the breeding industry. Based on the research I did, I found four main problems with the white tiger industry:

  • White tigers are bred solely for captivity.

  • They wouldn’t survive in the wild- their white coats provide a significant disadvantage, making camouflaging and hiding nearly impossible.

  • The inbreeding leads to severe health problems.

  • While breeders talk about conservation, the real reason to breed these animals is financial. Because of the high demand and low supply of white tigers, the breeding industry is extremely profitable, even though many tigers cannot be sold because of their physical deformities.

 

Based on those four points, I divided the infographic up into four section, using a large illustration of Kenny to draw the viewer in. I added a faded chain link fence over Kenny to reinforce that these animals are only bred for captivity as sources of revenue.
 

Check out my infographic below to see the final product. Despite the unexpected change in direction midway through the project, I am glad that I was able to advocate for such a troublesome issue and create a piece with more meaning than “look at how cute these cubs are!” Especially since the popularity of those cubs is the reason this horrible industry is staying in business.

Inbred_Small

View Full Size Infographic

Why Designing for Mobile Devices Is Like Eating Ice Cream

Mobile devices account for more than half of online search traffic, and that number is only going to increase. Designing for such a small screen is significantly different than designing for a computer screen, and it’s crucial to design unique interfaces for both. And don’t forget about tablets, either! Each device should have a design that is optimized for its dimensions. All these factors to consider might seem overwhelming at first, but don’t worry, I have a solution. During my research for this post, I found quite a few connections between mobile-first design and ice cream. Whether you want a career in UX design or you really like ice cream, these five points will definitely interest you.

summer-dessert-sweet-ice-cream

 

1. You keep the size in mind.

If you go to an ice cream shop and order an extra large cup that you load with sprinkles and chocolate chips, you’re going to put less sprinkles/chocolate chips if you get a size small. Yes, either way you’ll have sprinkles, but not nearly the same amount. This is true for mobile design as well. If your website has a video, 5 photos, and an interactive map, you’re not going to put ALL of those items on the home page for your mobile site. You could stagger them so they appear as you swipe down, but you won’t see all of them immediately above the fold. Don’t try to cram in all your desktop features to your mobile site. Design with the space you have in mind.

 

2. Options are essential.

Why do ice cream shops serve cups and cones? Because some people prefer cones, and some people prefer cups. You’re serving the same thing, just in two different ways. Compare this to a slider in a mobile design. Some people want to swipe to see the next image, while others prefer tapping an arrow. So, which do you put? Both. If you just put arrows, people who prefer swiping will be annoyed. If you just put swiping, people who like tapping arrows will be annoyed. Options ensure that each user has the experience they want. And then everyone who wants an ice cream cone gets one.

 

3. You don’t want too much in one bite.

Your website has a ton of cool stuff. Great! But you need to space it out. White space is definitely your friend, and a clear and clean user interface provides a much more pleasing experience. If you eat too much ice cream too fast, you’ll get brain freeze. If you throw all your content at us at once, your user is going to get overwhelmed.

 

4. It can make people happy.

People use their cell phones when they’re bored on a bus, annoyed that their friend is late, and frustrated that their plane got delayed. The last thing they need is an app that is boring, glitchy, and confusing. Mobile apps can be fun, interactive, and engaging. Use that to your advantage! Just like eating ice cream, using a cool mobile app won’t make all your problems go away, but it can make you forget about them for a few blissful moments.

 

5. It’s fun for all ages.

The fact that toddlers can and do use iPads and smart phones is simultaneously exciting and terrifying. Mobile interfaces are extremely intuitive, which is why they’re so easy for people of all ages to use. Use that intuitive aspect to your advantage. As explained here, minimize the interface chrome (buttons, tab bars, check boxes, sliders, etc.) to make your content as easy-to-use as possible. Hopefully, I don’t need to explain to you why ice cream is kid-friendly. I think that one goes without saying!

food-ice-cream

How Playing Neopets Made Me Love Graphic Design

A lot of people become interested in graphic design when they take an introductory class, learn about design through advertising, or work on the design team for their high school yearbook or newspaper. I, on the other hand, became interested in graphic design before I even learned the phrase “graphic design.” It all started when my 10-year-old self began using Neopets.com.
 

Neopets is not a design site for kids. Neopets is a site where you have virtual pets that you can buy items for and feed, expect they don’t actually need food. You can build a house for them and chat about Neopets on the forums. You can play fun games and earn Neopoints. You can create a guild for like-minded people who also have Neopets, and you can design layouts in Photoshop and use HTML and CSS to style your guild and profile. Wait, what?
 

Believe it or not, I’m not alone here. Actually, far from it. According to this post on Reddit and this other post on Reddit, lots of designers and developers became interested in their field after they learned basic coding and design at a young age.
 

As a typical preteen, I was very into celebrities, so I would design layouts for the homepages of celebrity-themed guilds. This just meant finding a famous model or actress and using the colors from her outfit to design a complimentary background. Looking back on them, they weren’t that bad. Besides some basic UI flaws and weird obsessions with using Tokyo fashion districts to name guilds, the basic knowledge of color, typography, and layout design was there. Well, as much as it could be there for a 5th grader. Below are a couple of my best designs from back in the day…
 

harajuku

 

eclipsed

 

I remember instantly loving playing with different colors and layouts. I remember enjoying the entire design process, loving the challenges that came along the way, and eagerly looking forward to working on the next design. I do not remember why my username was candyapplex. I think I was trying to be edgy. I was probably in my Avril Lavigne phase then.
 

Conclusion: Everything you do in your childhood will shape you and determine your career path. Just kidding. But if you’re an elementary/middle/high school student reading this, know that the things you enjoy doing now are things you could pursue professionally. When I was making these graphics for Neopets, I had no idea I was a graphic designer. I had no idea graphic design was even a career I could go into. I just knew that I liked designing things digitally and having creative freedom on the computer, because the options were limitless. Then I learned what graphic design was and (slowly) began to connect the dots and realize that this was a profession that really interested and excited me. So, kids: Stay in school. But also do cool stuff in your free time and explore your interests. As designer Jessica Hische said, “The work you do while you procrastinate is probably the work you should be doing for the rest of your life.”

Expressing Complex Concepts in a Simple Logo

One of the most challenging aspects of logo design is communicating the complicated company values, mission, and services in a simple logo that translates easily over print and digital mediums. Especially now that over half of all digital media usage is via mobile devices, there’s a huge push for simple logos that scale down to mobile devices easily. That’s simple enough if your client wants a logo with their company name and a simple shape, but what if you’re designing a more complicated logo?

I was recently faced with this challenge when designing a logo for a program within the UNC Environmental Finance Center. The EFC offers many tools and resources, including a calculator used as a Financial Health Checkup for Water Utilities. The tool assesses the financial performance of your water (and/or wastewater) utility fund and demonstrates the financial strengths and weaknesses of the utility fund in the past 5 years.

Pretty cool, right? But not pretty simple. When I was given the task of creating a logo for this tool, I was told to:

  • Communicate that this resource deals with money/finance

  • Find a way to show that the tool evaluates the health of a water utility

  • Make it obvious that this is about water

So, all I had to do was create a simple and clean logo that communicates the complex ideas of money, health, and water in a way that was easy to understand but also visually appealing. A water utility in a doctor’s outfit holding dollar bills? A coin wearing a stethoscope swimming through pipes? No, those wouldn’t work. I needed to somehow show that this tool evaluated the health of the financial performance of your water utility fund. Also, it needed to be simple, easy to understand, and aesthetically appealing in all forms of media.

As with any logo design, the first step was sketching. I decided to first sketch out simple ways to illustrate each of the three concepts I needed to communicate, and then find ways to combine them into one image.

efc_money

Sketching ideas for money was fairly simple. I decided any of the options could work, so it just depended on which of these ideas went best with the visual representations for health and water.

efc_health

Illustrating health was a little more complex, because I needed to communicate the evaluation of health. While some of my ideas represented health, they didn’t represent evaluating your own health. Only the stethoscope, heart monitor, and checkmark represented the evaluation of health. The check seemed too vague, and the heart monitor brought in two extra elements (heart and jagged line), when I only wanted one. Bringing in two elements for health would overcomplicate the logo. I really liked the flexibility of a stethoscope, so I decided to move forward with that.

efc_water

To visualize water, I figured I should keep it simple. Using a water drop seemed like the best option, as any other ideas I had were too complex. Plus, displaying water with a showerhead or sink didn’t make sense, since this logo was about water utilities.

efc_combo

Now I needed to find a way to combine these all together. I decided to first find a way to combine money and health. My favorite ideas were the stethoscope on the piggy bank and the stethoscope that formed a dollar sign. I decided to move forward with those ideas in Adobe Illustrator and create those vectors.

efc_logos

After designing the two options in Illustrator, I decided the piggy bank idea was too complicated. It ended up looking awkward and clunky. However, the stethoscope/dollar sign idea looked clear, concise, and visually interesting. Next step: Typography.

efc_font

I drafted a few ideas that emphasized “Financial Health Checkup” and used the same colors in my logo’s image. I liked the two on the left the best, because when “for water utilities” was stretched too much, it looked clunky and large. The typography in the bottom left corner looked the most professional and clean, so I decided to move forward with that one.

efc_final

And, finally, I combined the typography with the image, which I decided to put in a water drop to bring the final element in. Changing the color of the main text to blue made it fade away too much, so the bottom right was the winner. My boss and I were both very happy with the final result. Check it out live here!

efc_logofinal

5 Ways Your Design Is (Unintentionally) Excluding People

Designers have good intentions, but small overlooked details can subtly reinforce concepts that exclude certain people, even if your company preaches diversity and inclusivity. Sometimes we get so focused on making pixel-perfect designs, adhering to a particular color scheme, and making great UI that we forget to look at deeper implications of what we design and how it might affect specific groups of people. Listed below are a few examples of designs I’ve seen that may make people feel excluded from your brand and company.

 

1. Lack of diversity in stock photos.

include05include06

Stock photos are a great way to show the culture of your company without hiring a photographer. However, be careful when selecting photos. Don’t just look for people who are happy-but-not-overly-happy-because-that-looks-fake— also remember to include diversity in your selection. Excluding people of color from stock photos implies that your company doesn’t value diversity. Implicit racist bias is still a problem in the workplace, and there’s a push for companies to do more to promote diversity in the workplace. If your company emphasizes diversity but that sentiment isn’t represented in the stock photos, it sends mixed messages. The stock photo you choose can even negate the content that you’re publishing, as Rob Humphrey, Senior Account Executive at LinkedIn, explained in this post.

 

2. Maleness as the norm in icons.

include07include08

Caitlin Winner, design manager at Facebook, led the initiative to change the Facebook friends icon after discovering that it featured a male silhouette in the foreground and a smaller female silhouette in the background. She redesigned the icon to make the male and female icons the same size. By not making one particular gender seem like the most important one, Caitlin’s new icon promoted gender equality. As content consultant Lindsay Patton wrote here, simple imagery can have a big impact on people.

If you’re making a website and showing different icons for different resources, and all of them look like men, you’re subtly saying that your product is geared at men and not women. This might work if you’re selling a product just for men, but otherwise, you may be unknowingly pushing 50% of the population away from your company.

 

3. Making America the default.

include11include12

When you’re choosing a globe icon, most designers automatically choose one displaying the Americas, or more specifically, the USA. Especially for US-based designers like myself, it’s automatic to only look at things from our perspective. One relatively simple way to fix this is to have a few different globe icons that change based on the user’s location. Facebook Software Engineer Brian Jew and Facebook Product Designer Julyanne Liang worked together to design new globe icons for users not in the American half of the world. If you’re in Asia, why would the globe icon on your profile have the Americas on it instead of the part of the world that you live in?

 

4. Not accounting for color-blindness.

include13include14

If you’re a web developer/designer, make sure you test your website for color-blindness. The easiest way to do this, as explained here, is to make sure that colors are not your only method of conveying important information. In the above example, the map of the London Underground should use another way to get the information across to people who are color-blind. This could be in the form of alt text, different line types denoted in a key, or text in the web page that supplements the color-dependent method. There are many online resources you can use to easily test your website for color-blindness. This contributes to a much better UX for these users and allows you to clearly communicate your information.

 

5. Accidentally portraying hierarchy when there isn’t one.

include01include02

I was looking at a company’s website the other day, and they had photos of their nine executive board members in a 3×3 layout. One was the president, and the other eight were VPs of various departments. The president was male, four VPs were female, and four VPs were male. However, the way they were arranged had all the women on the bottom. This was just a coincidence, as the VPs were alphabetical, and the men all had last names that started earlier in the alphabet than the women’s names did. But most people aren’t going to take the time to check the order of last names. Since the rank of the VPs is unknown to an outsider, it would have been easy to rearrange the VPs. Aesthetically, it looks better, but more importantly, it sends the message to women that they can be successful at this company. Otherwise, it looks like men run the company and that even the women in charge are still less powerful than the men. It implies that women at this company can be successful… but not *too* successful, as those roles are reserved for men. Little design tweaks like rearranging their photo order (still keeping the president first, of course) emphasizes your company’s diversity and opportunities for success.

 

…does any of this actually matter?

Maybe you’re asking yourself if this is really matters, or if anyone is actually going to notice or care if an icon is male or female. But as a designer, you have the capability to make people feel included or excluded by the steps you take in your design. And especially if your company preaches diversity and inclusivity, you don’t want to send mixed signals about your values by contradicting them in your design. A little effort can go a long way.