90 posts categorized "Web 2.0"

December 11, 2010

Jigsaw a creative group based out of Milwaukee came up with an heart-warming interactive exhibit at St. Vincents Regional Cancer Center at St. Mary’s Hospital where 7,000 guests could engage with a 45′ X 7′ rear-projecting interactive wall. Guests could walk by the wall, engage with hundreds of hand written messages drifting around the color changing field. Guests could then us a stylus to write a message of hope on a kiosk which would be re-written on the wall. This wall was a living, breathing organism. Some of the messages would read “Hope is a smile on a child’s face,” “Hope is another year with my mom”, “Hope is my family”. This exhibit blurs the line between a creative campaign and makes an emotional connection with each member that views it, breathes it or lives in the space it is in.

September 11, 2010

nine years later and the images of that day still evoke tears, the stories make you pause and the names of the victims read out loud on this day remind you of how fragile life is. Bing has always commemorated this day with stirring images on their home page. (see last year) Today is no different.

Here are a few other digital images and destinations to remember today.

"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, In Part Three: Color. Today we I will focus on art direction & elements.

Part Four: The Art of Design

The visual metaphor, typography, textures, information graphics, surreal, illustration... you name it I have done it. Art direction is where I love to play and dramatize the idea. When it comes to apps this is where you can have some real fun! Your creativity can go wild here with texture, icons, patterns, etc. Keep in mind that design elements also play a big role in setting the mood of the design. So keep things consistent with the goals of the website and it’s audience. Also keep the design elements consistent with the other three components (Layout, Typography and Color) already mentioned.

Consistency in action

The designer of Red Velvet Art did an excellent job of utilizing the same hand drawn style throughout the various design elements. Notice how the icons, background pattern and doodles all work together. The consistency also flows through to the typography and retro color scheme.

Attention to detail

The Squarespace blog has a typical blog layout and an overall clean design, but notice the pixel perfect tick marks that line the left and right borders of the content area. It’s such a minimal design element, but it serves it’s purpose in establishing focus on the content while staying consistent with the rest of the design.

Less really is more

This design could have worked well on a white background, but Elliot Jay Stocks loves using texture. To stay consistent with the open feel of the site, he went with a light and subtle grunge texture. It works because it doesn’t take away from the minimalism of the layout and still adds another layer of interest to the design.

"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 LinesChoosing 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.

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.

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.

September 02, 2010

"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: TypographyFrom 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.

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.

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.

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.

August 30, 2010

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.

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:

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: