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.

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?

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!

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.

Kids Change the World

If you’re a designer looking for non-profit work or you’re a non-profit seeking a graphic designer, check out Grassroots.org. Their goal is to connect charities and non-profits with tools, volunteers, and resources. Through Grassroots.org, I’ve found a lot of great non-profits with important missions and designed for them. One of the first organizations I designed for is Kids Change the World. KCTW is a “global youth-led non-profit organization that envisions a world in which young people work to combat societal issues to ensure all are blessed with the opportunities that allow them to lead productive and fulfilling lives.”

About the Organization

KCTW01Kids Change the World was started by Christopher Yao. When he was 10 years old, Christopher was diagnosed with an physical impediment, an under jaw bite. He was told that he needed corrective surgery before he turned 18, but the surgery would be extremely expensive and painful. However, Christopher found a doctor who was able to solve his problem without using surgery; as a result, Christopher became passionate about helping children with severe oral problems. This led to him founding Kids Change the World. He has since been named one of the 25 Most Powerful and Influential Young People in the World by Youth Service America, and has been recognized many, many, many times for making such a difference at such a young age.

My Contribution

Initially, Christopher approached me and asked me to redesign their logo. He wanted the design to look professional and clean, but also colorful and kid-friendly. The final logo featured two small hands on splashes of red, green, and blue paint; those colors are used again in the logo’s words. After designing the logo, I’ve gone on to design many other materials for Christopher. In addition to promotional materials for Kids Change the World, I also designed a logo for Smiles for Lives, a group within KCTW which works to “fund surgeries through various nonprofits and partner hospitals to change the lives of children through life-changing cleft-lip or palate surgery and post-surgical therapy.” Featured at the bottom of this page is a flyer I designed for the Smiles for Lives Read-A-Thon 2015. I’ve also worked with Christopher to design a logo for Medical Marvels, an umbrella program over Smiles for Lives.

Why It Matters

Graphic design is very important for non-profits. When you’re just starting out as a non-profit, appearance is especially important when looking for partners and supporters. A professional logo establishes legitimacy and makes it look like you know what you’re doing (even if you don’t). When you go to a website and it’s poorly made, difficult to navigate, and looks like it was made in 5 minutes, you’re going to be a lot less likely to donate to that organization than if their website looks sleek, clean, and professional. You could start a non-profit with the best mission statement and plan that’s ever been created, but if you have no logo, a plain website, and no social media presence, the only people who are going to give you financial support are your parents (if you’re lucky). Whether you like it or not, your appearance and branding matters, and that’s why it’s so crucial for non-profits (and all organizations) to have an established identity and brand. Websites like Grassroots.org are great, because they help non-profits find talented individuals to design for them and grow their brand. Design can also help you think about what you want to communicate and how—who is your audience? What appeals to them? What sort of presence are you trying to establish? How do you want people to view your organization? Graphic design is so much more than pretty colors. It forces you to define yourself, your values, and your goals, and then challenges you to communicate all of that visually. If you’re operating or thinking of starting a non-profit and need graphic design, check out Grassroots.org or email me at lisa@lisadzera.com.

KCTW02

5 Common UI Mistakes, Explained by a Puppy

UI stands for user interface, which is how a user interacts with the interface you create. This includes menus, navigation, buttons, and more. It’s a part of the overall UX (user experience) that’s focused on the visual aspect of the user’s overall experience on a particular website or app. Good UI involves consistency, simplicity, and clarity. It is crucial to organize complex information in ways that are easy for a user to understand and navigate. You do this by creating a visual hierarchy that is easy to follow, designing clear and concise labels for actions, and ensuring that the layout and design stay consistent among pages. UI designers are very intentional with everything they do. Every action is added only if it’s absolutely necessary to the user’s experience, as designs need to be as intuitive as possible. Simplicity is key; however, simplicity is difficult given the large amount of information on most websites. As UI/UX Designer Pär Almqvist said, “A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” The direction and flow of the website are managed through a clear UI, allowing the user to focus on what is most important. Ironically, the best UI design is invisible; if you don’t notice any usability issues and confusion, then you did your job right. Below are some of the most common UI mistakes that designers make, using illustrations of puppies to help explain the concepts.

 

