Laura Blalock » Design

Adobe Design Center – Columns and articles from experts on web design and motion graphics

Laura — Sat, 19 Dec 2009 03:30:12 +0000

Many young web designers view their craft the way I used to view pop culture. It's cool or it's crap. They mistake Style for Design, when the two things are not the same at all. Design communicates on every level. It tells you where you are, cues you to what you can do, and facilitates the doing. Style is tautological; it communicates stylishness. In visual terms, style is an aspect of design; in commercial terms, style can communicate brand attributes.

via Adobe Design Center – Columns and articles from experts on web design and motion graphics.

I know this has been linked everywhere. But that’s because it’s hits the nail right on the head.

Systematizing the Graphic Design Process | Webdesigner Depot

Laura — Sat, 24 Oct 2009 14:31:11 +0000

Unlike other forms of art, graphic design is not just about taking paper and pen and letting the work flow.

Graphic designers have to help viewers get the message and help sell a service or product.

Creating a design for a client with little or no strategy just doesnâ€™t work. Unlike traditional art, graphic design has to convey a very narrow message.

Developing a system for the graphic design process can help the designer achieve the best results.

Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results.

Here is a simple six-step graphic design process, which you may want to take wholesale or build on.

via Systematizing the Graphic Design Process | Webdesigner Depot.

I learned a lot of these techniques in school but a reminder never hurt.

Finally finished

Laura — Tue, 01 Sep 2009 11:41:10 +0000

I've been working hard on an update to the Midsouth SLA website and it's finally done. I'd love some feedback.

New Toy in the Box

Laura — Fri, 31 Jul 2009 04:46:57 +0000

Typography has been a thorn in web designers' sides for a long time. There are thousands of beautiful fonts in the world but only a dozen or so are available on most computers.

The Original

Enter the CSS font stack. Using font-family you can specify several fonts in order so that if the user's computer doesn't have the first, it checks for the second and so forth. But designers have always wanted more control and variety for their projects.

Workarounds

There are a couple of ways this has been handled. The first is using images for the text. The problem with this is that is takes the pages a lot longer to download. It also makes it impossible for people with disabilities like blindness to use the website. Another work-around is a javascript, flash combo like sIFR or cufón. The first can be tricky to set up and requires the browser to have flash installed. The second only uses a font converter and javascript but results in text that can't be selected or copied.

The New Toy

The lowest learning curve solution and the one that doesn't require dealing with scripts is @font-face. You load the fonts on your server and link them in your style sheet. Then you can use them as normal. To give the developers credit, this has been available in Internet Explorer for years but it's only been available in the other two most popular browsers (Firefox and Safari) in the most recent releases. The next stumbling block is licensing. Very few fonts have been releasedÂ with licenses that allow online use (font foundries are working on this). Font Squirrel has @font-face Kits. Â You browse through a list of freely available type families with web licensing and download a kit with the fonts in regular and IE's proprietary format. You also get a copy of the license and a CSS file with the rules needed to include the fonts in your website. I'm usingÂ Medio for the body copy andÂ Caviar Dreams for the headings and navigation on this site.Â Just load the fonts on your website, include the rules in your CSS and use them in your font stacks as normal. If you want a to use a free font not available on Font Squirrel and you have a PC, Microsoft has a free application called WEFT to create an eot file from the regular files. Just double check the license. We want font makers to stay comfortable letting their creations be used.

What is Design?

Laura — Thu, 09 Jul 2009 22:15:58 +0000

Or the things that go through my mind in the car. Design, art really, is a form of communication. Whether it's emotions or a direct message, they are all trying to communicate something. The rules of design are like the rules of language. Line, shape, value, space, they are the constants that allow the viewer to interpret the message. Some are inborn in all humans, others are taught to us by our culture. Only once you know the rules can you break them properly without losing your viewer. An infamous example on the Internet is programmers who go back later and can't decipher their own code. They broke the rules by not commenting properly so the message is lost. Breaking the rules properly draws attention to a desired part of the message without obscuring the whole.

What I learned about design from Iron Chef

Laura — Mon, 16 Feb 2009 02:31:54 +0000

Yes I am one of the many geeky Iron Chef fans. I loved the original and I love the American version as well. It only hit me tonight though, the may things I had learned from a mere tv show that ca be applied to my own, non-culinary pursuits.

Have a plan

They may not know what the specific ingredient is going to be but they obviously have a plan going in.The secret ingredient is revealed and they go straight to work. The plans have to have some flexibility to account for the unexpected, but you never see anyone asking what they should be doing.

Work now, play later

When they go to work, they are all work. There is very little goofing around until the bell rings and it's all over. Which doesn't mean it's joyless, these are people doing what they love best. There's plenty of celebrating after but the work is their first priority

Stop and look at what you've got

You see them tasting things constantly, checking the seasoning and the doneness. Recently I was creating artwork for a project and was very unhappy with it. I had the luxury of time so I went to something else and came back later. To my surprise, it wasn't nearly as bad as I had thought.

Get opinions

Countless times I've seen sous chefs ask the head chef to taste something. Sometimes you don't have the time or simply can't step far away enough from what you are working on to evaluate it objectively.

It's in the details

