Design Process: Font Quiz

JN Quiz

The Font Quiz is a project that I came up with during the 4th week of studying JavaScript according to this this schedule. The quiz tests your ability to identify 10 different system and web fonts.

“Build something for yourself”

I once had a job interviewer ask me “Can you identify fonts?”. I thought to myself, “Why? I have a Chrome extension for that.” Well, that question continued to bother me long after the interview. I didn’t lose sleep over it, but it nagged me enough that I decided to address it with this quiz. For this reason, I think it falls in line with Jason Fried’s advice to make something for yourself.

Why no or little styling?

I’ve chosen to focus on the early steps in the interface design process and reserve styling for later. I’ve tried the opposite approach – focusing on things like color, typography, etc. and trying to make things look great from the start – but that always delayed project completion and left important problems unsolved.

The Project

I wanted to build a typography quiz that helped my eyes focus on the anatomy of a specific font. I’ve tried a few other quizzes, but none did this for me.

Design Process

I won’t cover every step, but I’ll touch on the points that provide a window into my design process and thinking.

A List for Success

I put together a list of things that I felt the quiz needed to achieve or account for in order to be a success. It’s not a list of requirements or implementation details.

Moving through the quiz

I had a general idea of how the quiz taker would flow from choosing a quiz on the home page, to answering questions and ending on the final page where they receive their score. To make sure I had this and other paths imprinted on my mind, I used a shorthand for UI flows.

flows

Sketching the Question Page

After drawing the flows, I began sketching pages. I decided to sketch the question page first:

System Quiz

question-page

I started here because this is a screen that quiz takers must succeed at in order to progress to the end. It’s also the simplest screen (fewer elements pointing to other aspects of the domain) that allowed me to think about how the quiz works and where data is coming from.

Starting with the epicenter

I started my design work with the most important part of the screen (the epicenter). This screen seems to be 90% epicenter – the giant word typed in a specific font and the answer choices – but I decided the epicenter was the giant word and more specifically the ‘highlighting’ of that word’s anatomy. I explored a few options before landing on the dashed circles and lines. There are probably more clever ways to do it, but this approach did the job and allowed me to move forward with the design.

Final Score Page

System Quiz-answers

Quiz takers enter through the home page, go through a series of question screens, and end on the final score page. What would I expect to see after I answered the last question? For me, it was the following:
my score
my answers
the correct answers
some explanation for each answer
my options for where to go next
some indication of how awesome I am (or not)
I don’t want to travel to other pages to satisfy these points
how I did compared to other quiz takers

The last point seemed beyond the scope of the project (probably good for version 2). Taking the previous points into consideration, I again started with finding the epicenter and working outwards.

The most important part of the screen was the score. I wanted to make it a large number or percentage, but decided against that idea since I think percentages are only good when a large number of various types of question are involved. Using the “5 out of 5″ approach works well because there are only 5 questions and each question is basically asking the same thing: what font is this?

The “review your answers below, replay or take another quiz” sentence addresses the second most important question: “Where do I go from here?”.

The “review your answers” section was the third most important part of the screen and it gave me the most trouble.

In considering the context surrounding this review section, I came up with a list of questions/concerns/forces that I felt the design had to resolve:
What is the correct answer to this question?
What was my answer?
I want to know almost immediately whether my answer was right or wrong
I want some explanation for the answer

The elements and their arrangement on screen form the pattern that I settled on after several iterations. Below are my sketches of those iterations:

final-page

Home Screen Copy

I wanted to focus on clarity and making the copy work for it’s place on the screen. I re-wrote the sentence on the home page “Take the System or Web Fonts Quiz” many times. I didn’t want to rely on two big buttons or something ‘graphical’ that was labeled “System Quiz” or “Web Fonts Quiz”. Using a single sentence also allowed me to focus on getting the point across as quickly and clearly as possible. For example, one iteration of the sentence said “Take the System Quiz or Web Fonts Quiz”, from which I cut out the repetitive use of the word “quiz”.

Conclusion

I can see this quiz evolving into a web app that allows for more interaction. I’d like to allow quiz takers to move the dashed circles and lines or create their own. I built this quiz to learn some JavaScript and scratch an itch. This was a great experience exercising my design muscles to build something for myself.

Give the quiz a try

References:

http://blazdesign.com/20-fonts-every-designer-should-know/

http://practicaltypography.com/system-fonts.html

http://typographywinter2014.blogspot.com/2014/01/type-anatomy-connor-posey.html

http://www.marksimonson.com/notebook/view/how-to-spot-arial

http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/anatomy

http://www.typographydeconstructed.com/category/anatomy-of-type/

Constraints and Design

I recently read the Rework book summary at Squeezed Books. There is a point made in the book, under the heading, ‘Embrace constraints’, that I have been thinking about:

“Limited resources force you to make do with what you’ve got. There’s no room for waste. And that forces you to be creative.” – Jason Fried; David Heinemeier Hansson – Rework

One thing I love about design is the idea that constraints are a good thing. The book describes them as “advantages in disguise”. At first they seem unreasonable or stupid, but actually they can free you from a host of design solutions. You could always ignore the limitations and do whatever feels right, but the result will probably be inappropriate or feel out of tune with the environment.

Rework offers an example of “creativity” in an environment of constraints: the crude weapons fashioned by prison inmates. It’s kind of a gross example, but it does make a point that prisoners take artifacts from their limited environment and forge weapons that are effective at satisfying their ill intent.

Taking this process one step forward, the discovery of these crude weapons by prison guards hopefully results in the improvement of security. In other words, the limited environment that influenced the creation of the weapon is now influenced by the weapon and adapts accordingly.

I’d like to apply this to the world of designing websites. Let’s say you’re working on a site with a history of poor design decisions, a visual aesthetic that has borrowed from various trends throughout the years, and a host of requirements/ideas cherry-picked from competitor websites. What do you do? I don’t have the answer, but I’m willing to try designing something that at first blush is crude, ugly, whatever you want to call it, but also appropriate and effective. It could be a simple paragraph of text and some bullet points or the placement of a small piece of text that makes enough impact on someone who cares and has the power to change the environment.

Homepage Redesign: Protect America

Last month, I went on a trip to New Jersey to attend my wife’s cousin’s daughter’s quinceanera. Before leaving on the trip, I decided to spend 2 nights redesigning the homepage of Protect America. Coincidentally, the birthday girl’s dad owns a local home security business. I started the project with a little competitor analysis. Nothing too sophisticated, but good enough to generate some ideas and develop a direction. By the way, if I had to pick a home security company based solely on their website, I’d choose ADT.

I studied 4 of their competitors homepages and judged them on 9 criteria:
1. Is the phone number visible? Are there calls to action?
2. Does the page layout make sense? Are elements aligned properly?
3. Can I find help when I need it? What about tolerance for my errors?
4. Is there a way to search the site?
5. How is the quality of the writing?
6. Does the site instill trust? Are they credible?
7. Are the forms intuitive?
8. Navigation and Information Architecture
9. Overall website functionality

For each competitor I created a simple graph and plotted points representing how well the homepage satisfies my criteria. Below is the graph I produced for ADT’s homepage:

analysis_ADT

The center of the graph means the homepage doesn’t quite hit the mark, the inner circle means ‘half way there’ and the outer circle means ‘good job’. As you can see, I though ADT did a good job on all criteria except ‘search’.From there, I went on to sketch out some ideas on plain ‘ol paper. I quickly moved from paper to Sketch app (my favorite PS replacement) and began mocking up the homepage.

Protect America frequently changes the design of their homepage (probably analytics testing), so these are the best ‘before’ pictures I could get:

‘Before’ #1 – approximation of the homepage design last month, before my redesign (courtesy of the Wayback Machine).
pa-home-wayback-machine

‘Before’ #2 – the current homepage design as of today, 5/2/14
Home Security Systems   Alarm Monitoring   Protect America Inc.

Finally, here’s my redesigned homepage:
PA-design-test

My Day. Illustrated in Symbols.

I’m taking a Skillshare class called “Illustrate Your Day: An Intro to Symbol Design” by The Noun Project. I signed up several months ago, but only recently started watching course videos and completing exercises. The goal of the class is all in the title: Illustrate Your Day. How? By picking 20 of my daily activities (called referents) and designing a symbol for each one.

User comprehension is one of most important aspects of symbol design. Symbols should effectively communicate their intended message back to the user.

The course focuses on two techniques for designing symbols: narrative and iconic. Narrative symbols are relatively more detailed in order to convey a story. They usually depict people who are engaged in an activity. The iconic technique focuses on the basic facts of the concept they’re representing. For example, an iconic symbol might use an eye to represent a trip to the eye doctor, while a narrative symbol might depict an eye doctor shining light into a patient’s eye.

Both the iconic and narrative techniques attempt to strengthen user comprehension.

Design style is also an important aspect of symbol design. The styles mentioned in the course are outline and filled. They probably don’t need much explanation, but I will say that designing symbols with the ‘filled’ style requires a bit more skill than designing with the ‘outline’ style.

The course relies on Illustrator, but I’m going to try using Sketch app. Below are my referents as represented with pen and paper. I’ll post their Sketch app versions soon.

my-day-1
my-day-2

3/28/14 Update: Here’s one symbol…
my-symbols_sketch

Designing an app for iPhone 5: Wire-framing

I’ve been learning Objective-C and iOS programming through one of the Big Nerd Ranch Guides (this one). Unfortunately, the book is outdated and has left me hanging on a few details. I’ve been using this as an excuse to delay my learning and pick up an updated copy of the book when it’s available. No more. I’m determined to create an app and have decided to begin wire-framing an app idea. The app will help me keep track of meeting numbers (a task that I must perform once a month). Below is a screenshot of my wire-framing progress. I hope to document the process in short posts as I go.
Paper wireframe
wireframe-1

