Stephanie Briones

Ready, set, go!

09 Mar 2012

Today is also the day I start my challenges, which makes it a pretty interesting day for me. I have so many different feelings at once. I'm nervous, of course, a little nostalgic, and also really excited. This next two weeks will probably rush by, as the past eight months have, as I push my skills to the limit and put everything I have into the assignment that I'm given.

It has been an awesome eight months. Looking back to when I began, it's amazing how much I've learned—and it's just the beginning. I'm so thankful to Billy for accepting me as an apprentice and helping me become a better designer. I can't wait to see what the future holds.

What I have learned about Usability Testing

02 Mar 2012

There are ways to do user testing that cost very little and take no more than a couple hours of time. The things that can be learned from some simple user testing, however, are priceless.

In Rocket Surgery Made Easy, Steve Krug explains how you can conduct simple and effective user tests on your own. Until I actually tried it out for myself, I wasn't aware of how fascinating user testing would be.

To see someone use a site that I created and feel the pain of my poor decisions, or point out good ones, was surprisingly mind-altering and a very enjoyable experience. Just seeing the way that other people use a browser, in itself, was intriguing.

I installed Silverback to record the session, prepared a script, asked some questions, and had the testers do a few things on my blog. Even though I have plans for changes to my blog, it seemed like a good time to test and figure out the things that should change for the user versus things I just wanted to change for me.

It was interesting that they each pointed out some of the very same things, but also unique things. Things that I had already thought about and some that I hadn't.

Some of the things that the testers struggled with were:

Navigation

My blog has almost no navigation. There is a link at the top of the page, my name, which takes you to the home page and each individual blog post on the home page takes you to the post, to go back, you need to know to click on my name again to return to the home page and back to the list of blog posts.

Solution: Probably some breadcrumbs. I haven't decided yet. Other things that would help may include a "back to top" link at the bottom of long posts to make it easier to return to the top.
Tweeting a post

Currently you can tweet a blog post from the bottom of the blog post.

Solution: Moving that to the top, where it would be natural to return when you're finished reading, would make it a lot easier to find and use.
No dates on posts

This actually bothers me a lot too, and it'd probably be simple to change with a little help. Right now you can see all of the posts on the page, but there's no obvious order to anything, it's just a long list.

Solution: Find a developer that can help me add dates to my blog posts.

What was good:

One thing that they all agreed on was the fact that it was clean and simple. Something that I should keep in mind when working on changing things up.

I hope to never forget how much I got out of that short session of user testing and the value it brought to even a small two page website like my blog. The best thing about user testing is that it can never be done too late. It can be done at any time and by anyone.

Better Together

10 Feb 2012

"Why is it DOing that?!" "Because Rails likes to put everything in divs."

This project is rather tricky, so it was great to be able to work with someone that is an expert in knowing where to find everything and understands how everything is structured.

Alone, it would have taken me quite a while to get to a point where I felt comfortable enough to start working, but with the developer there, working with me, we started work immediately, not wasting any time. He tought me and I learned, while we worked.

I hope that I continue to have the opportunity to pair with developers in the future. It's a fun and insightful way to work.

Favorite Design Tools

08 Feb 2012

Digital Tools

XScope
I've been using XScope almost every day ever since installing it. It's probably the most useful app on my computer currently. I use it for things like color, alignment, measuring, etc.
Fount
Fount is plug-in that I use a lot. If there's a typeface that I like or want to identify, in just a couple of clicks, I know what it is with Fount.
github:help
Something I have used, but should visit more often is the Github Cheat Sheet.
PX to EM conversion
I use this site all the time for my pixels to em, em to pixel conversion needs.
The Shapes of CSS
I refer to this article almost every time I need to create a CSS shape. It's a great list of basic and some not-so-basic shapes.
CSS Lint
A really cool site that will tell it like it is. Not for the easily offended. It judges your CSS pretty harshly, but will definitely make you more awake of the importance of well-written CSS. I need to remember to use it more myself.
ASCII Art Generator
A great, simple ASCII art generator.
CSS Pattern Generator
I came across Patternify recently and think it's a nice tool to use for creating simple background patterns.

Analog Tools:

Pencil + Paper.

I like to sketch out everything with plain paper and a pencil. To add a little more life to my sketches I use:
Prismacolor Markers
Faber-Castell PITT Artist Pens

Hope this list helps you find a new tool to love.

Finding the right Web Type

30 Jan 2012

An obvious consideration is style. You have to know what look you're going for. The best way to know that is to really think about your project. Who is your audience? What is your content? Do you have a ton of paragraphs of text or just a few lines and some images? Try to figure that out before you begin looking.

Knowing what you're looking for before you start will go a long way in helping you select something that is right for your project.

You'll know whether you need a highly readable serif or sans-serif typeface for your body text or if you can use something more playful or strong with your few lines of text. Make a list of characteristics, use simple words, and make them your shopping list.

Your Search

It's easy to get sidetracked and find typefaces that you really like, but aren't right for the project. As difficult as it may be, avoid the temptation to use them anyway and just make a note of them for later. There's always next time.

