@font-face {font-family: 'SIFONN_PRO';src: url('https://joannapenabickley.com/wp-content/uploads/2021/01/SIFONN_PRO.woff') format('woff');}

May 5, 2012No Comments

Moqups

Visit

Moqups is an unique app based on HTML5 and SVG that allows you to quickly create crisp looking vectorial mockups.  Get in on the beta at: http://moqups.com

Moqups via @jpenabickley

September 2, 20102 Comments

on: internet design – typography

"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.  Yesterday I covered Layout.  

Part Two: Typography  
From best practices to HTML5 trends for apps and internet services Typography is a key component in developing the experience for the user and connection to the brand.  Just like layout, typography plays an important role in how a user digests the content.  I have seen typography transform ideas.  Choosing the correct typography for your app or internet service is a very important part of the design process. Apps are a communication tools – very powerful ones – you can use the typography to help you on exposing your ideas! I am a big fan of using HUGE typography! If the words are direct and beautiful them flaunt it - make it the core of the design.

2.1 Your Typography Skills: Having a strong foundation of typographic knowledge is crucial. Here are some of my favorite sites that will help improve your type skills through learning about typography.

  1. TypeSites
  2. Typographica
  3. TypeForYou
  4. TypographyServed
  5. WeLoveTypography


2.2 Bigger is Better:
Big type is important.  The user knows this.  Big type will call attention to headlines. I also think that if done correctly Large type can serve as information graphics. All caps and a large font size for the titles and subtitles can establish a clear hierarchy that distinguishes the headings as having more importance than the paragraph below.  Check out these sites and apps for uses of big impactful type.

  1. rareview.com
  2. Hull Digital Live
  3. Cupcake Creative Studio
  4. Notorious Design
  5. Visual Box
  6. WordIt
  7. GiantCreative
  8. Glitch

 

2.3 Make it Legible:  I know this sounds like something that should be easy, but often Designers do not let the "cookies cool" and step back for a day from their type to see if it is still fresh or legible.  By using high contrast between the text and the background, Dan Cederholm made the text on Simple Bits very easy to read. Also notice the amount of line spacing used in the paragraphs.

Web design 

Web design-1

Always make sure to use enough to make a body of text easy to read. This normally requires some experimentation, but a good rule of thumb is to set the line height to 1.5em, which is 1.5 times greater than the font size. [example via WDL] 

2.4 HTML5, CSS and TypeKits: You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. While I am not convinced that Flash sites will die, I am seeing brands replace Flash for specific things like video and basic animation. HTML5 is doing wonders for expanding the capabilities of Typography in mobile and internet apps! Using HTML 5 and CSS type sites like TypeKit, Veer and MovableType have pushed the  CSS @font-face technology required for advanced web typography.  This technology is now supported by Internet Explorer, Firefox, and Safari.

 

2.5 Typography Tools for Internet Designers: There are tons of type tools for internet designers to use. Here are a few of my favorites.

  1. CSS Typeset
  2. What The Font
  3. FontStruct
  4. TypeTester
  5. Baseline Rhythm Calculator

 

Related Articles:
on: improving web typography

Research: WDL, Minimalist Magazine and Brand with Type.

 

Next Up: Part Three: Color Outside The Lines

on: internet design – typography via @jpenabickley

September 2, 20102 Comments

on: internet design – typography

"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.  Yesterday I covered Layout.  

Part Two: Typography  
From best practices to HTML5 trends for apps and internet services Typography is a key component in developing the experience for the user and connection to the brand.  Just like layout, typography plays an important role in how a user digests the content.  I have seen typography transform ideas.  Choosing the correct typography for your app or internet service is a very important part of the design process. Apps are a communication tools – very powerful ones – you can use the typography to help you on exposing your ideas! I am a big fan of using HUGE typography! If the words are direct and beautiful them flaunt it - make it the core of the design.

2.1 Your Typography Skills: Having a strong foundation of typographic knowledge is crucial. Here are some of my favorite sites that will help improve your type skills through learning about typography.

  1. TypeSites
  2. Typographica
  3. TypeForYou
  4. TypographyServed
  5. WeLoveTypography


2.2 Bigger is Better:
Big type is important.  The user knows this.  Big type will call attention to headlines. I also think that if done correctly Large type can serve as information graphics. All caps and a large font size for the titles and subtitles can establish a clear hierarchy that distinguishes the headings as having more importance than the paragraph below.  Check out these sites and apps for uses of big impactful type.

  1. rareview.com
  2. Hull Digital Live
  3. Cupcake Creative Studio
  4. Notorious Design
  5. Visual Box
  6. WordIt
  7. GiantCreative
  8. Glitch

 