1. Overly Complex/Cluttered Design

puppy01

UI design needs to be simple so it’s easy for the user to navigate where they want to go. Many designers get overexcited and start adding lots of links, buttons, graphics, gifs, videos, motion graphics, etc. While these features are beneficial in moderation, overusing elements just clutters up the page and confuses the user. It should be simple and straightforward for anyone to navigate your website, and adding a lot of features that are cool but ultimately not useful is a common mistake. Ask yourself if you’re putting something on the page because you need it or because you want it. Adding a photo of the mansion you’re writing about is something you need. Adding a 3D tour of the mansion that the user is forced to navigate through in order to go to the next page might be cool, but it’s not necessary, and it’s just going to confuse or frustrate the user.

 

2. Too Much Text

puppy02

The majority of website reading is done on mobile devices. That means that large blocks of text are not very user friendly. Paragraphs should be short and spaced apart so it’s easy for someone to read them on their phone. Make sure you test out your website on mobile before you publish it. If you’ve got long blocks of text, find logical breaking points to start new paragraphs. Even if the user is looking at your website on their computer, breaking up text into shorter paragraphs still makes text a lot easier to read and comprehend.

 

3. Non-responsive Design

puppy03

Mobile-first design is extremely important now with the prevalence of mobile browsing. Designing for mobile first means you know your site will be responsive and look right in the smallest size, which makes it a lot easier to resize for larger screens. Designing for a computer first and then trying to cram all that information into a mobile device is going to make it look cluttered and disorganized. Make sure your content can adjust to desktop, tablet, and mobile screen sizes, and that you’re taking time to design the website for each. Too many websites have a mobile site that’s exactly the same as their desktop site, just smaller. That means it’s hard for viewers to read and navigate, so they’re going to have a bad experience.

 

4. Lack of Hierarchy

puppy04

When looking at a website, it should be obvious where you want someone to look first, second, third, etc. Otherwise, viewers’ eyes will just wander aimlessly around the page, trying to figure out what’s going on. When you have very prominent elements that lead to somewhat-important elements that lead to less important elements, then the page makes sense to the viewer, and it’s easy for them to figure out what the most important information is. Using size, color, and layout, you can establish a hierarchy that helps your user navigate the page. Plus, if they’re only going to spend a short amount of time on your page, you need to make sure it’s obvious what the main topics are. It’s a good idea to test this out on people and ensure that the hierarchy you’re trying to establish is working the way you want it to.

 

5. Too Many Clicks

puppy05

Good UI designers consolidate similar content on a page, rather than spacing them out through multiple pages that involve clicking and waiting for pages to load. People expect instant gratification now, and if you’re making them click, wait, click, wait, etc., then they’re likely going to get bored and leave your website. Think about what’s best for the user. If you’re looking at a list of ten items, are you more likely to read all ten if all you have to do is scroll down a page, or if you have to click “next” after each item and wait for the subsequent page to refresh and load? Be intentional with your content and think logically about how to display information so it’s optimized for the user.

 

Good luck designing!

Hopefully, these tips help you optimize your UI design for your next project. It’s an important part of web design and the overall user experience. Plus, it’s puppy-approved.

Designing A Political Campaign

When Samantha Cabe approached my blog06social media marketing class asking us to design her District Court Judge campaign and social media presence for her, I was immediately intrigued. I’d never designed anything for a political campaign and was excited about the opportunity. We had a team of about 50 students all working on various aspects of her campaign: design, social media presence, PR, photo/video, etc. I was part of the graphic design team: our main project was designing her logo. Rather than most logo designs that rely on a symbol, for campaigns, your name becomes the symbol. We needed to ensure that it stood out.

Design Goals