After you have found and made a short list of possibilities, compare them side by side. Test them out using real content. You'll get a better sense of the true character of the typefaces that you've selected.

When making your final decision, you'll want to check to see how versatile the typeface will be. How many weights and styles it has. The more, the better. You'll at least want to make sure it has a normal weight, true italics, and a bold. Hopefully you'll be able to find one with additional lighter weights, heavier weights and small caps to choose from.

If supporting multiple languages is important, take a look at the font's character set, or see if it tells you in the description which or how many languages it supports.

When cost matters

If you're on a budget, there are some free or low cost services available that could work for you, but whatever you do, don't settle for typefaces that don't match your requirements.

If you're new to selecting typefaces and aren't sure you'll be able to notice the differences in a well made and not-so-well made typeface, you can always start out by looking at very high quality, expensive typefaces first.

Take a look at what is offered by some of the well-known foundries, look at them carefully, try them out with your content, take screen shots. When you know what you like, try out some lower cost options and compare them.

You may notice the differences in quality and you'll be able to search for a typeface that more closely matches your shopping list. Something more affordable, but made well enough that you will be happy with it. Just don't settle.

In the end, you might even decide that the best thing you can do for your website, product, project, whatever it is that you're working on, is to splurge on a typeface or two that will give you the professional, thought-out, clean and polished look that it deserves.

There are some web font services that charge monthly or yearly for access to all or some, or to individual quality typefaces.

Typekit: https://typekit.com/
Webtype: http://www.webtype.com/

Places to look for free to low-cost typefaces:

Google Web Fonts: http://www.google.com/webfonts
Check out Beautiful Web Type: http://hellohappy.org/beautiful-web-type/

My Fonts: http://new.myfonts.com/
A lot of times they'll offer a few weights of really nice @font-face web fonts for free.

The League of Moveable Type: http://www.theleagueofmoveabletype.com/

Lost Type Co-op: http://www.losttype.com/

Foundries.
Some foundries offer versions of their high quality typefaces for free for a short time, so check around. A lot of them also offer free trials, you can try them out before investing anything. Here are some foundries to check out:

Type Together: http://www.type-together.com/
FontShop: http://www.fontshop.com/
FontFont: https://www.fontfont.com/

CSS3 Animations: An Experiment

23 Jan 2012

After flipping through the book several times, keeping in mind that whatever I selected had to be animated based on the descriptions in the book, I decided on the following three:

1. Diffusion.

“An irregular dispersion of objects in a composition is called diffusion. The structure can gradually shift from being fine to coarse, and from sparsely to highly saturated.”

This section is made up of 200 absolutely positioned spans and uses transitions to make the dots larger and smaller, (obviously this isn't the most practical option, but it was the "prettier" way to do it).

Not absolutely positioning each span resulted in a choppy hovering experience. Each dot was shoving all of the other dots out of the way. For this section of the project, transitions worked best for me.

2. Negative/Positive.

“The terms negative and positive relate to opposite values such as opaque and transparent, light and dark, convex and concave, solid and hollow.”

The two discs are rotating 360° showing an example of the effect of negative and positive colors on negative and positive backgrounds.

3. Overlapping.

“When parts of an object lie above parts of another object, the first object overlaps the second one.” The red, transparent circle hovers over the black showing an example of objects overlapping.

Here is my Project. Keep in mind that CSS Animations are only supported in Webkit browsers and Firefox.

Rethinking Data

13 Jan 2012

This week has been Edward R. Tufte's Envisioning Information. It is packed with many valuable insights. I am sure that if you have the great pleasure of creating a table or two on occasion, you would benefit from reading Envisioning Information.

Escaping Flatland, a page from Envisioning Information (Source)

Constructing Tables

Tabular data is pretty universally important. We use and rely on tables daily, but they are usually painful to design and to look at. If we could learn how to display information in a simple, more straightforward way, I think that we might grow to enjoy creating tables that we and other people can appreciate.

Using Tufte's guidance regarding tabular data, I'd like to try to redesign a table, one that could use a little work. I encourage you to try it too. Here's a table I found via Google image search.

"International Rankings and National Health Expenditures" (Source)

This table isn't all bad, it just could use a couple of tweaks to make the information a little easier to digest. Some of the things I instantly noticed are the center alignment of the first column, the left alignment of the table headers, and the right alignment of the table data. Just evening those out would go a long way in making improving the table's readability.

Here's what I might do:

Remove the borders.

"First try to do without rules altogether. They should be used only when they are absolutely necessary. Vertical rules are needed only when the space between columns is so narrow that mistakes will occur ..." Jan Tschichold, Asymmetric Typography

Enlarge the title of the table.
Left align the data.
Simplify color.

"The often scant benefits derived from coloring data indicates that even putting a good color in a good place is a complex matter." Paul Klee, Notebooks: The Thinking Eye

Allow some breathing room.
Given the probable audience, simplify wording and numbers.

"... our readers are alert and caring; they may be busy, eager to get on with it, but they are not stupid." Edward Tufte, Envisioning Information

Here's what I came up with. There may be more here that could be changed, there may be a whole new way to present this data. I'd love to see how many different solutions could be thought up for this one table.

Tufte's Envisioning Information is definitely a book that I will reference again and again.

Speed-O-Meter: An assignment in CSS transitions and jQuery

05 Jan 2012

The inspiration for my Speed-O-Meter assignment was drawn from this collection of Chevrolet speedometers from between 1941 and 2011. It's amazing how something as simple as a speedometer on a dashboard, when shown in a different light, can be so interesting.

Collection of Chevrolet Speedometers from 1941-2011.

The simple black and white without all the frills allows one to focus on the typography and creativity of the placement. With the older ones, it looks as if a lot of thought and care went into the selection of the typefaces and the layout. The needles were much more interesting. Here are some good examples: 1 2 3

First order: figure out how to manipulate a div with the jQuery UI slider. Getting a slider on the page was simple enough, but the part that I didn't know how to do was connect it to the div so that when it was toggled, the div rotated using CSS transitions.

Thanks to Billy, that was working pretty quickly. I was able to start resizing the div (needle) and adding some numbers to the page for it to point to.

My next step was to find the right typeface. I really like the speedometers from the 40's and 50's the most. Most of them seem to use a squarish, bold, geometric typeface.

Kimberley Regular example from MyFonts.com.

Kimberley Regular seems a good choice for that. It has a vintage feel and the characteristics that I was looking for. I used Illustrator to rotate the numbers clock-wise. (I positioned them all with CSS first, but the transforms skewed the numbers in a way that was inconsistent, so an image it is.)

For a bit of a fun touch, I wanted to pair Kimberley with a scripty mid-century looking font. Air Conditioner seems to fit that criteria pretty well.

Air Conditioner Regular example from MyFonts.com.

Next, we wanted to have the dots, (below each number) turn red as the needle passed by. Doing that in jQuery is quite beyond my abilities, so with a crescent-shaped image with holes cut out where the dots should be, I was halfway there.

The other part making it work is an HTML element attached to the needle div. That crescent-shaped image that is the same color as the background of the page, has a really high z-index, putting it above the needle and the attached HTML element that forms the little red circle.

When the needle makes it's way around, the only time you see the red dot is when the needle points directly at a number on the speedometer.

Another idea that we wanted to implement was the possibility of having the spacebar control Speed-O-Meter's acceleration as well as the arrows and mouse clicks.

I was pretty sure I needed to use keypress, or keyup and keydown, but could not figure out how to get more than an alert to pop up when the spacebar was pressed. I knew what I needed, but just didn't know how to move forward.

I went to Myles, a fellow resident apprentice at 8th Light, and he was able to help me get the spacebar to control the acceleration. Playing with it more, I really wanted it to decelerate on keyup. Billy worked with me again and we were able to get it to decelerate as well, however, not very gracefully. It would just jump back down to -90° instantly, not slowly, like the needle.

Myles came up with a new variable called isAccelerating which is set to false, applied that to the keydown and keyup events. keydown was set to isAccelerating = true; and keydown, false.

Therefore the speedometer is always decelerating unless the spacebar is pressed down. When the spacebar is pressed, the deceleration is interrupted. Then he added setInterval (decelerate, 100); to ease the deceleration and let the slider handle fall gracefully back to it's -90° position. We applied everything to the right arrow as well so they would both act the same way.

I'm really glad that I'm surrounded by smart people that can help me with this kind of thing. I definitely feel like I have learned a lot by doing this exercise and that wouldn't have been possible without the guidance of some really smart guys. I look forward to learning a lot more.

Some things that were helpful to me:

Diving into Responsive Web Design

28 Nov 2011

Truly responsive websites are perfect on all browser window sizes and collapse and flow as you resize your browser window. They scale to fit browsers on mobile devices and tablets, as if they were created specifically for that device. I love to see columns and menus rearrange in a gorgeous, practical way.

A perfect example of Responsive Web Design from Trent Walton.

The idea of being able to do this myself has always been sort of a far away, "maybe one day" type thing in my mind, but it turns out that it doesn't have to be. There are so many tools out there now, but the one that I've used, and loved is The Goldilocks Approach from Front.

There's also Responsive Web Design by Ethan Marcotte, which will explain how to make your design responsive. The list of great resources on Responsive Web Design is ever growing.

It seems silly to me now to put off making my web designs responsive, especially given how amazing the results are in the end.

I recently converted my blog to a responsive layout using The Goldilocks Approach and was very surprised at how quickly I was able to get it working. It helps that it's a really simple website, but it was a nice experience.

I'm currently working on a web app design that will also be responsive without any boilerplate stuff. It's a bit more complex than a blog site, so it's a great learning experience.

Here's some eye candy, in case you enjoy looking at Responsive Web Design as much as I do:

Start with Type Slides

21 Oct 2011

View the PDF

Some of my slides below, but you can see them all in the PDF above. I hope you find them useful!

Georgia, a serif typeface created specifically for screen use.

Ideal line measure is between 45 and 90 characters per line.

Gill Sans, a sans-serif typeface designed to function equally well as a text face and for display.

Establish a hierarchy: use weights, sizes, color, and styles.