September 11, 20101 Comment

on: internet app design – color

"The Web Is Dead." This month's Wired magazine proclaims "Long Live The Internet." So what does that mean for Web designers? We must evolve to Internet Design! From apps to content everything has changed. The rise of NUI [touch screen or natural user interface] and mobile based hardware is driving lighter, simpler services and apps. This evolution has tremendous impact for designers. In Part one I covered Layout, In Part Two: Typography, Today we I will focus on color.

Part Three: Color Outside The Lines
Choosing the right color scheme is extremely important, because it will set the mood of your app design more so than any other component. Don’t let your own personal taste determine what colors you use. That should be based on what’s trying to be achieved with the app and what you know about it’s audience.


3.1 What's Your Brand's Color? 

It's usually found in the DNA of a brand.  Most brands have a color bible. Use it.  Enhance it. But never get rid of it or change it.  It's a part of the visual language that which captures the essence of a brand.  If your having trouble identifying a colors that work try Adobe’s Kuler, it's a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders. There are also other tools to help you choose the right colors.

web design

3.2 I dare you to use orange! 
As fashion week kicks into high gear in NYCI challenge you to count the # of times you designers using orange as a primary color! It's coming back in a big way. If you can't use orange simply dare to be different!  I like the the Gap Medics site, which features a bold choice of colors that goes against everything we are used to seeing on medical related sites. It’s appropriate since the site is trying to attract young medical students. The colors help give the site a young hip feel that softens seriousness of the subject matter.

web design

3.3 Black / Dark Colors in Web design

Sometimes a little color is the right color.  Carsonified basically only uses two colors. The dark brown and a creamy white compliment the vintage poster style and design elements. Sometimes a minimal color palette is all you need.  You can use dark colors in apps and on the internet witou breaking a usability best practice.  

web design

[examples via the WDL]

Go for it!  Black is back according to Winehouse.

Next Up - Art Direction and GUI Elements

on: internet app design – color via @jpenabickley

September 11, 20101 Comment

on: internet app design – color

"The Web Is Dead." This month's Wired magazine proclaims "Long Live The Internet." So what does that mean for Web designers? We must evolve to Internet Design! From apps to content everything has changed. The rise of NUI [touch screen or natural user interface] and mobile based hardware is driving lighter, simpler services and apps. This evolution has tremendous impact for designers. In Part one I covered Layout, In Part Two: Typography, Today we I will focus on color.

Part Three: Color Outside The Lines
Choosing the right color scheme is extremely important, because it will set the mood of your app design more so than any other component. Don’t let your own personal taste determine what colors you use. That should be based on what’s trying to be achieved with the app and what you know about it’s audience.


3.1 What's Your Brand's Color? 

It's usually found in the DNA of a brand.  Most brands have a color bible. Use it.  Enhance it. But never get rid of it or change it.  It's a part of the visual language that which captures the essence of a brand.  If your having trouble identifying a colors that work try Adobe’s Kuler, it's a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders. There are also other tools to help you choose the right colors.

web design

3.2 I dare you to use orange! 
As fashion week kicks into high gear in NYCI challenge you to count the # of times you designers using orange as a primary color! It's coming back in a big way. If you can't use orange simply dare to be different!  I like the the Gap Medics site, which features a bold choice of colors that goes against everything we are used to seeing on medical related sites. It’s appropriate since the site is trying to attract young medical students. The colors help give the site a young hip feel that softens seriousness of the subject matter.

web design

3.3 Black / Dark Colors in Web design

Sometimes a little color is the right color.  Carsonified basically only uses two colors. The dark brown and a creamy white compliment the vintage poster style and design elements. Sometimes a minimal color palette is all you need.  You can use dark colors in apps and on the internet witou breaking a usability best practice.  

web design

[examples via the WDL]

Go for it!  Black is back according to Winehouse.

Next Up - Art Direction and GUI Elements

on: internet app design – color via @jpenabickley

August 5, 2010No Comments

on: improving web typography

Over the last few weeks I have spoken & written about how the digital space is becoming a designers playground through HTML 5, open design tool kits and video.  Veer has become, yet another, type foundry added to Typekit’s remarkable list of foundries; allowing us to rent quality fonts for use on our websites.  I first found Typekit when I was designing my new blog http://imadethat.posterous.com (exclusive work in progress blog - need a password to check it out)


Screen shot 2010-08-01 at 4.28.54 PM

Typography is the back bone of design. The web is just about 85% typography.  Why shouldn’t it be viewed on the same lines as rounded corner boxes or text-shadows that look cool for the time being? It is an element of design that has been around since the written word first appeared on the walls of cavewoman.  In order to help prevent typography from falling into yet another ignored or misused category, learning about typography, beyond typefaces and fonts is essential a must to every designers toolbelt.