Samantha was the only woman running in her race. She wanted to use that to her advantage; thus, she wanted her scabe_edited2logo to emphasize that she was a woman. However, she did not want to do this by emphasizing her first name, because the man she was running against was named Sam. Emphasizing “Samantha” too much could confuse voters. The campaign was for a local election; the main town in her district was Chapel Hill, NC. UNC Chapel Hill’s colors are light blue and white, and Samantha went to UNC Law School, so she wanted to integrate those colors into her logo to show her dedication and ties to the community. She also wanted to use purple if possible; it’s her favorite color and the color of Western University, where she went for her undergraduate degree.

The Signature

Samantha wanted her campaign to feel personal and relatable. Rather than only using big, blocky text, we decided to give it a more personal feel by using her actual signature for her name. We asked Samantha to sign her name and then scanned it in and retraced it with the pen tool. Lucky for us, Samantha has beautiful handwriting, so the signature became an essential design element. Her flourishes and flowy cursive also helped with her goal to emphasize her femininity.

The Typography

To contrast her signature, we used thick, prominent block text to display her last name and desired position. This was especially important for campaign signs to ensure that they were easily readable. Because her signature was so unique, we decided to keep the rest of the words in the same font, as adding a third font would make the sign look cluttered and awkward. This emphasized readability while also drawing attention to the element that wasn’t blocky and bold: her first name. As a result, the viewer’s eye drifted to the name “Samantha,” which helped communicate that she was a woman running for this position.

The Colors

A major part of political campaigning includes signs that are displayed along the road. We didn’t want to use a light blue background for her sign, because almost all the signs in Chapel Hill have a light blue background. Samantha’s needed to stand out. We also considered how her sign would look in the day and at night. At night, car headlights reflect white. Thus, having a sign with a white background and dark text will be more difficult to see at night—the white background would wash out the text. On the other hand, having a dark background with white text is very easy to see at night, so we designed her logo for that. At night, CABE (the most important part) is clearly visible on the signs in white text against a dark purple background.

Why the purple background instead of black or navy blue? Purple is seen as a more “feminine” color, and none of the other candidates with signs up had a purple background, so Samantha’s would pop out in a sea of white and light blue. Plus, Samantha really wanted to use purple and was thrilled that it was so prominent.

The design team and I still wanted to use light blue in the logo to show Samantha’s ties to Chapel Hill. We decided to make the words “Samantha” and “For Judge” in light blue. Having just one in light blue would look strange, but making both of them that color tied the logo together and made everything feel very cohesive.

The Result

Samantha was thrilled with the final logo. She loved the personalization with her signature, the colors were exactly what she wanted, and her logo looked professional but not intimidating/corporate. Using the logo we designed, we went on to use a similar style to design graphics for her Facebook page and her website.

header

That Lucky Bracelet

That Lucky Bracelet is a global organization that sends “Smile Packages” (which include lucky bracelets) to children and teens throughout the country who are fighting a life threatening or severe life altering chronic medical condition. They’re “dedicated to spreading joy, one Smile Package at a time to pediatric patients.” They’ve got branches in Boston, New York, Pennsylvania, Seattle, Texas, Toronto, Italy, and New Zealand. I first heard about TLB when the founder, Sophie, approached me and asked me to publicize her organization. Once I read up on what TLB did and how much they have accomplished, I wanted to do more than just share a post about them. I noticed they had no logo and offered to design one for them based on Sophie’s direction. She immediately accepted and gave me some basic direction.

blog02

Sophie liked the idea of having the T and B in “TLB” in plain text and then emphasizing the L using a script font that was comprised of beads. I decided to use a serif font for the T and B, which would give them an ever sharper contrast to the cursive L. Because TLB has branches in many different cities, I decided to keep the logo black and white and use a colored background, which would allow for differentiation among the locations. Because the bracelets are made out of beads, I used a subtle shade on the beads that comprise the L to ensure that the audience understood the connection. The light gray used in the beads was also the color of “That Lucky Bracelet” at the bottom of the logo, which tied the colors together and made the logo feel complete. I played around with making the L behind certain parts of the T and B. However, because the bracelet is the most important part of the logo (both because of the physical bracelet and the emphasis on the L for luck), I kept it in front of the other two letters.

That Lucky Bracelet is growing quickly and expanding into even more cities. They’re always looking for more volunteers, so check out their Facebook page to find ways to get involved!