Posts Tagged ‘design’

2010 Web Design Trend: Increased White Space

Tuesday, March 9th, 2010

Today’s websites are getting cleaner, more streamlined and focused on an increased use of white space. White space refers to the negative space between and around the elements in a design (graphics, type, columns, etc.). Those who are inexperienced with the use of white space may view it as an empty area, and thus a waste of valuable screen real estate. This blank space, however, is extremely beneficial to a design and the usability of a site. White space will make a layout much easier on the eyes. It reduces the amount of text a viewer will see at one time, increasing legibility and helping a visitor quickly find what they are looking for. It can also improve the structure of a site by creating a visual separation of elements, allowing content to stand out from the background. Not only is it functional, increasing space can also give a web site a more professional, uncluttered, and fresh appearance, providing a strong platform on which to present your message. Check out the examples below for excellent uses of white space:

Apple

Jason Reynolds

Indie Labs

Buffalo

Astheria

Left

Make art while designing

Thursday, March 4th, 2010

We’ve been playing with the mouse tracking application IOGraph to see what our mouses create while we work away as usual. The application tracks your mouse path, making a visual representation of every move you make. The images are cool looking and even more fun when you look at them while thinking about how the movements were effected by what programs you were working in, what type of project you were working on, where your palettes were placed, whether you tend to use key commands or prefer to use the menu etc. This image on Flicker shows the IOGraph image over the top of the desktop to illustrate this point.

Here are images taken after an hour and a half from each of the designers.

Here is Robin working on an eCommerce site in Photoshop:

And Greg researching on the internet:

And me working back and forth between Illustrator and InDesign:

2010 Web Design Trend: Speaking Navigation

Thursday, February 25th, 2010

For some, one word navigational links simply aren’t clear enough. Designers are now trying to explain, in a short snippet, what the visitor should expect to see upon clicking on a link. This additional short phrase has been coined as “speaking navigation,” as opposed to “silent” navigation which follows the traditional style of using keywords to represent a group of information. The end goal in this method is to create a more effective communication style with site visitors. If content can be clarified, navigation will be simplified for the user and could potentially generate increased traffic through the site. Check out the examples below of speaking navigation:

Sifter

Sifter

Lift Interactive

Lift Interactive

AgentPoint

AgentPoint

Lennon Bus

Lennon Bus

You Version

You Version

Dishizzle

Dishizzle

goodbytes

goodbytes

A LOVE-ly Redesign

Wednesday, February 17th, 2010

VLN_Presentation_01.inddRedesign Valentines Day? Where do you start? The creepy cupid? The cheesy, over the top combination of red and pink, hearts and roses, teddy bears and love birds? Accepting a challenge from Public Radio’s Studio 360, the husband and wife design team at Under Consideration started with the classic heart shape. They approached the project as they would any redesign project and began by defining the problem and establishing goals. Once they determined their goals they went on to create a simple, universal mark to represent Valentines day. They then developed a new color palette and revamped traditions. You may like, hate or maybe even LOVE this v-day makeover. I personally am loving the new color palette, the return to home made cards and especially the “hand-branded” sticky notes used to leave unexpected notes on Valentine’s Day and maybe even all year for your special someone to find. Regarding the mark, I am a bit torn, I love the simplicity, I like the concept of starting with the heart, I appreciate that it also makes a “V” and enjoy the added benefit that the X-like shape reminds me using Xs to symbolize kisses. However, the mark in and of itself doesn’t give me the feeling of love or romance. But, regardless of how you feel about the final product, I think it is a great illustration of the rebranding process. Looking at the process in regards to such a well known, generic entity gives good insight into the process itself. For an in-depth look at the process check out the article on Brand New.

A Lorem Ipsum For Images

Tuesday, February 16th, 2010

exampleWhen I first started working in a true creative industry, it took a little time to understand the value of good copy writing.  Along the way, I found out about something called “Lorem Ipsum” text, or placeholder copy, mostly used in creative design, publishing and development to show what blocks of text would look like when placed on the web page or print item until proper copy could be produced.  This fake copy looks like the real thing, and gives a sense of the overall visual layout for the finished creative.  It looks kind of like Latin, but it is not.  When a web page needs this kind of treatment, I usually find this Lorem Ipsum Generator to do the trick quite nicely. (more…)

Zoom Creates a Self Promo—For Reel

Thursday, February 11th, 2010

Yesterday our amazingly talented, patient, smart, nerdy, impatient, committed, ingenious, thoughtful, creative, resourceful and brilliant development team put the finishing touches on the Zoom Creates self-promo reel. These guys are absolutely unbelievable. We described our vision for the reel and they told us: “That’s impossible. You can’t do that. The technology doesn’t exist. You cannot change the laws of physics. We will need super-computers, expensive software, years to write code, more chips, salsa and milkshakes than you can afford.” Then, five minutes later (slight exaggeration) came back to us with a solution–an ingenious solution: open-source software. The only hitch was they had to teach themselves how to use it. And that they did. They figured out how to use Blender for the 3d animation and Kdenlive for the video post processing. Sprinkle in some Flash and great ideas of their own (watch the mouse pointer jump from one panel to the next and the animated atom) and there is no stopping these guys.

