It recently came to my attention that my non designer friends are able to describe the shade and hue of a color better than I can. When I complimented someone on her 'mint green' blouse, my friend asked, "Isn't that 'seafoam'? I thought you of all people would know." Why would I know common names for colors? -- I use hexidecimal and RGB values. Especially working off-site, I communicate colors in terms of #000 and #FFF, not "black" and "white." But it got me thinking. By nature of being hired as a designer, I should be able to communicate colors to non designers -- what if a client asked if I could make the background "isabella"? But who determines the non-technical names for colors? Popularity, one of the factors of usability, comes into play here.While I am in the middle a few color studies to develop a palette for interactive programs requiring low-vision accessibility (which I also will soon publish), I have come across many online tools for sight simulation.
Firefox's Addon Colorzilla and ColorSchemeDesigner3 are among the most helpful. But the most interesting I found was ColBlinder
Screen capture of ColBlinder
With this little tool you can either enter RGB
(Red-Green-Blue) values, HSB
(Hue-Saturation-Brightness) numbers or a hexadecimal code
for a color, to find its closest match of a named color and its corresponding hue. It is also possible to just use the sliders to see how color hues are changing. The list of colors comprises 1640 different color names extracted from several sources on the web. This algorithm and design is copyrighted to Chirag Mehta
Just a tip with abiding by non-exact descriptions -- I have referred to colors by name to designers, non designers, and clients, and I can't think of a situation where I didn't have to pull out a Pantone book or provide a hex code anyway.Me ke aloha,~*d
I just got the photo prints of my baby girl back, and the colors could be less yellow. Hmmmmm, my eyeball calibration on 4 hours of sleep and coffee coursing through my veins is not cutting it anymore. Actually, I used to use Adobe Gamma back in CS3, but they don't include it anymore. Came across the Xrite EODIS3 i1Display Pro
on Amazon by recommendation. I know I'm late on this, but still pretty excited to have true color calibration hardware around the office to test at will. The ambient lighting for my HPw2408h monitor is way off, and it will be really interesting to see how it sets all the monitors in the video editing studio. Hoping the investment comes through in future print and web/interactive work.
Look at the before and after. You can see the vibrance and saturation levels shift to bring down that oversaturated yellow hue. Love it.
Me ke aloha,
A quick response to recent interface designs
This year's argument of whether or not to "imitate real life" in UI design is simply not about computational versus mechanical intuition - Windows vs. Apple OS. It's a style choice that brings us right back to marketing: Which consumers prefer what? Whether it's wood-grained bookshelves or flat one-color buttons, just design it for your market.
Good reads:"Your Skeuomorph is Showing"
by Vox Fera Fox Vera
"Skeuomorphism 2: Authenticity
" by JOSEPH SCHERER
"7 user interface design trends you need to know about
" by Peter Vukovic
As a Mac quack and visual comm professional, I browsed mostly with Safari and Firefox for a few years. I've tried Opera and BlueDolphin (or whatever it was called on the Android OS), but Chrome won me over this year with its speed, privacy, task manager, and especially its address bar as a Google search box. Task icons on the address bar make accessing your personal apps so fast, that you can customize and minimize clicks, which is every graphic designer's dream. Chrome still needs more apps and optional extensions, which I'm sure will improve over time, but adding and removing extensions is so easy. Pretty much anyone would benefit from switching to Chrome. People, you need to get off IE already (re: http://www.favbrowser.com/november-2011-google-chrome-share-up-internet-explorer-firefox-safari-opera-down/
). Someone please tell me if they disagree.
I read an article today that made me proud to be a working digital artist amid this decade's technology developments. Pat LaPointe
from Metrics Insider at MediaPost Publications mentions some interesting points about marketing experimentation that complements my career philosophy; that the art side of good marketing creatives needs the science side of research and data, plus the ability to suit each medium.Pretty much every day, I beat myself up about keeping up with the latest technologies, from iPhone apps to webfonts. I am repeatedly challenged to perfect this changing art of scalability, interactivity, and imagery
, where "shifting sands are the rule, not the exception," as LaPointe puts it.The article doesn't really give us the magic formula to excel in marketing communications, but the challenge is the reason I chose this career in the first place.
Anyway ... thought I'd share.
Article: "Why Does Marketing Have To Be So Damned Hard?"
Me ke aloha,
I created a few new vector shapes to add to my Custom Shapes collection for Photoshop. If you are a shipping box designer, no doubt you need my free .csh download.I didn't design these icons -- they are industry-standard symbols for
"Keep Dry," "Handle With Care" and "This Side Up"-- but I converted them into scalable and editable vector formats for large-format design. You may have seen other variations, since they are in fact symbols, not logos. My version uses a bubbly style because it was appropriate for my client's box design. I used the Pen Tool to trace a low-resolution jpeg and added a rounded box to enclose the symbols. There are some jagged anchor points, but works fine as is.On the other hand, the JAWA, VIA and JWL symbols are logos and not to be used unconsciously. I am not accountable for the brand guidelines, so beware of your usage of the Japanese certifications and marketing trademarks (source: Japan Light Wheel Alloy). NOTE: Box designs are typically created in Adobe Illustrator because of the large-format requirements. However, the artwork provided to me was in Photoshop format and I finished the design in Adobe Photoshop CS4 where I created these vector shapes.
For help on using Photoshop's custom shape tool, refer to Adobe Design Center.
|File Size: ||57 kb|
|File Type: || csh|
One of my career heros, Al Ries, author of 1996's Focus: The Future of Your Company Depends on It
, wrote an article last year "Marketing Success Comes From the Right." This subject of common sense versus marketing sense came up again, as I'm making some visual identity determinations today.
I am famously right-brained--a visual thinker, fierce in writing, cowardly in person. I much prefer an email or text message to a phone call. The challenge is that CEOs and managers are totally opposite.
Ries reminds us that business solutions are routinely left-brained: Improve the products. Cut the costs. Reduce the prices. Then hold employee meetings and talk about loyalty, enthusiasm and team building; but, that we right-brained folk really need to push our marketing sense through all the facts and statistics.
While it's illogical to present unproven ideas, I have to remind myself that my wild right-brained ideas sometimes
serve a good purpose =P. Steve Jobs would agree. I thought I'd share the article in case you need encouragement for the day.
Article (excerpt): "Marketing Success Comes From the Right: Are You a Left Brainer or a Right Brainer?"
Me ke aloha,
I have to admit, I'm not a programmer nor a web developer. I don't know much about framework schemes and databases. But I know just enough Cascading Style Sheet (CSS) form and Hypertext Markup Language (HTML) to make my print design function for the Web.
Facebook offers their own language too: Facebook Markup Language (FBML)
. It is a great branding tool for any business. I still don't understand the language completely, but I was pretty much able to make it work by adding <fb:fbml>
tags to my HTML code. There are a few resources online that explain FBML in detail. As a print designer, I prefer to leave the details to trained programmers.5 Tips:
Luckily for us print designers, imitating print design on the web is becoming increasingly popular. Here are a few tips I can offer to other transitioning print-to-web designers like myself.
- Add the Static FBML application to your Facebook Fan Page. (Static FBML is not available for personal pages). I believe Facebook recommends the app for most fan page categories. If it is not in your apps or recommended apps, type "Static FBML" into your Facebook search bar to add the application to your page. Once you can access the app, you will see the field to enter the a tab title and a field to enter your FBML code.
- Use tables. Purely by observation, I noticed that FBML ignores my spacer.gif images that Photoshop renders for in-between slices. So instead of using <td> cells throughout the code, I bypassed the limited HTML help that Photoshop could offer and used CSS for a background image and simple tables to position my Design Gallery images. The maximum canvas width is 760 px.
- Photoshop your background. The key to producing a branded look is to carefully design your background image. I didn't really take a lot of time to plan out this example. In fact, I was so eager to try FBML that I quickly took a stock photo and superimposed my face just to create an effective image for the purpose of my tab "All about d*." And it's not even me. Ah, the beauty of photo manipulation.
- Minimize code. FBML does not read relative links, so store your images on a low-character server name. You might also have noticed that I didn't space out the gallery images. This is because I am under the impression that pages created using FBML have a maximum character limit. Again, I'm not completely sure of a limit, but it is good practice anyway to keep your codes as short as possible without sacrificing load time. Of course, if spacing is a priority in your design, go ahead and put spaces.
- Lastly, consider your audience. Chances are, you are using a Facebook Page as a feed to your real website, so you want to use your custom tab as an opt-in initiative to your primary site rather than some confusing visual for your brand. You can also change your wall settings to default to your new FBML custom tab as a landing page. There's nothing like making a first impression with a snazzy opening.
Take it or leave it, but these are my novice tips on FBML. I will explore iFrames, Javacript, and Flash soon, so I will have more to shed on the topic later. Also check out some useful tools on www.vegasproeditors.com
Me ke aloha,
Receiving a critique or usability test is probably one of the hardest things designers do in our work. But detached opinions are what we need after days, if not months, of our own revisions. I mentally work with design critiques written into my process in order to tune into my overall goals, but I rarely have the luxury of conducting them. So I created a Facebook Page to provide another inlet for critiques.
While the model isn’t perfect, I value the opinions of the typical Facebook user. Both the perspective of the potential customer and viewpoint of other designers (albeit for different purposes) are invaluable to a successful design.
It is great to receive a personal opinion, but this should not be confused with the perception of what a customer needs or wants. If you must offer your personal view, just express that distinction. Beware of buzz terms like “clean lines” “retro” “old” technological” and “friendly,” since they may have a different meaning to you as they do to me. If you have trouble putting your thoughts to words, talk about the impressions and feelings a design leaves you with.
My hope is for critics to ask questions (rather than making single recommendations).
“Instead of saying, ‘While I think those flyout menus are slick, I recommend you nuke them and put the links in the center of the page,’ the critic might ask, ‘What alternatives did you consider for the flyout menus?’ By moving the conversation to talk about the bigger picture, everyone can discuss how this element (the flyout menus) is contributing to the total experience.” ~Jared M. Spool, User Interface Engineering
Here are questions as a guideline for a critique:
- Did you understand what the design was trying to communicate, or did it leave you feeling confused?
- Can you suggest alternative examples?
- What stands out the most when you first look at the design?
- What leads your eye around from place to place?
- What is interesting about the design?
- What could the artist revise to have a more successful composition, flow, character development, etc.?
- Would you purchase this product?
As always, I will provide data and research to help everyone agree on the likely customer perspective on different ideas. Remember that there are many factors involved in a design, some of which I have little or no control over.
Click on 'Become a Fan' to start a critique. Facebook Page: http://www.facebook.com/dsinelab
Me ke aloha,
A powerful logo design:
- has a strong, balanced image with no little extras that clutter its look
- is distinctive and bold in design, making it easy to see at a glance
- has graphic imagery that looks appropriate for your business
- works well with your company name
- is done in an easy to read font
- communicates your business clearly
- looks good in black and white, as well as in color
Me ke aloha,