Links to wireframing assets:
iPhone wireframe kit
How to wireframe an iPhone app using Sketch

ATXexplorers.com

This year I was asked to build a website that featured local-approved spots around town (Austin, Texas). The site is called ATXexplorers.com and was launched earlier this month. Of course, ‘launched’ doesn’t mean ‘finished’. There are still rough edges that need to be smoothed down and other design decisions that need to be made.

I created a custom WordPress theme for the site using the Underscores theme (my favorite starter theme). I would really like to give a more detailed run-down of the site build process in a later post, but with so many other projects and things I would like to build, it might be tough. I think it would be very helpful to those people who are just starting to build websites with WordPress. I’d also like to talk about how I use Sass, Compass, and other tools that are part of a modern workflow and hear how others use these tools. I’ll try my best to act on these wishes. Adios!

Scaling and Cropping Images in WordPress

This is just a quick note on how to scale and crop an image in WordPress.

1. Upload your image to the Media library and click ‘Edit’. I’m uploading a large image and scaling and cropping it down to 960 x 444px.

upload

 

2. Scale the image. Since my target size is 960 x 444, I make sure that the width is 960px wide. Later I will crop the image at the height of 444px.

scale

 

3. Crop the image. Dragging over the image brings up the bounding box that I can use to set the dimensions of my crop. I make sure the box stretches across the entire 960px image and is 444px tall. From here, it’s just a matter of deciding which part of the image I want to keep and which part I can live without.

crop2

 

4. Save the crop.

save-crop

 

5. Click ‘Update’ and your ready to start using your image.update-2

Grayed out logos

Have you ever had this need on a project: You have some color logos of past clients and you need to convert them into a grayed-out banner to place on a website? Here’s an example:

gray-example

Logos I’m using:

logos-im-using

Here’s how I use Photoshop to accomplish this effect:

1. Open each logo in a separate canvas.

2. Next, go to Image > Trim > Ok

trim-settings

3. Create a new gray layer above the logo that you want to work on first.

new-gray-layer

4. Go to the gray layer and add an empty layer mask.

5. Select the logo layer, hit CMD + A to select all, then CMD + C to copy it.

6. Opt+ click on the layer mask to show it in the canvas. Then CMD + V, to paste your selection in the layer mask.

opt-click

7. Click on the Fill layer thumbnail (linked to the layer mask thumbnail) and turn off the original logo layer to reveal the grayed out logo.

click-turn-off

8. Repeat steps 3 – 7 for the remaining logos.

9. Next, create a new canvas and drag all your logos into the new canvas and convert them to smart objects

10. Select a layer, hit CMD + T and resize that image to the size you need. Tip: When I resize an image, I hold down SHIFT, click on a corner of the image, and drag/scale down the image while retaining the image proportions. When you got the right size, hit ENTER.

cmd-t

One of these logos had a lot of white space surrounding it which I removed by using the techniques in this great article: http://psd.tutsplus.com/tutorials/tools-tips/a-comprehensive-introduction-to-photoshop-selection-techniques/

11. Repeat step 10 for the remaining logos.

12. Here’s my work after aligning the logos and trimming away the excess canvas:

final-logos

 

 

Centering icons

Recently, someone asked me how to display a group of icons on one line, rather than the default vertical list. My answer was based on a general idea of how to do it and so it probably wasn’t very helpful. This inspired me to figure out the solution and add a little extra to it. Below is the solution that I came up with. It places a group of icons on one line and centers each icon within it’s list-item.

See the demo

First, the CSS


      nav {
         width: 360px;
         margin: 90px auto;
         background: #e3e3e3;
         overflow: hidden;
         -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.5);
         box-shadow: 0 1px 5px 0 rgba(0,0,0,.5);
      }
      nav ul li {
          float: left;
          margin-right: 5px;
          margin-left: 5px;
          list-style: none;
          width: 60px;
          height: 60px;
          line-height: 60px;
          text-align: center;
       }
       nav ul li:first-child {
          margin-left: 10px;
       }
       nav ul li:last-child {
          margin-right: 10px;
       }

Then, the HTML


<nav>
<ul>
<li><img src="img/Bag1.png" /></li>
<li><img src="img/Book.png" /></li>
<li><img src="img/Cloud-Down.png" /></li>
<li><img src="img/Coffee.png" /></li>
<li><img src="img/Comment.png" /></li>
</ul>
</nav>

It’s been a while

I haven’t posted in a while so I thought I’d give a quick update as to what I’ve been doing with myself. Recently, I completed Luke Wroblewski’s Mobile First, whoo hoo! I’m also working my way through Luke’s Web Form Design: Filling in the Blanks. Both books are awesome and enlightening. I hope to start a new project soon and I have been reading up on pricing strategies and creating questions for initial meetings with clients. When I have a few minutes, I also work on my JavaScript course exercises over at codecademy.com. I’m slowly making progress and I’m currently learning about recursion.

Well, I know this post is kind of scattered, but hopefully it will let you know that I’m still working.