They even used math! Lots of math. That was the most mind-boggling thing I witnessed. I like math and all but if it were me putting this thing together, I think I would have approached it more organically, finding the music then individually timing and positioning the pieces. Not these guys. After the look and feel/animation comps were completed, they looked at the music, the number of pieces and the frame rate etc. and gave each piece a number and had it all laid out on a table with little pieces of paper. Independently, Kurtis worked on the music while Kris positioned all the pieces and when they put them both together, it was like magic. The animation synced up with the music almost perfectly. It was unbelievable. These guys know what they talking about. Well done, lads.

This entire project has been such a great team effort. Everyone here at Zoom Creates contributed. The countless hours of concepting, discussing, designing, scheduling, production, learning, listening, laughing and collaborating have truly produced a project to be proud of. Not only does it show off some of Zoom’s best work, it is a portfolio piece in itself.

2010 Web Design Trend: Icons

Tuesday, February 9th, 2010

The use of icons is getting big in modern web design. Icons are being employed to enhance the user experience, allowing for better visual recognition of elements on a page. Today’s icons are extremely stylized, far from old-school clip art of the past. If it is well designed, an icon can make a great visual impression as well as enhance the look of your site design. An effective icon will give a clear meaning to the user and allow them to easily spot what they need faster than from standalone text. Though icons are great for usability, too many icons can distract the user and get confusing. Today’s focus is on using icons more sparingly and giving the icons you do use higher-value locations. Fewer, more effective icons command attention and will be more appealing to the user. Check out the examples below of excellent uses of modern icons:

FreelanceSwitch

FreelanceSwitch

AshWebStudio

AshWebStudio

Curb Innovative

Curb Innovative

Artificial Studio

Artificial Studio

EnviroSpeakTV

EnviroSpeakTV

Dishizzle

Dishizzle

Macrabbit

Macrabbit

Media Temple

Media Temple

SMS Parking

SMS Parking

Neue school

Monday, February 8th, 2010

Helvetica_OldVNeueI just finished reading Travis Neilson’s article comparing Helvetica and Helvetica Neue and found it very interesting and informative. I have long used Helvetica Neue but mainly because we own the entire font family — not because I actually knew what the differences were and preferred this version. The article does a great job of analyzing those differences and showing them visually. You can also download the full study if you would like to compare letterforms not shown in the article. ITC also has a good article which outlines the changes that were made when this classic family was reworked in 1983. I was really surprised to see how much softness was added to the rounded characters (like “e” and “o”). The effect gives Helvetica Neue a much more cohesive feel. So, I personally will be sticking with Neue. But whether you are Old School or Neue School, this makes for an interesting comparison.

Challenge Update with Adobe Illustrator Tips

Tuesday, February 2nd, 2010

014-Paper-Letters-vs-the-AbyssAt the beginning of last month, as a new year’s resolution, I accepted Smashing Magazine’s Design Something Every Day challenge. I am happy to report that I have not fallen off the wagon. I have created and posted to Holodek 365, my blog, every day since January 1. Let me tell you, it is quite a commitment. It is not as easy to find time every day as I thought it would be, but the persistence seems to be paying off.

My thought for the first month was to strictly do Adobe Illustrator tutorials. These became something to fall back on when I was feeling uninspired which so far has been about half the time. I cannot believe all I have learned from following these few tutorials—everything from basic commands that I should know (or have just forgotten) to advanced techniques.  Thought I would share a few of the simpler ones because they have come in super handy since I relearned/discovered them.

To scale just the pattern that has filled a shape, select the shape, bring up the scale tool’s dialog box by double clicking on the tool in the toolbar and check only Patterns in the Options section and then type in a scale percentage.

pattern

Cycle through color models in the color panel by shift clicking the spectrum bar at the bottom of the panel.

cycle

Option + Command click and drag a slider in the color panel to move the other sliders in relation to it. This keeps similar color but with a different tint or intensity. (Especially helpful in RGB mode when creating a gray.)

click-and-drag

Make a layer a “Template ” layer buy selecting Template from the Layer Panel’s fly-out menu. This will lock the layer and make the graphic transparent for easy tracing.

template-layer

16 two-color gradients are much more manageable than one 17 color gradient.

gradients

I have also learned that sometimes rasters have their place in Illustrator (especially drop shadows). Most the rasters I used were eventually vectorized and/or live traced to achieve some great effects I never thought possible.

Hope you find this useful. Here’s to another successful and productive 333 days.

2010 Trend Prediction: Subtle Textured Backgrounds

Friday, January 29th, 2010

Subtle background textures will be popping up all over the web this year. This new trend doesn’t go overboard with textures (as seen in many grunge styles), but focuses on simplicity and a more precise use of texture. The goal of the trend is to give the site a surface and the illusion of actual texture, but to not distract from the other visual elements on the page. A subtle texture can add dimension and depth to a design, creating a sensory experience for the viewer. If the texture is used well it can become a significant and beautiful feature of the web design. Check out the examples below showcasing great uses of subtle textures.

One Twenty Seven

One Twenty Seven

Delibar

Delibar

(more…)