Microinteractions & Card Design

As a designer, I can’t help but scrutinize over designs that I come across during my day-to-day life. It can be anything from the button design on a gas pump when filling up my car, the package design of my chewing gum, or the interface design of my newest mobile app.

Two things that I am more and more focussed on during my digital UI design observations are microinteractions and card design (both of which are discussed further in this article). These seem to be going hand-in-hand lately, as I stumble upon interfaces that I find delightful to use. In the last few weeks, I have come across two sites that particularly seem to do a great job with both: the Fitbit online dashboard once logged in (yes, I finally joined the FitBit culture) and Adobe’s new tutorial site: adobeknowhow.com.

Fitbit card interface

Fitbit card interface

The Fitbit dashboard has some great microinteractions that correspond with each UI card (which they call “tiles”). For instance, hover over any card, and you have options to change the settings of the card, quick view the info (always love a good quick view!) or “See More” for the more detailed page.

Fitbit card microinteractions

Fitbit card microinteractions

I must say though, that I am pretty bummed out that you can only interact with a card for the present day. Why can’t we see the details from previous days for a card?? Seriously. I hope Fitbit fixes this. They must have the data stored anyways, since they still show the card summary on past days.

The Adobe KnowHow site is another great example of a card design UI, a flat design aesthetic, and some user-friendly microinteractions.

adobe

Adobe KnowHow card design UI

Each card holds unique content, but they all possess the same functionality. Once you learn the UX of one card, you understand how each card works: hover over it to “Explore course” and see the overall ratings, click the + to add it to your wishlist, etc. Filtering by “Free” courses is an option, for all of us who like free stuff…like, all of us. From a user perspective card design is easy-to-learn and intuitive. From a developer perspective, it’s easier to build because every card functions the same way. From a designer perspective, well, you get the point: things are just easier and more efficient. Isn’t it wonderful when things work well for the user, designer, AND developer?!

When you click into a course, the interface is clean and intuitive. I am, however, experiencing some glitchy issues with the “Learn Now” button that becomes a sticky button on the page. When I scale my browser window down in size, it gets a little busted up.

Here it is acting glitchy:

Learn Now "sticky' button gets glitchy when re-sizing window

Learn Now “sticky’ button gets glitchy when re-sizing window

Here it is working properly:

The Learn Now button displaying properly

The Learn Now button displaying properly

I’m sure it’ll get fixed soon, but I couldn’t write a 100% rave review of the UI of the site when there are actually glitches present. Perhaps someone at Adobe will stumble across this post and fix it. My guess is someone already knows the glitch exist but it’s lower down on the priority list. Ahhh, the joys of the endless cycle of technical development and testing and fixing and…

Anyways, those are two sites I’ve enjoyed analyzing the card design UI and microinteractions of recently. I’m sure there are plenty more to come in 2015!

Posted in design, UI, UX | Leave a comment

Tech Teaching in 2015

2015 is going to be a great year for teaching coding in Atlanta! I am going to be involved with at least 3 different opportunities for sharing my love of design and coding with others:

gdi

My exciting new teaching venture for 2015 is teaching the Intro to HTML/CSS course for Girl Develop It – Atlanta! This is a great group that has just come to Atlanta thanks to Jen Martin. I am very excited to be part of introducing more females to the wonderful world of technology and coding! Plus, I scored this awesome shirt:

gdi t-shirt

tts
I will also continue teaching for Tech Talent South, a great code immersion school with various locations across the south east. I’ve had a ton of fun teaching their Intro to Web Design & Creation course, and just love seeing how much students pick up in 8 sessions. Here’s an example of a student’s project from the Fall 2014 semester: http://chefjohnpastor.com. This site was started before we got into responsive web design techniques, so she will be working on still making it responsive now that she understands RWD from the course.

Here are a few pics from teaching at TTS last semester:

Screen Shot 2015-01-07 at 2.25.39 PM

Screen Shot 2015-01-07 at 2.25.53 PM

Screen Shot 2015-01-07 at 2.26.06 PM

aia
As I have been for the last 6+ years, I am teaching full-time at The Art Institute of Atlanta in the graphic & web design program. I am re-designing the Advanced Web Design course to incorporate even more on responsive web design strategies. I hope to bring in a bunch of great guest speakers to inspire our students, so if you are interested in being a speaker, please contact me and let me know!

 