The people behind Typekit do a great job of this. They offer a short write-up about each font providing background / historical information, purpose for which it was created, and what its use is best intended for (ie: works well at very small sizes, good for body copy, great for headlines).

A wide range of quality fonts at our finger tips, CSS3 techniques that allows us to break and flow text into multiple columns… The web is starting to give designers less and less limitations and comparable to its print ancestors.   In your next digital project, challenge your development teams to expand their HTML & CSS practices to use the many type tools that are fueling the best built web experiences today.

on: improving web typography via @jpenabickley

August 3, 2010No Comments

on: creative errors

A large part of experience design is designing for the we know the user will do and then taking it a step further in designing for what we know they can do.  Error pages are often neglected by designers because they are rarely seen, or at least that’s the plan. But we all know things happen. A visitor may incorrectly enter a url, or try to find something on your site that just isn’t there. These are times when the 404 page will receive a few visits, but visiting an error page isn’t necessarily part of a pleasant user experience.  In this post I have rounded up a few of my favorites.


nokia's ovi love

Screen shot 2010-08-01 at 2.56.16 PM

carsonified

errorpages01

at first sigth

errorpages24

joyent

errorpages25

hdqt.co.uk

errorpages34

product planner

errorpages35

chrisglass.com

errorpages36

xhtml kitchen

errorpages14

twurn

errorpages10

agens

errorpages02

on: creative errors via @jpenabickley

August 3, 2010No Comments

on: creative errors

A large part of experience design is designing for the we know the user will do and then taking it a step further in designing for what we know they can do.  Error pages are often neglected by designers because they are rarely seen, or at least that’s the plan. But we all know things happen. A visitor may incorrectly enter a url, or try to find something on your site that just isn’t there. These are times when the 404 page will receive a few visits, but visiting an error page isn’t necessarily part of a pleasant user experience.  In this post I have rounded up a few of my favorites.


nokia's ovi love

Screen shot 2010-08-01 at 2.56.16 PM

carsonified

errorpages01

at first sigth

errorpages24

joyent

errorpages25

hdqt.co.uk

errorpages34

product planner

errorpages35

chrisglass.com

errorpages36

xhtml kitchen

errorpages14

twurn

errorpages10

agens

errorpages02

on: creative errors via @jpenabickley

August 3, 2010No Comments

on: creative errors

A large part of experience design is designing for the we know the user will do and then taking it a step further in designing for what we know they can do.  Error pages are often neglected by designers because they are rarely seen, or at least that’s the plan. But we all know things happen. A visitor may incorrectly enter a url, or try to find something on your site that just isn’t there. These are times when the 404 page will receive a few visits, but visiting an error page isn’t necessarily part of a pleasant user experience.  In this post I have rounded up a few of my favorites.


nokia's ovi love

Screen shot 2010-08-01 at 2.56.16 PM

carsonified

errorpages01

at first sigth

errorpages24

joyent

errorpages25

hdqt.co.uk

errorpages34

product planner

errorpages35

chrisglass.com

errorpages36

xhtml kitchen

errorpages14

twurn

errorpages10

agens

errorpages02

on: creative errors via @jpenabickley

December 4, 200910 Comments

ON: The “Above The Fold” Design Myth

An artist's job is to rethink the boundaries of their medium.  Whether it's a canvas or a web browser, our job is to improve its value and use.  Since 1994 web designers, digital gurus and usability pros have debated the topic of designing "above the fold".  The term "above the fold" is a print term that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.  In the early days this print term was adapted and used in web development to refer the portions of a web page that can be visible without scrolling.  When I started designing web pages most users were unfamiliar with the concept of scrolling.  It just wasn't a natural thing for them to do . As a result,  I would design web pages so that all content would be “above the fold”.   When I was designing e-commerce sites on   AOL, page-level vertical scrolling was not permitted. As AOL moved away from their proprietary screen technology to an open web experience, we enjoyed the luxury of designing longer and wider pages.  That was 15 years ago!  A lot has changed.

That Was Then. This Is Now.

According to ClickTale's scrolling research, Today, 91% of the page-views had a scroll-bar. 76% of the page-views with a scroll-bar, were scrolled to some extent. 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.  As screen resolutions vary greatly, HTML design has improved and browsers have become common place in a users life the time has come for the term and the practice to die! 

