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:
Posts Tagged ‘design’
2010 Web Design Trend: Increased White Space
Tuesday, March 9th, 2010Make art while designing
Thursday, March 4th, 2010We’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:
A LOVE-ly Redesign
Wednesday, February 17th, 2010
Redesign 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, 2010When 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, 2010Yesterday 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.
Neue school
Monday, February 8th, 2010
I 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
At 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.
Cycle through color models in the color panel by shift clicking the spectrum bar at the bottom of the panel.
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.)
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.
16 two-color gradients are much more manageable than one 17 color gradient.
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, 2010Subtle 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.

Delibar


