I am looking forward to all of the new people I’ll be meeting through these teaching ventures, and all of the things I will personally learn through these experiences.

Posted in design, education | Leave a comment

Event Marketing Designs

One of the main responsibilities that comes along with my role as the Student Success Coordinator at The Art Institute of Atlanta is organizing the quarterly Honors Reception. The reception is an event for students that achieved Honor Roll status or perfect attendance in the previous quarter.

I’ve had a lot of fun designing the marketing material for the event. As I walk the hallways of the school, I notice students checking out the posters and digital screens in the hallways to learn the details of the event. In the last few quarters, the event has brought over 100 students and family members to our campus and filled the room to the point where there is standing room only.

Here are some of the posters and digital display screens I’ve created for the reception:

Posters for Print:

Screen Shot 2014-11-22 at 1.32.51 AM

Screen Shot 2014-11-22 at 1.33.19 AM

Digital Display Designs:

honors-ad-spring2014-screen

honors-ad-su2014-screen

Print & Digital Designs as Seen in the Hallways:

IMG_7288 IMG_7293

IMG_8150 IMG_8109

Posted in design, marketing, print | Leave a comment

Forbes.com Embeds Twitter Directly Into Text Content

I was reading an article on Forbes.com today, and saw an interesting feature that they have (recently, I believe) implemented. Forbes has pre-determined paragraphs of text that they believe users will want to Tweet, and allows users to click on the paragraph to instantly Tweet it. I am calling this a “Twitterized” paragraph, for lack of knowing the official term for this functionality (if there is an official term!) Here’s how it looks/works:

Paragraphs with this functionality have the Twitter bird next to them:

forbes-twitter

Upon hover, the “Twitterized” paragraph turns blue to indicate interactivity:

forbes-twitter-hover

When the paragraph is clicked on, the option to post to Twitter appears:

forbes-twitter-popup


My first reaction to this feature was: “Huh, that’s kinda cool”…immediately followed by a feeling that there was something cheap about it. It seems to dumb down the reader. Spoon feed the reader. Decide for the reader what is important. It doesn’t seem as democratic as choosing what YOU deem to be important. I can also see this changing the way the articles are written. Writers will likely purposefully begin to phrase statements in ways that make them sound shiny and Twitter-worthy.

Maybe I’m just reading too far into it since, at the end of the day, we tend to be pretty lazy when we’re online and this makes one more thing easier and faster for us. I also imagine this does increase how many passages of text are Tweeted from Forbes. I’d love to see the before and after numbers. I personally am going to remain stubborn and will purposefully choose to Tweet un-Twitterized paragraphs of text. I like to make my own decisions, thank you very much. :)

What do you think?

FYI – If you like this feature, and would like to implement it into your own site, here’s an article I found that explains how to quickly make this possible:

http://www.internetincomepower.com/increase-twitter-shares-blog-posts/

Posted in design, social media, UX | Leave a comment

Sync Multiple Google Calendars to iPad2 Calendar App

When iPad users initially set up their Gmail accounts on their iPad (Mail, Calendars, and Notes) the user’s primary Google Calendar is the only one that appears on the iPad’s native calendar app. I have several Google calendars set up (for work, school, personal) so I really wanted to have access to all of them on my iPad2. I was close to buying an app called CalenGoo (currently $6.99) to accomplish this, but then I found the answer (somewhat buried) in the Google Support pages that would allow me to sync multiple Google Calendars for free. Here’s what you need to do:

  1. Go to the following link: https://www.google.com/calendar/iphoneselect
  2. Select each calendar you want to sync to your iPad 2
  3. Click “Save” in the bottom right corner
  4. On your iPad, go to the Calendar app
  5. In the top left corner, click on the “Calendars” button
  6. Select “All Gmail”
  7. You should now see your multiple calendars!

Below are a few screen captures of the process:

Google Sync Settings:

Google Sync Settings

Multiple Calendars on iPad Calendar

Multiple Google Calendars on iPad

Posted in iPad, Tutorial | 28 Comments

Responsive Web Design

Carsonified made their “Responsive Web Design” tutorials free for 24 hours yesterday. With a snow day in Atlanta, I was able to sit down and watch them to catch up on learning some new web design techniques. If you didn’t catch the free release of the tutorials, there are a lot of free resources online to learn from (or, you could purchase a package from Carsonified to view them of course!) Here, I’ll be posting a few resources I have found related to Responsive Web Design, including examples of sites that have implemented the concept.