2.3 Make it Legible:  I know this sounds like something that should be easy, but often Designers do not let the "cookies cool" and step back for a day from their type to see if it is still fresh or legible.  By using high contrast between the text and the background, Dan Cederholm made the text on Simple Bits very easy to read. Also notice the amount of line spacing used in the paragraphs.

Web design 

Web design-1

Always make sure to use enough to make a body of text easy to read. This normally requires some experimentation, but a good rule of thumb is to set the line height to 1.5em, which is 1.5 times greater than the font size. [example via WDL] 

2.4 HTML5, CSS and TypeKits: You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. While I am not convinced that Flash sites will die, I am seeing brands replace Flash for specific things like video and basic animation. HTML5 is doing wonders for expanding the capabilities of Typography in mobile and internet apps! Using HTML 5 and CSS type sites like TypeKit, Veer and MovableType have pushed the  CSS @font-face technology required for advanced web typography.  This technology is now supported by Internet Explorer, Firefox, and Safari.

 

2.5 Typography Tools for Internet Designers: There are tons of type tools for internet designers to use. Here are a few of my favorites.

  1. CSS Typeset
  2. What The Font
  3. FontStruct
  4. TypeTester
  5. Baseline Rhythm Calculator

 

Related Articles:
on: improving web typography

Research: WDL, Minimalist Magazine and Brand with Type.

 

Next Up: Part Three: Color Outside The Lines

on: internet design – typography via @jpenabickley

September 2, 20102 Comments

on: internet design – typography

"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.  Yesterday I covered Layout.  

Part Two: Typography  
From best practices to HTML5 trends for apps and internet services Typography is a key component in developing the experience for the user and connection to the brand.  Just like layout, typography plays an important role in how a user digests the content.  I have seen typography transform ideas.  Choosing the correct typography for your app or internet service is a very important part of the design process. Apps are a communication tools – very powerful ones – you can use the typography to help you on exposing your ideas! I am a big fan of using HUGE typography! If the words are direct and beautiful them flaunt it - make it the core of the design.

2.1 Your Typography Skills: Having a strong foundation of typographic knowledge is crucial. Here are some of my favorite sites that will help improve your type skills through learning about typography.

  1. TypeSites
  2. Typographica
  3. TypeForYou
  4. TypographyServed
  5. WeLoveTypography


2.2 Bigger is Better:
Big type is important.  The user knows this.  Big type will call attention to headlines. I also think that if done correctly Large type can serve as information graphics. All caps and a large font size for the titles and subtitles can establish a clear hierarchy that distinguishes the headings as having more importance than the paragraph below.  Check out these sites and apps for uses of big impactful type.

  1. rareview.com
  2. Hull Digital Live
  3. Cupcake Creative Studio
  4. Notorious Design
  5. Visual Box
  6. WordIt
  7. GiantCreative
  8. Glitch

 

2.3 Make it Legible:  I know this sounds like something that should be easy, but often Designers do not let the "cookies cool" and step back for a day from their type to see if it is still fresh or legible.  By using high contrast between the text and the background, Dan Cederholm made the text on Simple Bits very easy to read. Also notice the amount of line spacing used in the paragraphs.

Web design 

Web design-1

Always make sure to use enough to make a body of text easy to read. This normally requires some experimentation, but a good rule of thumb is to set the line height to 1.5em, which is 1.5 times greater than the font size. [example via WDL] 

2.4 HTML5, CSS and TypeKits: You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. While I am not convinced that Flash sites will die, I am seeing brands replace Flash for specific things like video and basic animation. HTML5 is doing wonders for expanding the capabilities of Typography in mobile and internet apps! Using HTML 5 and CSS type sites like TypeKit, Veer and MovableType have pushed the  CSS @font-face technology required for advanced web typography.  This technology is now supported by Internet Explorer, Firefox, and Safari.

 

2.5 Typography Tools for Internet Designers: There are tons of type tools for internet designers to use. Here are a few of my favorites.

  1. CSS Typeset
  2. What The Font
  3. FontStruct
  4. TypeTester
  5. Baseline Rhythm Calculator

 

Related Articles:
on: improving web typography

Research: WDL, Minimalist Magazine and Brand with Type.

 

Next Up: Part Three: Color Outside The Lines

on: internet design – typography via @jpenabickley

SPEAKING ENGAGEMENTS

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
+ CognitiveExperience.design
+ 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

#5THINGS LIVE

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 | LinkTree

JoannaPenaBickley_Logo_White
LOGO-CXD
Substance_logo-Large
DBU_Logo
twitter-1
instagram-1
facebook-1
youtube-1
Linktree44