Every teacher I've had in art school has told me this numerous times. But nothing has gotten it through to me like watching an ingredient that was little more than a decoration be delicately cooked in wine and carefully placed just so with instruments that looked like tweezers.

Don't be afraid to start over

Something else you see often is chefs unhappy with the way a dish is working just throwing out everything and starting from scratch. Despite the time constraints they're under, they won't turn in something less than their best work. I'm sure there are many more lessons to be gotten from watching masters apply their art. I'd love to hear things others have picked up on.

Second Life as a design outlet

Laura — Thu, 28 Feb 2008 02:26:00 +0000

A number of graphic designers have successfully converted their expertise into Second Life businesses. Everything made in Second Life relies on texturesâ€¦ pictures made in an image program like Photoshopâ€¦ to not only make it look like what the creator wants it to be but to give it depth and reality. So an orb becomes a basketball and an undershirt becomes a tattoo. Because of the ease of entry (software-Gimp is free, upload fees-10L each, 400L for $1, and time), Second Life has a thriving home-grown fashion market. There are people making a living just making virtual doll-clothes and accessories. Real world fashion businesses are taking notice of the money and interest being spent by this circle of fans and are coming into Second Life to create a presence for advertising purposes- and are not doing well. The most memorable of these is none other than Armani. When Armani announced that they were building an in world store there was great deal of anticipation. They hired a good, experienced builder and got a nice store but apparently left the creation of their items (only 10) to their regular designers who presumably didn't have the time to really learn the built-in Second Life tools. The result is a too small collection that the very people Armani was hoping to attract took one look at and said I can get twice the quality at a third of the price. They aren't the only ones though. A famous athletic shoe retailer created a "build your own" factory that doesn't see much use because the resulting shoes take up too much computer and server resources to render. American Apparel has a store as well. They at least have more than 10 items and what they have is ok but when you're options include a leather trench coat and being a dalek, very plain colored t-shirts and khakis don't have much appeal. It's also a well-documented effect that you have to release new items regularly to keep traffic (and sales) up, which American Apparel has never done.

Doing it Right

There have been successful transitions. Most notable is a canadian couture designer named Nyla who has a set of shops where she has taken her real creations and remade them in Second Life. Because she took the time to learn the tools and the customer base her products are excellent quality and well-priced while still remaining in her style. The japanese also have good ideas about in-world advertising. Treasure hunts for freebies are always popular and the word of mouth affect is very strong in Second Life. Now that IBM has given a demonstration at the National Retail Federation on using Second Life for prototyping, there may be more mainstream fashion companies coming into Second Life but independents who can devote the time to learning the environment will still have the advantage for quite a while. Help on learning to use the Second Life templates, scripting language and building blocks can be found on the forums. Marketing guidance can be found here.

Hacking WordPress as an easy updatable link directory

Laura — Thu, 19 Jul 2007 02:08:00 +0000

By now Wordpress has been bent, folded and mangled in any number of ways to for custom CMSs. One of the most interesting ways I did it was to both manage a website and create a small Yahoo! like link directory within it. The website was part of a grant project for helping senior citizens find reliable health information on the Internet. My purpose in using Wordpress as a backend was to speed development time as well as make it as easy as possible for non-techies to update. There were three types of information that needed to be displayed

The link directories
Two multipage tutorials
Static - the front, explanatory page, and the contact page which has since been taken offline.

Looking at it now, there are so many things I would love to change but I also recall how specific the customer was about what she wanted. Since the purpose in using Wordpress was to manage the links, they were the first thing I looked at. Using the custom fields, it was easy to create those in individual posts, using customized category pages to list them. The tutorials, likewise had the individual pages created as posts and separation managed by category. Display of the custom fields, internal navigation and the contact form were managed by plugins. The other static page, the home page, was the index file. Today it could be created with a Wordpress "page" and a preference setting but at the time of creation those features weren't available. Despite the fact it hasn't been updated since I turned it over using Wordpress was the best choice for this project. It shaved considerable time off of development and eased content addition tremendously.

Working with Bad Organizational Colors

Laura — Wed, 18 Jul 2007 02:05:45 +0000

My first professional website. I was so excited, I had worked so hard to position myself within my department for it. Then I realized, I had to work with our official color: orange. Not a nice warm earth tone, or a bright energizing version either. But what I'm pretty sure is the ugliest web-safe color to be found. Dark, dreary and muddy- not the image we wanted to present to our users. Worse, the secondary color was a web-safe green that just made the orange that much worse. Since then, I've found that there are a number of strategies that can be used for dealing with less than ideal colors, unfortunately most of them weren't available to me on that project.

Use it sparingly. This is what we did. A mostly black, white and grey design with punches of orange and little to no green. It worked, but it lacked warmth, energy, and a cohesion with the rest of the organization.
Use a complimentary/analogous color. The colors surrounding the offending one can effect how it comes across. There are about a gazillion color tools and guides out there. Pick a link and take a spin. Unfortunately, as a mere department, we were stuck with official rules which stated only those colors.
Use a similar but not as aweful shade. Most people may not even notice but they'll feel the difference and your statistics will thank you. This is the optimum option because it allows you to keep the full organizational branding while easing away from the ickyness. See color tools for help in finding that perfect double. I think we could have gotten away with this but the committee disagreed.