The "fold" simply does not exist.  There is significant research, design methods and technology  that renders the "fold" theory useless.  Research like ClickTale's Scrolling Research Report V2.0 - Part 1 and Part 2 completely unravels the "Above the fold" myth.  The most compelling test they ran was proving ‘Absolute Scrolling Reach’.

Tn_Visitor_Attention_vs_Absolute_Scrolling_Reach "This graph below shows us how much time visitors paid attention to each section of different-sized web pages as they scrolled through them. ‘Absolute Scrolling Reach’ measures the distance from the page top (in pixels) that a visitor scrolls down the page."

Let's think about it for a moment.  If you subscribe The “fold” theory, you are assuming everyone uses the same size monitor, monitor resolution and Web browser.  More over, you must also assume we all have the same number of toolbars. Obviously there are too many factors involved to identify a consistent fold location.  The "fold" is just silly!  scrolling has become a natural practice in surfing the web. Scrolling is also associated with most Web 2.0 design.  Big, clear text and spacious content implies longer web pages.

Web 2.0 Design
Today, I design my pages to use liquid layouts that stretch to the current user's window size in order to avoid frozen layouts that are always the same size. Great consumer centric design does not give equal weight to all the content in a site. It puts its most valuable messages at the top and throughout the design.  If you present compelling content and use proper design queues and tools then your users will find and grab your content.  Here are a few examples of mainstream sites that are designed "below the fold" for millions of uses everyday.

Facebook

Screen shot 2009-12-03 at 10.27.59 PM


The New York Times

Screen shot 2009-12-03 at 10.26.14 PM

YouTube

Screen shot 2009-12-03 at 10.28.59 PM

Where was the fold? 
Did you scroll?  of course you did.   (you are scrolling now)

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s clear that the rest of the page can be just as valuable to contextual advertising.

Look at the 2010 Ford Mustang site. 

Screen shot 2009-12-03 at 11.39.52 PM

They get it. I scrolled up and down, clicked and shared.

If its good they will scroll.
It is imperative that we begin to educate our clients and account teams that this is no longer a best practice. It really never was. Open up your design and stop cramming stuff above a certain pixel point. You’re not helping anyone. If your content is compelling enough your users will read it to the end.

Educate your peers and clients with these recommendations in mind:

  1. Your content is king. If your page contains lots of engaging content, users will scroll to the bottom to view it.
  2. Keep important new content that helps users understand the main purpose of your site above the 600 pixel mark.
  3. Design universal navigation and business information that can be modular.  It should allow users to manipulate and control its placement. It should also appear above the 600 pixel mark.
  4. Minimize your written text and maximize images and video, the web is now a converged 3D medium. Users would rather you engage them instead of asking them to read.  Remember they do scan pages.
  5. Use design cues like icons, cut-off images and text blocks to help users expect additional content below the screen.
  6. Try to keep browser-less applications within a given screen space and make sure the inputs and outputs of the application appear within that space.

Join me, lets help dispel the urban design myth by sharing this data.

Research used for this post:

ON: The “Above The Fold” Design Myth via @jpenabickley

December 4, 20096 Comments

ON: The “Above The Fold” Design Myth

An artist's job is to rethink the boundaries of their medium.  Whether it's a canvas or a web browser, our job is to improve its value and use.  Since 1994 web designers, digital gurus and usability pros have debated the topic of designing "above the fold".  The term "above the fold" is a print term that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper.  In the early days this print term was adapted and used in web development to refer the portions of a web page that can be visible without scrolling.  When I started designing web pages most users were unfamiliar with the concept of scrolling.  It just wasn't a natural thing for them to do . As a result,  I would design web pages so that all content would be “above the fold”.   When I was designing e-commerce sites on   AOL, page-level vertical scrolling was not permitted. As AOL moved away from their proprietary screen technology to an open web experience, we enjoyed the luxury of designing longer and wider pages.  That was 15 years ago!  A lot has changed.

That Was Then. This Is Now.

According to ClickTale's scrolling research, Today, 91% of the page-views had a scroll-bar. 76% of the page-views with a scroll-bar, were scrolled to some extent. 22% of the page-views with a scroll-bar, were scrolled all the way to the bottom.  As screen resolutions vary greatly, HTML design has improved and browsers have become common place in a users life the time has come for the term and the practice to die! 

The "fold" simply does not exist.  There is significant research, design methods and technology  that renders the "fold" theory useless.  Research like ClickTale's Scrolling Research Report V2.0 - Part 1 and Part 2 completely unravels the "Above the fold" myth.  The most compelling test they ran was proving ‘Absolute Scrolling Reach’.

