@font-face {font-family: 'SIFONN_PRO';src: url('https://joannapenabickley.com/wp-content/uploads/2021/01/SIFONN_PRO.woff') format('woff');}@font-face {font-family: 'IBMPlexSans-Medium';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-Medium.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-Italic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-Italic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-Thin';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-Thin.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-SemiBoldItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-SemiBoldItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-SemiBold';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-SemiBold.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-ThinItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-ThinItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-Regular';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-Regular.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-ExtraLightItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-ExtraLightItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-LightItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-LightItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-BoldItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-BoldItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-Bold';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-Bold.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-MediumItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-MediumItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-Light';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-Light.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSans-ExtraLight';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSans-ExtraLight.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-ExtraLight';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-ExtraLight.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-Bold';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-Bold.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-Light';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-Light.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-SemiBold';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-SemiBold.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-Regular';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-Regular.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-BoldItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-BoldItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-Italic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-Italic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-Medium';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-Medium.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-ExtraLightItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-ExtraLightItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-LightItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-LightItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-Thin';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-Thin.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-SemiBoldItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-SemiBoldItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-MediumItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-MediumItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexMono-ThinItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexMono-ThinItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-Bold';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-Bold.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-BoldItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-BoldItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-Light';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-Light.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-Medium';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-Medium.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-Italic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-Italic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-ExtraLightItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-ExtraLightItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-MediumItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-MediumItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-LightItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-LightItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-SemiBoldItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-SemiBoldItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-ThinItalic';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-ThinItalic.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-SemiBold';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-SemiBold.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-Thin';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-Thin.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-Regular';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-Regular.ttf') format('truetype');}@font-face {font-family: 'IBMPlexSerif-ExtraLight';src: url('https://joannapenabickley.com/wp-content/uploads/2022/04/IBMPlexSerif-ExtraLight.ttf') format('truetype');}

on: internet design – layout

gravatar
 · 
August 30, 2010
 · 
3 min read

If you have been listening to the experts this past year, you should know that the web is dead. This month Wired magazine proclaims "Long Live The Internet." So what does that mean for Web design? We must evolve to Internet Design!  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.

There’s a lot that goes into crafting a fabulous internet or digital experience, but I believe it can be broken down into four main components. Over the next four days I will break down the four key components of a great internet design with examples and resources. Follow along and feel free to contribute! 


Part One: Your Audience Needs A Solid Layout! 
It all starts with an idea, a goal or a vision. All aspects of a great design must compliment each other while helping achieve the end goals of the service or app. The importance of having a good foundation applies to just about everything in life. If the foundation is wrong, everything on top of it will crumble. In app and internet service design, the foundation is your layout. Your layout should dramatize an idea or core service behind the app. Laying out an app or internet service involves placing all the content and navigational elements. Dependent on how you bring your app to life, you must establish a hierarchy in these elements that gives the most important ones prominence, and this should be determined by how you think your audience should use the app. 


1.1: The Audience:
Learn as much as you can about your audience. Ethnographic research has been my favorite form of research. When you can't do that eMarketer and internet listening will also give you a basis of insights about your audience and what they expect out of the brand.


1.2: Wireframes:
No matter the audience, I start by sketching out basic wireframes. I put all of my digital toys away and pick up a paper and pencil. I am not a fan of art direction in a wireframe. However, I do believe that it's an easy way to nail down an idea through layout. 

Wireframes should be seen as the bare-bones representation of the various elements that will appear in the interface. Wire frames are typically made up of gray scale boxes and blocks of placeholder text. The key is to keep things simple and not get caught up in color and design elements.

3904628439_68a964a191_z
[ image via dirtyalpacas ]  

Not everyone feels good about the presenting their ideas via pad and paper. I usually take my pencils and then use a digital tool to organize them for presentations. There are several different routes that a designer can take for creating wireframes, and there are tons of applications designed specifically for this. Here are some of my favorite digital wire framing tools:

  1. OmniGraffle
  2. Cacoo
  3. MockFlow
  4. Balsamiq Mockups 
  5. Pencil Project

I would recommend reading or subscribing to Wireframes Magazine. It is a blog written by information architects and interaction designers that has lots of info and examples of layouts and wireframing.


1.3 Whitespace:
Lots of white space is the new black!
One sign you have a great layout can can be found in the negative space. [ No the space does not have to be physically white.] Many designers make the mistake of over crowding their app designs. Don’t be afraid to let your pages breathe. Adding larger amounts of white or negative space will actually give your design a more sophisticated and updated look. Take a look at the use of negative space in these apps and services:

  1. reeder 
  2. Awesome Note
  3. Color Stream 
  4. iShots 
  5. Weightbot
  6. Incredibooth 
  7. Camera +

Stay Tuned...Next Up: Part Two: Typography!

on: internet design – layout via @jpenabickley
Comments
Im starting a blog about internet and design. I post tutorials, interesting links, show how i learn photoshop, illustrator, flash, actionscript, html and more things you can use as a designer or web developer.
Im starting a blog about internet and design. I post tutorials, interesting links, show how i learn photoshop, illustrator, flash, actionscript, html and more things you can use as a designer or web developer.
Im starting a blog about internet and design. I post tutorials, interesting links, show how i learn photoshop, illustrator, flash, actionscript, html and more things you can use as a designer or web developer.

Leave a Reply or Thought

This site uses Akismet to reduce spam. Learn how your comment data is processed.

INSPIRING ORATOR

SPEAKER-2022

Joanna is regarded as a headline speaker at conferences, educational and professional organizations. Her subject matter expertise in tech, design, Ai and Web3 is customized to inspire and influence global audiences. 

View Talks | + Book Joanna To Speak
 
+ Ready-To-Wear The Future Blog
+ CognitiveExperience.design
+ DesignedByUs.org

 

FEATURED TALK: Generative design
GenerativeDesign-2022

Artificial intelligence (Ai) is the tool of the modern designers. Amidst the great global reset and an industrial revolution, Ai aided design unites science and art to make what is has been invariable complex and hard seem indistinguishable from magic.

Presentations | + Videos  | + Articles

PODCAST: Designed by
DesignedBy_Thumbnail_2022

DesignedBy.show invites you to meet the Scientists, Technologists, Engineers, Artists, Mathematicians, and Designers, building an inclusive future today. Join the audacious trailblazers transforming our world for the next 100 years.

CONNECT WITH JOANNA AND COMPANY AS SHE EXPLORES SPACESHIP EARTH

JoannaPenaBickley_Logo_White
Substance_logo-Large
LOGO-CXD
DBU_Logo
twitter-1
instagram-1
facebook-1
youtube-1
Linktree44
Share via
Copy link
Powered by Social Snap