What is Responsive Web Design (RWD)?
Responsive Web Design refers to adapting your site’s layout to best suit the user’s viewing device and its characteristics (such as screen resolution and orientation.)

An excellent in-depth explanation of RWD is available in Ethan Marcotte’s article entitled Responsive Web Design.

There’s also a book coming out by A List Apart in Spring 2011 entitled Responsive Web Design.

A good video about RWD can be found here: NetTuts+ Video about Responsive Web Design .

Examples of Responsive Web Design
The following is a list of sites that currently illustrate Responsive Web Design. To see what is going on, simply resize your browser window. You should notice that as you make your viewing window smaller the layout adjusts. For instance, a three column layout might become a two column layout, and then a single column layout. Entire sections of content might completely more or even be removed. In addition, images, font-sizes, line-height, margin spacing and so on might also scale accordingly. Pretty cool stuff! I plan to continue updating this list as I find more examples, so please feel free to comment with examples you find.

Responsive Web Design Isn’t Always The Right Tool
As was explained in the Carsonified videos, RWD might not always be the right solution. Sites that require completely different experiences on a mobile device rather than just a reconfiguration of the layout might not benefit from RWD. An example might be a site for a restaurant chain. Users viewing the site on a desktop computer might want to see the menu first, while users on a mobile device might want to immediately see an option to find the nearest location or restaurant hours. In addition, the mobile device could take advantage of geolocation, serving up different content based on the user’s location. In such cases, RWD is likely not the solution since the type of content, rather than simply the layout of the content, needs to be completely different on the mobile device. In cases where the unveiling of the content will remain the same, such as blog sites for instance, RWD is an elegant solution.

Posted in accessibility, design, web standards | 1 Comment

The Genius of Creativity: That Genie That Isn’t Quite “Us”

I just finished watching another great Ted Talks video on the subject of creativity. This talk was lead by Elizabeth Gilbert, author of Eat, Pray, Love. I wont preface it much other than to say that if you’re in a creative profession you should definitely watch it, and even if you’re not, I am quite certain you’ll find the talk both entertaining and insightful.

WATCH THE TALK: Elizabeth Gilbert on nurturing creativity

Posted in Creativity, innovation | Leave a comment

Verdana: A web font controversy

Who would have thought that a web font would cause so much controversy?

For those of you who don’t know the history, Verdana is a font that was specifically designed for use on the web. Its characteristics do not translate well in print design, particularly large-scale prints. IKEA has recently changed their official font to Verdana:

http://www.time.com/time/business/article/0,8599,1919127,00.html
Earlier this year, Audi updated their font to one that closely resembles Verdana:
http://fontfeed.com/archives/typographic-relaunch-for-audi/

It’s not really a new question to ask whether print design is a dying art. This really reflects the fact that the focus on advertising is web and not print. To keep the designs consistent between print and web, they are siding to use a font that is better rendered online than in print. News such as this, plus the fact that most print design jobs are being lost or at least require web knowledge strengthens the argument that print design really is a dying art.

I just hope that digital designers learn all of those essential design skills that print designers have honed over the years so that our web will some day look as beautiful as the print designs that have been distributed throughout history. It would be a shame to see print design disappear and replaced with globally accessible taste-less design.

I might be ok with the idea that print design is slowly dying, but let’s not let design itself die.

Posted in design, typography | Leave a comment

Super Kule!

adobe kuler

Fiddling around with Photoshop CS4 today while reading Web Designer Magazine, I learned that Adobe Kuler is now embedded into Photoshop!

If you don’t know about Adobe Kuler, it’s an invaluable tool for coming up with beautiful color schemes for your designs.

Definitely check out the Adobe Kuler online version, or simply go to Window>Extensions>Kuler if you’re using Photoshop CS4.

You have options to add the color theme to your swatches (as seen in the image provided in this post) or to upload your theme to the online version of Adobe Kuler.

Posted in design, Photoshop, Tutorial | Leave a comment

Tweet, Tweet

After years of resisting, I have decided I need to keep in touch with today’s social media trends and get a Twitter account. You will now find me chirping about things from web design to the color of socks I am wearing (hopefully more of the former, for everyone’s sake.)

Posted in Uncategorized | Leave a comment