Tn_Visitor_Attention_vs_Absolute_Scrolling_Reach "This graph below shows us how much time visitors paid attention to each section of different-sized web pages as they scrolled through them. ‘Absolute Scrolling Reach’ measures the distance from the page top (in pixels) that a visitor scrolls down the page."

Let's think about it for a moment.  If you subscribe The “fold” theory, you are assuming everyone uses the same size monitor, monitor resolution and Web browser.  More over, you must also assume we all have the same number of toolbars. Obviously there are too many factors involved to identify a consistent fold location.  The "fold" is just silly!  scrolling has become a natural practice in surfing the web. Scrolling is also associated with most Web 2.0 design.  Big, clear text and spacious content implies longer web pages.

Web 2.0 Design
Today, I design my pages to use liquid layouts that stretch to the current user's window size in order to avoid frozen layouts that are always the same size. Great consumer centric design does not give equal weight to all the content in a site. It puts its most valuable messages at the top and throughout the design.  If you present compelling content and use proper design queues and tools then your users will find and grab your content.  Here are a few examples of mainstream sites that are designed "below the fold" for millions of uses everyday.

Facebook

Screen shot 2009-12-03 at 10.27.59 PM


The New York Times

Screen shot 2009-12-03 at 10.26.14 PM

YouTube

Screen shot 2009-12-03 at 10.28.59 PM

Where was the fold? 
Did you scroll?  of course you did.   (you are scrolling now)

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s clear that the rest of the page can be just as valuable to contextual advertising.

Look at the 2010 Ford Mustang site. 

Screen shot 2009-12-03 at 11.39.52 PM

They get it. I scrolled up and down, clicked and shared.

If its good they will scroll.
It is imperative that we begin to educate our clients and account teams that this is no longer a best practice. It really never was. Open up your design and stop cramming stuff above a certain pixel point. You’re not helping anyone. If your content is compelling enough your users will read it to the end.

Educate your peers and clients with these recommendations in mind:

  1. Your content is king. If your page contains lots of engaging content, users will scroll to the bottom to view it.
  2. Keep important new content that helps users understand the main purpose of your site above the 600 pixel mark.
  3. Design universal navigation and business information that can be modular.  It should allow users to manipulate and control its placement. It should also appear above the 600 pixel mark.
  4. Minimize your written text and maximize images and video, the web is now a converged 3D medium. Users would rather you engage them instead of asking them to read.  Remember they do scan pages.
  5. Use design cues like icons, cut-off images and text blocks to help users expect additional content below the screen.
  6. Try to keep browser-less applications within a given screen space and make sure the inputs and outputs of the application appear within that space.

Join me, lets help dispel the urban design myth by sharing this data.

Research used for this post:

ON: The “Above The Fold” Design Myth via @jpenabickley

February 11, 20093 Comments

ON: A Work In Progress

NN

just a bit of flavor of my 2009 refresh.

ON: A Work In Progress via @jpenabickley

February 25, 2008No Comments

ON: Interaction = Conversations

Enjoy this video from Interaction 2008.(the video contains one of my industry favorites David Armano - who highlights an approach to emotional experiences)

http://www.brightcove.tv/playerswf

The folks at Interaction 08 came from a many different areas of the
business (Graphic design, Information Architecture, Industrial
Design, Programming, Development and Web Design to name a few)  Over
the last year one of the trends I have seen has been the inability to
firmly define our practice in universal terms.

I ponder if in 2008 we will begin to unify the meaning of what we do.  Some in the industry believe in order to properly sell what we do we must agree that we as "creatives" must decide what to call ourselves.   When you combine design, engineering and marketing, what you get are the fundimentals of digital that have converged to play a dominant role in consumers lives.

ON: Interaction = Conversations via @jpenabickley
Speaking Engagments

Talks_Image_jpb

 Joanna routinely to speaks and keynotes at conferences, corporations, non-profits, educational and professional organizations. Her subject matter expertise is customized to meet the needs of each audience. 

View Talks
Book A Date with Joanna
+ ReadyToWear The Future Blog
+ DesignedByUs.org

 

Talk: Making Magic with Ai

Ai is the tool of the modern magician. At the nascent stages of the another industrial and social revolution, magic + math, multiplied by design makes what is invariable hard — seem remarkably easy.

View All Presentations 
+ Videos 
+ Articles
+ Post Digital

#5Things
5Things

Begin the week with a health dose of inspiration, exploration. #5Things is a springboard for creativity, invention and thinking big. Join the optimistic intersection of design, tech and modern life on spaceship earth. 

Connect with Joanna as she explores spaceship earth on:
svg-image
svg-image
svg-image
svg-image
svg-image
svg-image