Friday 28 March 2014

My Design Process — Communicating And Collaborating With Clients - Vanseo Design

My Design Process — Communicating And Collaborating With Clients - Vanseo Design

My Design Process — Communicating And Collaborating With Clients

Posted: 27 Mar 2014 05:30 AM PDT

Your design process impacts your business and it does so beyond helping you design and develop websites. One of those ways is how it impacts your relationship with your client and that’s what I’d like to talk about today.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

I’ve talked about my design process before. When I do I usually mention one benefit of the process is it involves clients early and often. This helps bring a good working relationship and a collaborative spirit to projects.

I don’t speak about this collaborative aspect enough, important as it is. I’m sure you’ve had clients you didn’t work well with. Sometimes you’re both so different little would help you work together better. Other times you might have gotten along, except for some early miscommunication.

Communication is important and I try to build as much in to my process as I can. From the moment a project starts, a dialog begins between client and myself. That dialog leads to a good working relationship and helps shape the finished site.

If You Want Happier Clients, Let Your Clients Decide

Designing a website is a series of decisions. You have goals for a site and there are many choices along the way to reaching those goals. I want my clients to be involved in as many of those decisions as possible and give them the opportunity to make as many of those decisions as they want.

I do guide their decision-making. My clients might be making the final decision, but I’m the one who decides which options are acceptable choices in that final decision. I do my best to provide clients with good choices.

My clients feel more involved in the project, because they are more involved in the project. Because they make many of the decisions that led to their completed site, they feel a greater ownership of the site. Because they make many of the decisions, they end up happier with the finished product and the process that produced it.

Throughout the process I ask a lot of questions. I ask questions to gather information and to get my clients thinking about things they may not have considered. I want them to understand the pros and cons of the different decisions that need to be made and let them make the ones they want.

In a sense I provide constraints for my client’s decisions. I narrow down the possible options to a few I think will work. My goal is to guide them to what they want. I present my decisions and explain why I made them, before leaving the final decision to my clients. Ideally I’ve shared what they should be thinking about when making these decisions and I’ve given them multiple good options help prevent something poor being chosen.

A Feedback Loop Improves Design and Development

Early communication sets up a feedback loop from the start of the project. I design and develop in a modular way, where the modules are how I separate parts of the design process. I take individual layers and work them one at a time.

My client and I have several rounds of feedback about a layer and refine it until they approve and ideally we both like the result. At the least we understand why certain decisions were made and have confidence in those decisions.

For the process I prefer a top-down or big picture to the details approach. You may prefer the opposite, which is fine. For me it helps to start with the abstract concepts. I want to take the client’s descriptive words and think about how to express them visually before moving into the specific details.

It starts with questions and information gathering. The questions require communication and set up the feedback loop. Sometimes what I’m asking gets clients thinking about things they hadn’t considered. These questions help set the context for everything that follows in the relationship. Done well and most of what follows happens smoothly.

With information in hand I’ll work out a concept for the site. I’ll present my idea of what story the site wants to tell visitors. My client will agree and we’ll move on or my client will disagree and we’ll discuss further to ensure we’re on the same page.

From there I’ll get into some aesthetic details. This helps me get a sense of my client’s tastes and preferences. I have them send me sites they like and don’t like. I’ll look through them for patterns of what they really like and don’t like. I’ll present artifacts to them as well with my ideas for aesthetics.

I build a very simple web pages presenting options for type, color and imagery. As they choose, I start to build a structure around their choices. For whatever reason my clients have less to say about the structure than anything else. Perhaps it’s a part of this process I should revisit and improve.

Once the structure is agreed upon and the aesthetic choices made, I’ll start building some of the content modules inside the structure. We’ll work one at a time and get it right before moving on to the next one. We’re usually good about getting back to each other quickly at this point, but I’ll send out an occasional reminder when necessary.

We keep iterating and refining each part of the site until we reach the point where we both agree the site is done and it’s time to launch.

How a Design Process Helps You Bottom Line

The process seems to go over well with clients. It has some nice benefits for my business as well.

This process saves time and effort because there are less wrong turns. Rather you don’t travel too far down any wrong turn. Because of the feedback loop, you don’t get very far down one path before discovering it’s the wrong path. You might lose a couple days work at times, but not a couple weeks of work.

You get to work out problems early and often. Each layer or stage can be worked independently of others and so making changes doesn’t require as much work on all the other layers.

Since the process is more efficient it helps cut my costs. What I’ve noticed is more actual time might pass between the start and end dates of the project, but the amount of time I spend working on the sites is less.

This happens because at many points during the project you’re waiting on client feedback before proceeding further. It might only be a day or two of waiting, but it gives you some free time during the project.

I’m sure you’ve discovered how projects come in waves. No one will need your services for a few weeks or even a few months and then 5 new people will get in touch on the same day. There’s only so much time in any week you can give to a client, though.

Since this process has natural gaps in each project I can schedule more of them at the same time as I could before. I’ve found that some of the layers or stages of the product require more of my time and focus, while other stages hardly need much. As long as I don’t schedule the focus times of multiple projects to overlap, I can work on them in tandem.

Closing Thoughts

That’s my process in regards to client collaboration. Through early communication and a feedback loop my clients and I learn to cooperate with each other and work together from the start. This helps build a good working relationship and ultimately leaves clients happier with the end result.

My clients feel more involved in the project, because they are literally more involved in the project. More client involvement increases the odds they’ll be happier with the results and the process itself. That it contributes to my bottom line as well is a nice bonus.

With early and often communication, my clients and I quickly learn to trust one another. When the site is done we’ve both come out of the process feeling better about the final product and the way we got there.

Download a free sample from my book Design Fundamentals.

The post My Design Process — Communicating And Collaborating With Clients appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday 25 March 2014

Color Systems — Part 2 - Vanseo Design

Color Systems — Part 2 - Vanseo Design

Color Systems — Part 2

Posted: 24 Mar 2014 05:30 AM PDT

How do you describe color? What values can you measure to understand its properties? How do you ensure the color you see is the same one produced by a printer or computer monitor?

Last week I started a look at color and color systems. I walked through how our eyes see color and the difference between additive and subtractive color systems. I closed with some history of the CIE Color Model, which attempts to map the colors in the visible spectrum.

Today I want to continue the discussion by taking a look at the Munsell Color System. Munsell’s system forms the basis of the familiar HSL and HSB color spaces we find in graphics editors.

munsell-system.png

Munsell Color System

Albert Henry Munsell was a 19th century American artist and professor of art. Munsell wanted to find a way to organize color in a meaningful and practical way. He invented tools to take the measurements he wanted and developed a guide for choosing complementary colors in artistic work.

Munsell’s system divides color into three dimensions, which you can see in the image above and described below.

  • Hue — is measured by degrees around a horizontal circle.
  • Chroma — is measured radially from the center of the circle. The further from the center the more pure the hue.
  • Value — runs perpendicular through the center of the circle. The lowest point is black and the highest point is white with shades of gray at all points between.

You might recognize the system as hue, saturation, and lightness or hue, saturation, and brightness. The values in Munsell’s system are different, though. Munsell’s hue circle is divided into 10 equal divisions, chroma is measured from 1–15, and value is on a scale from 1–11. The basic dimensions are in place and the system is internationally accepted and used by the U.S. Bureau of Standards.

In Munsell’s system there are 5 primary colors, red, yellow, green, blue, and purple. There are also 5 intermediary colors between the primaries, red-yellow, yellow-green, and so on. Colors of equal chroma and value and at opposite ends of a hue circle are complementary. Adding them creates a neutral gray (the center of the circle) of the same value.

Munsell envisioned all the possible hue circles forming a sphere. It doesn’t quite work out that way. Some hues have more perceptible differences in chroma, meaning the circles bulge in some places. The sphere Munsell envisioned is more asymmetrical due to these differences in chroma.

munsell-asymmetric.jpg

HSB/HSL Color Model

This brings us to the more familiar hue, saturation, brightness (HSB) or hue, saturation, lightness (HSL) models. Both are variations of the same model. They’re similar to Munsell’s color model and are used to define colors in graphics programs. In my experience HSB tends to show up more in graphics editors.

Both models also match well with the way we perceive color.

  • Hue — defines the color itself with the hue circle divided into 360 degrees.
  • Saturation — like Munsell’s chroma, it measures the intensity of color from 0% (a neutral gray) to 100% (fully saturated or pure hue).
  • Lightness/Brightness — is the amount of illumination (luminosity) from 0% (no light) to 100% (full light). A value of 0% appears black and a value of 100% appears white washing out the hue.

In both models hue is the same and is measured the same way. The differences in the two models is that lightness is a measure of the amount of white where brightness is a measure of the amount of light. Where lightness can only be a shade of gray, brightness can be varying values of any color.

Because of the difference in how lightness and brightness are defined and measured, saturation needs to be different to scale. What each is measuring is essentially the same. What’s different is the way they’re measured.

HSV or hue, saturation, value is another model you may have seen. It’s the same as the HSB system, where value has the same meaning as brightness.

Converting from HSB/L to RGB and CMY(K)

HSB/L separate the luminance from the chroma (or color information). That can be very useful in a graphics editor to lighten or darken parts of an image. It’s also a useful way to understand color. We need put the luminance back when converting to something we can use in code like rgb().

You won’t need to do the math in practice. There are a number of tools available to do it for you. The conversions involve more math than I want to cover here, and probably more than you wan to do there, so I’ll point you to a few tools.

If I’m not mistaken, there’s no way to directly go from HSB/L to CMY(K) and that any conversion first goes through RGB or another color space. I think Photoshop goes through CIELAB to get from HSB to RGB.

Also, if I’m not mistaken, these conversions aren’t perfect. Converting from color model to color model or color space to color space doesn’t result in the exact same color at both ends.

Here’s more info about the math for anyone interested.

pantone-formula-guide.jpg

Other Color Systems

There are more color systems than the ones I’ve touched on above. I’ll briefly mention 3 of them below.

Ostwald System — Friedrich Wilhelm Ostwald was a chemist and a modern founder of physical chemistry. His color system is based on dominant wavelength (hue), purity (saturation), and luminance (brightness).

Ostwald was concerned with color harmony after noticing that some color combinations were more pleasant than others. The guiding principles of his color theory were that color could be characterized by specifying hue and the amount of white and the amount of black.

Natural Color System (NCS) — A proprietary color model published by the Scandinavian Color Institute. The system uses printed reference cards to match colors. It’s based on the 6 elementary color percepts of human vision, white, black, red, yellow, green, and blue. All other colors can be defined in terms of these 6 colors being present in varying amounts.

The Natural Color System describes color sensations as perceived in the upper brain, in comparison to RGB, which describes in them in the lower brain at the cone level. NCS is better suited to describe how we truly perceive and describe color and is likely where the natural part of the name comes from.

Pantone Matching System (PMS) — Like NCS, the pantone matching system is proprietary. Pantone is a commercial printing company I’m sure you’ve heard of. The idea behind their system is to make it easy for designers to color match specific colors for production.

The Pantone Matching System is a standardized system for reproducing colors so manufacturers in different locations can produce the same colors by matching against the pantone specifications.

Pantone’s colors are produced using 15 different pigments (including black and white), which are then mixed in varying amounts. A subset of pantone colors can be created through the CMY(K) process, but most can’t.

Closing Thoughts

As I mentioned last week, please forgive any errors in science in this or the previous post. My aim with both was to help answer a question about the difference between additive and subtractive colors and to dig in a little deeper about how color works.

The more I dig into the subject of color systems the more technical it gets and I wanted to keep things lighter on the technical side if possible.

I’ve done my best to provide additional resources if you’re interested in learning more (or checking how well I stayed true to the science).

Do we as web designers need to know all these color models? Probably not. If all your work is on the web, then you aren’t going to work with the subtractive CMY(K) system or ever use Pantone colors in production. However, like anything else related to design, it only makes sense to gain some understanding of these different color systems to increase your understanding of how color works.

Download a free sample from my book Design Fundamentals.

The post Color Systems — Part 2 appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday 21 March 2014

Why I Always Have Ideas and How You Can Have Them Too - Vanseo Design

Why I Always Have Ideas and How You Can Have Them Too - Vanseo Design

Why I Always Have Ideas and How You Can Have Them Too

Posted: 20 Mar 2014 05:30 AM PDT

Where do you get ideas? Where does the inspiration come from for writing blog posts, recording podcasts, new designs? Do you have a system for generating ideas or do you wait and hope for them to come?


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

The inspiration for this specific post and podcast comes from something Neil Gaiman said in a video that I think was part of a Q&A session. I was pointed to the video via BrainPickings.

In the midst of a rather humorous response to a question about where he gets ideas, Neil Gaiman mentioned that writers are good at recognizing ideas and more specifically recognizing good ideas.

That’s how I’ve always thought about ideas. To me it’s less about finding and idea and more about recognizing what around you makes for a good idea. I think people sometimes wait for the idea, for the inspiration before doing something creative, but inspiration and ideas comes during the process. They generally don’t come full-blown before you begin.

How to Generate A Storehouse of Ideas

If you want to have ideas at the ready when you want them, you need some kind of collection mechanism. You need a way to record ideas wherever you are and you need a place to store them.

You want to feed your collection mechanism with input from as many sources as realistically possible. Vary those sources. Have them come from different disciplines. Just because you’re a designer, it doesn’t mean all your sources should be design related. Vary your inputs as wide as you can.

I find reading leads me to the most ideas, but any medium will work. I’ve gotten ideas from music, television, movies, and games like chess. When reading, ideas have come from both fiction and non-fiction.

You can get ideas by observing what’s around you. I’ve had ideas walking through a mall and noticing a logo or the internal layout of a store. Observe people. Observe nature. Observe everything around you.

Record and collect anything you observe. It if makes even a momentary impact, record it somewhere. Record it on your phone, on a scrap of paper, or on a napkin. It doesn’t matter where. What’s important is you can’t trust yourself to remember so record it somewhere.

You can record in different places on different devices, but make sure you then collect everything into one central location. Collect everything into something like a swipe file. From time to time review your collection and add more notes and thoughts to your original idea. When you need an idea look through your collection and pick something.

What you record won’t always be a great idea. In fact most of the things you record will be garbage. You’ll wonder why you recorded the idea in the first place. Many will just need some work. Some of your ideas will need to be shaped and combined with other ideas that may or may not have recorded yet. These are ideas waiting to happen.

Some ideas won’t be ready for you or more you won’t be ready for them just yet. You might need to see the idea from a different perspective or you might need to understand something else before you can understand how your idea can work.

Store your ideas even when you think they aren’t worthwhile. Some will turn into good ideas or part of a good idea later.

None of this will be easy at first. I don’t want you to think you start recording and then ideas are flowing instantly. It’ll take some time, but if you give it time and keep at the process it will get easier and it does work. The process gives you a fresh perspective on things and helps you see how ordinary things fit into ideas you collect.

You want to record, collect, and review. You want to shape and combine ideas and choose some to turn into something finished. Working through ideas and turning them into something finished is part of this process.

The more you practice recording, collecting, reviewing, completing, the better you’ll get at each part of the process. You’ll begin to recognize what makes for a good idea. You’ll be out for a walk or picking up groceries and you’ll see something you know how to turn into a piece of writing or use in a design.

Like Neil Gaiman said, it’s not so much finding ideas as it is recognizing the good ones that are in front of you and always there for the taking.

My Process for Idea Collection

I always have some way to record ideas and thoughts with me. When I’m home my laptop is in front of me. When I’m out my iPhone is within reach. I can take a picture or record some audio. I can open any number of apps from the default iOS note app, to something like Daedalus Touch to record any thought that comes to mind when it comes to mind.

The specific app or method doesn’t really matter as long as I remember to process everything into my collection. Right now I use nvALT by Brett Terpstra to collect everything on my laptop. I think there are some iOS apps that will feed things directly to nvALT, maybe in combination with Dropbox, but I haven’t set any up. Probably something I should investigate more.

nvALT lets me tag everything and it has quick search and filtering. I add several tags to every idea. If it’s something I think will be a written post it gets tagged post. It I think it will be a podcast it gets tagged podcast. I write often about responsive design and have several ideas going each tagged responsive. Later when I want to add a note I enter the tag responsive and quickly find all the notes I have going.

nvALT is always open on my laptop and it’s probably the program I’m in and out of most of the day. I’m constantly recording and collecting ideas, adding to them and looking them up to retrieve information.

When I come across an article I’ll copy and paste the link. I’ll search to see if it fits with anything I have started and will often add the link to several notes. If not I’ll start a new one. When a thought comes to mind I do the same thing. See if it fits with something started or start something new.

For example I have some ideas about typography for a future post or series of posts. Any time something comes to my attention about typography I grab a link and add it to my growing file of typography ideas and notes. I continue to build up ideas this way and in time I’ll either do something with the idea or break it out into several different ideas.

Not everything I record is specifically for a post. Many are, but I also have notes going for my business plan and thoughts for the next time I redesign this site as well as a host of other things I may want to retrieve.

When it’s time to choose an idea and work it into something more finished, I find, search, and choose among the ideas I have stored in nvALT and move them to Ulysses III, where I more consciously add and organize notes in preparation to write a first draft.

Closing Thoughts

You can’t wait for the perfect idea before turning it into content or inspiration for a design. I hear many people say they don’t write because they’re waiting for the inspiration. Having the inspiration first does happen at times. It’s happened to me before and I’m sure it will happen again.

More often though ideas and inspiration come about through an active process of recording, collecting, and reviewing. I also strongly believe it’s that process that helps lead to the times where inspiration strikes first.

The process gets easier the more you do it. As you get into it you’ll discover ideas and inspiration are everywhere. You don’t need to find them. Instead you’ll train yourself to be aware of them and to notice them. You’ll train yourself to recognize the good ideas in front of you. That happens through an active process which begins by recording any idea that comes to you and finishes with a completed work.

You can practice right now. Look around and spend 5 to 10 minutes observing, brainstorming, and recording. Write things down on a piece of paper. Speak them into your phone. Type them into your computer. Just observe and record.

It doesn’t matter if the ideas are good or bad. Record them and move them to a central collection repository when you can. When I started this process I used to set aside time each week to brainstorm. Most of the ideas I came up with were bad, but it started the process.

Occasionally I still brainstorm, but for the most part I’m so actively engaged in the process of recording that I don’t need the brainstorming sessions so much.

You will get better with practice. In time you’ll be more aware of your environment and you’ll notice and recognize ideas. Even better you’ll recognize how ordinary things fit with, and relate to, ideas you have going.

Your problem won’t be where to find ideas. Your problem will be how to find the time to do something with all the ideas you have.

Download a free sample from my book Design Fundamentals.

The post Why I Always Have Ideas and How You Can Have Them Too appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday 18 March 2014

Color Systems — Part 1 - Vanseo Design

Color Systems — Part 1 - Vanseo Design

Color Systems — Part 1

Posted: 17 Mar 2014 05:30 AM PDT

What is color? How do you define it? How do you describe it? How can we ensure that when you tell me to make something red, I make it the exact same red you intended? For centuries people have been developing systems to describe color to answer these questions.

A few weeks ago Marco asked a question about additive and subtractive color systems on my post about the fundamentals of color. I did my best to answer, but his question inspired me to explore color systems a little more.

cie-srgb-comparison.jpg
The sRGB color gamut shown over the color space for human vision

A couple of notes before we begin. My exploration turned into a long post so I’ve split it two. The one you’re reading now and a continuation next Monday.

The science of colors systems is a technical subject and I tried to tone down the technical. I apologize in advance if the science is too little, too much, or if I’ve gotten any of it incorrect. I’ll provide plenty of resources so you can dig beyond these two posts.

My goal with both is to give us all a bit more understanding of what’s going on when we choose a color in Photoshop or use a hexadecimal value in our code and ultimately to help us develop better eyes for color.

Terminology

First let’s try to get some definitions out of the way. I say try because the more I looked into this, the more I discovered different terminology, which seemed to be saying the same thing. The 3 common terms you’ll come across often are color models, color systems, and color spaces.

  • Color model — a geometric or mathematical framework to describe color
  • Color system — as far as I can tell, the same thing as a color model, though it seems to be used in a more abstract way
  • Color space — the practical application of a color model. A color space specifies the gamut of colors that can be produced using a specific model

To be honest I’ve seen all 3 terms above used to describe the same thing and it’s been more difficult than expected to find good definitions. I found definitions that agree with the ones above and I found definitions which would indicate the above are incorrect in some way. Mostly I’ve found all three terms used interchangeably and I’ll end up doing the same here.

If anyone can offer good definitions and point me to a source, I’d greatly appreciate it.

What is Color?

Let’s get one more thing out of the way. What we see as colors are different wavelengths of light over a limited range of the entire electromagnetic spectrum. That limited range is the visible spectrum running from about 390–;700nm.

Isaac Newton was the first to understand the spectrum of light. He refracted white light through a prism in order to see its component colors. Our understanding of color today runs through Newton’s work with light.

Cones are the part of the human eye that detect color. Rods are sensitive only to black, white and gray. We have 3 types of cones each having a peak sensitivity over different wavelengths of light. Below are the cone types followed by the range of wavelength and peak for each.

  • short — 400–500nm — 420–440 nm
  • medium — 450–630nm — 530–540 nm
  • long — 500–700nm — 560–580 nm

There are two theories about how we see color using our 3 cones. Both theories are seen as valid and describe different stages in visual physiology.

  • Trichromatic theory — suggests the 3 cones of the retina are sensitive to red, green, and blue.
  • Opponent process theory — suggests we interpret color in a more antagonistic way; red vs. green, blue vs. yellow, black vs. white.

3 cone cells. 3 ranges of wavelength. 3 primary colors. Lots of things about color seem to come in 3s.

rgb-cmyk.png

Additive and Subtractive Color

When we see color we sometimes see it directly from a light source and other times we see it indirectly. In the latter case the light source strikes an object and what we see is the light that’s reflected from the object.

This is the basis of additive and subtractive color. When we see color produced directly from a light source, such as in a computer monitor or television, we’re dealing with additive color. Additive colors are produced by mixing different wavelengths of light in varying combination.

When we see the color of physical objects (or printed colors) such as a table or wall or a page in a magazine we’re seeing subtractive colors. The object absorbs some wavelengths of light and it reflects others. The color we see comes from the wavelengths that are reflected.

RGB is an additive system, which is why we use it for digital color. Screens produce their own light source. RGB relates closely to how we actually perceive color, though it doesn’t represent the full gamut of human vision.

As you no doubt know and can tell from the initials, the primary colors of the RGB color model are red, green, and blue. To get any other color inside the model we mix varying amounts of red, green, and blue.

  • red — rgb(255,0,0) — #ff0000
  • green — rgb(0.255,0) — #00ff00
  • blue -— rgb(0,0,255) — #0000ff

CMY(K) is a subtractive system and it’s used in print. Its primary colors are cyan, magenta, and yellow which are close to the primary blue, red, and yellow we learned as kids. In theory, mixing all three should lead to black, but due to the reality of inks they don’t and so a true black ink is added.

The CMY(K) gamut is smaller than the RGB gamut and can’t represent the brightness of RGB colors.

In some respects CMY(K) printing can be seen as additive. Due to an optical illusion you can print dots of cyan, magenta, yellow, and black. The human eye can’t distinguish the dots at normal viewing size and colors can be created and perceived by varying how many dots appear in a given part of an image. In a sense what we see as color is the addition of smaller dots of colors.

Notice that the secondary colors of both the RGB and CMY color models is the other color model’s primary colors and again remember that the gamut of colors produced by either is less than the gamut of human vision. Every device also has its own unique gamut based on the actual colors it can reproduce, which again are less than all the colors we can perceive.

cie-1931-chromaticity.jpg

The CIE Color Model

In 1931 the International Commission on Illumination developed a mathematical color space, which appropriately became known as the 1931 CIE Color Space. It’s been revised over the years, but the idea is that it maps all the different colors that an average person can perceive.

CIE was developed to be independent of any device or means of producing color and is based as closely as possible on how human beings perceive color.

A true mapping of color would be 3-dimensional since we have 3 cones. CIE divides color into 2 parts, brightness and chromaticity. Think only of white, black, and gray for a moment. All have different values of brightness, but their chromaticity is the same.

Chromaticity is the quality of a color independent of its brightness. CIE diagrams show the range of chromaticity visible to an average person and different diagrams can be produced for different values of brightness. The region of color in the diagram is the gamut of human vision.

The curved edge of the gamut corresponds to monochromatic light with each point representing a pure hue of a single wavelength. The straight edge is called the line of purples and have no counterpart in monochromic light. Less saturated colors appear toward the center of the diagram.

Take any two points on the diagram and connect them with a straight line. All the colors on that line can be created by mixing the colors at the two end points in varying amounts. Take 3 points and all the colors enclosed by the triangle formed by those points can be created by mixing the 3 corner points in varying amounts.

Look at the CIE diagram and you can see it’s not a triangle. Any 3 points we try to use as primaries for a color model can’t reproduce every color in the gamut of human vision. Some color will always lie outside the model we create.

Note: When looking at these diagrams on a monitor or printed page a color space other than CIE is being used and so colors outside that space’s gamut aren’t being displayed properly.

In 1960 attempts were made to correct some deficiencies in the original 2-dimensional CIE model known as CIEXYZ. This led to a second version of the model, CIEUV. A third version, CIELAB, was created in 1976 to also address deficiencies in the original.

CIELAB or LaB or L*A * B remaps the visible colors so they extend equally along two axes forming a square. The system is device independent and is a useful color space for editing digital images. It’s the color model in Adobe PostScript and you use it all the time in whatever image editor you have.

Closing Thoughts

I’ll leave things there today. Hopefully this post didn’t get too technical and for those of you who enjoy the technical, hopefully I didn’t make too much of a mess of the science. If I did, please let me know so I can make corrections.

The key points to remember are:

  • What we see as color is how our eyes interpret different wavelengths of light
  • The human eye has 3 color receptors each working over and peaking at different ranges of wavelengths
  • Color produced by a light source is different than color reflected off an object
  • Color systems have been developed to mathematically describe color and one of those systems, CIE attempts to map the full gamut of color in human vision

Next week I’ll pick up with the Munsell Color System, which leads to describing colors in terms of hue, saturation, and lightness or brightness. I’ll look at some other systems and try to explain the difference between HSL and HSB.

Download a free sample from my book Design Fundamentals.

The post Color Systems — Part 1 appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Friday 14 March 2014

How Do You Define Success? - Vanseo Design

How Do You Define Success? - Vanseo Design

How Do You Define Success?

Posted: 13 Mar 2014 05:30 AM PDT

What is success and how do you define it? Who gets to define it? Is there a single definition to what it means to be successful? Those are some of the questions I’d like to talk about today.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

A couple of podcasts I listened to recently both brought up the topic of success. It wasn’t a major topic on the first, The East Wing, but it came up for a few minutes. It was the focus of the second podcast, The Weekly Briefly. Listening to both naturally had me thinking about success and I wanted to share some thoughts.

Success is More than Financial

I think too often success is seen only in terms of money as if success in general only equals financial success. I don’t think that’s true. Success can be about the money, but it doesn’t have to be.

There’s really no single way to determine success for all. You can’t objectively confine success to one thing. Success has to be seen in context. It gets defined by the person who’s later measuring it. We each get to set our own goals and only we get to decide if we’ve been successful.

Success can be short term of long term. You can fail in the short term to accomplish something, but that failure helps you learn and contributes to some longer term successful outcome.

Success can be delayed. You can fail now and repeatedly in order to get better and succeed later. For example years ago I was studying the craft of writing fiction. I took writing courses and read every book I could find about the craft of writing. In the process I lost the passion for both writing and reading.

Instead of being able to enjoy a novel, I would notice the craft. I’d realize a character was introduced for a specific plot point or I’d find sections of the book that could have been removed without loss to the story. Instead of losing myself in a good book, I was focused solely on how the book was made.

For a time I didn’t read much. I stayed away from it and even had trouble watching a movie. In time though I was able to come back with a renewed sense of passion, a better understanding of what makes for a good story, and even a bit more skill as a writer.

My study seemed like a failure at first. It was failure in the short term, but in the long term it’s paid off many times over.

Success as a Freelance Designer

What makes for a successful freelance business? There were a variety of reasons for why I chose to become a freelance web designer/developer. I have varied goals for my business and my role in my business.

Money is certainly one consideration. I do need to eat and I need a place to live. I enjoy having some of the niceties of life as well. Some measure of the success of my business will be about money, but for me other things are more important and will contribute more as to whether or not this is a successful business.

  • Lifestyle — I want to be able to work when and where I choose
  • Freedom — I want to choose what I work on and who I work with
  • Challenge — I enjoy the challenge in running a business
  • Responsibility — I want success to be on my shoulders and get credit for success as well as take the blame for failure
  • Creative — I enjoy the creative component to my business and can measure success through my creative output

Others might disagree and judge this business differently, but in the end only I get to decide of my business is success, because only I set the criteria for its success. In your business you set the criteria and you get to judge.

Success can be seen on a smaller scale. Does a specific project fulfill you creatively? Financially? Did you enjoy working on it? Sometimes the answer is yes and sometimes it’s no. It’s possible you take on a project mostly for financial reasons, but it doesn’t fulfill you creatively or you don’t work well with the client or feel the freedom that’s important to you.

Success can also be seen on a larger scale. You can ask the same questions above, but over a longer time frame and over many projects. A single project over the year may not have been successful when viewed in isolation, but the mass of projects for the year could have been.

It’s possible that projects that weren’t successful for one reason were for another. I’ve had projects that weren’t financial successes, but were creative successes. I’ve had projects where I didn’t really enjoy working on them from start to finish, but in the end think they turned out well as did the client and we were both happy with the ultimate price.

Again there are many ways to define and measure success and no one is more right or wrong than any other.

Success in Life

Thinking even larger and beyond a business, what makes for a successful life? That starts to get into the meaning of life and I think this is also something we each have to define for ourselves.

Maybe a successful life is simply earning enough to afford the necessities and a few luxuries for you and your family and leaving your children in a better place than where you started.

Maybe a successful life is building a fortune 500 company, making you rich, providing for thousands of employees and helping make their lives and their children’s lives better.

Maybe success is changing the world long beyond your lifetime and influencing and enriching generations of people you’ll never know.

None of the above is really a better or worse to measure success than the others. They’re just different. The world needs all kinds of people with all kinds of goals and measures of success.

For some the end justifies the means. For others the means justify the end. These are just two different ways of measuring success.

The first group will measure success on the result. It’s not so important how they got there as long as they accomplish exactly what they set out to accomplish.

The latter group might have a goal they want to accomplish, but how they work towards that goal is more important to them than whether or not they complete it. They wouldn’t see the result as successful if they had to cheat their way there or going against things they ethically believe in pursuit of the goal.

I’m more a reward is in the journey sort of person. I have goals that I want to accomplish, but how I arrive a them is important. Ideally I’d like to have successful results and be able to say I got to them the right way, but the latter is the more important part to me and is in many respects my end goal.

The world needs both kinds of people. Sometimes I’m glad others reached goals even if I might not approve of how they got there.

If you’ve read biographies of many artists, musicians, writers and creative people in general, you’ll know they weren’t always the nicest people to those around them. Everything around them was consumed in their fire as long as they were able to create the things they wanted to create.

Take Steve Jobs for example. He helped lead a technology revolution. He dented the universe in his own words. Plenty has been written though about him not treating others all that well along the way. Still, I’m writing this on a Macbook Air and I recorded this podcast in Garageband. I’m using a number of tools that wouldn’t exist without Steve Jobs. I’m certainly a beneficiary of his end justifying the means success.

The world needs both kinds of people. Someone focused on the end might create the next wave of technology. Someone focused on the means might push for the social good. Both the end and the means are important. They’re just different ways of defining and quantifying success.

Download a free sample from my book Design Fundamentals.

The post How Do You Define Success? appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Tuesday 11 March 2014

Design is Decision-Making - Vanseo Design

Design is Decision-Making - Vanseo Design

Design is Decision-Making

Posted: 10 Mar 2014 05:30 AM PDT

What is design? What does it mean to design something? What does it mean to be a designer? The last few weeks I’ve been thinking out loud about some specific design topics, but I’ve danced around the central question of what is design. I’d like to address that today.

Over the last few weeks I’ve talked about

There are many more topics I could talk about, but again, all this time I’ve really been dancing around the central question. What is design? What does it mean to design something?

A figure in a maze deciding which way to proceed

Defining Design

We know design when we see it or when we do it, but that’s not much of a definition. Most definitions of design revolve around the word plan. Sometimes as a noun and sometimes as a verb.

  • design (noun) — a roadmap or a strategic approach for someone to achieve a unique expectation
  • design (verb) — to plan and make decisions about (something that is being built or created)

Design is found in the decisions made both before and during the process

According to definitions, design is some kind of plan. To design is to plan something. Words like purpose and intention are also frequently used in definitions. Design isn’t just a plan, but a plan with a purpose or for a specific purpose. You design to accomplish something specific.

I’m not entirely sold. I don’t disagree with the definitions, but I have a problem defining design as a plan in the sense that you can certainly create a plan without designing anything. I also think there are times we design something without much of a plan at the start.

Many designers will suggest that design is problem solving. I think all designers would agree we solve problems along the way to a finished design, but does solving a problem make one a designer?

One last definition I found while researching this post comes from an article in Fast Company, Is There A Scientific Definition Of “Design”? A pair of Canadian academics define design as follows:

DESIGN: (noun) a specification of an object, manifested by some agent, intended to accomplish goals, in a particular environment, using a set of primitive components, satisfying a set of requirements, subject to some constraints.

Sounds right and I can’t disagree with anything in there, but it’s quite a mouthful and in the end it’s really just saying design is a plan with purpose, while adding a little more detail than the other definitions.

What Does it Mean to Design Something?

I think part of the problem defining design is that there are so many different types of design. An industrial designer, a fashion designer, an architect, and a web designer, all design things, but the specifics of what they do are quite different.

There are some commonalities in these different types of design, things we all do. Planning is one. Purpose another. But I think more than anything design is about making decisions. It’s making decisions without knowing in advance if your decisions are good. It’s making decisions without a way to judge the success of any of them until after you’ve finished making all of them.

How can that be? How can we make decisions without a clear and objective way to know if we’re making the right decisions, if we’re making good decisions?

Design is about making decisions based on objective principles that may or may not apply. It’s making the most objective decision you can with an understanding that in the end those decisions are all subjective.

Design is doing everything you can to understand the essence of the thing you’re going to design; the essence of what it is and what it’s supposed to do. Design is formulating a larger strategy, and  developing a concept for how you’ll proceed, knowing at the outset you won’t know if you’ve chosen a good or bad strategy until after you’re done and possibly not even then.

Regardless of being able to determine good or bad at the outset, you make a series of decisions that consider your initial vision at every step and attempt to remain unified to that initial concept.

Not only is design trying to get at the essence of the thing being designed, but it has to decide how that thing fits within larger contexts of the many other things that have been designed. It asks you to question whether the thing being designed is really what you think it is or if you should scrap all your work and start again.

Design is knowing that you could do everything right and well and that someone also designing the same object could do it well and right and end up with a different design. It’s knowing at a different point in time you also might design something in an entirely different way and still end up with a good design.

Design is multi-layered. You don’t need to design each layer, but the more you get right the better your design will be. At the bottom design is functional and reliable. Moving up the stack it becomes usable and helps people become more proficient. At the top it’s creative and offers aesthetic beauty, ideally arising out of the essence of the thing being designed, but sometimes from somewhere else with a purpose simply to delight.

There are contradictions in design. Simplicity would have us remove everything that’s non-essential and yet aesthetics are fine with us adding some less than essential things if they delight or communicate something beyond the object itself.

Designing a Website vs. Designing a Shirt

When designing a website you’re concerned with the goals and objectives behind the site. You’re concerned with the client and the people who’ll visit and use the site. You have to be concerned with all sorts of technical details about html, css, javascript, browsers, performance, and accessibility. You’re concerned with type and layout and color and the atmosphere your aesthetic details create.

I’ve never designed a shirt or any other piece of clothing, but I imagine concerns would also include goals and objectives and the people who’ll wear the shirt. There will be technical details in regards to the fabric and a process for turning materials into a finished product. There will be choices in color and shape and general aesthetics.

A lot goes into creating a website and a lot goes into creating a shirt. The technical details vary and they vary yet again when designing an industrial product or a process to move packages from one truck to another.

There’s a craft associated with anything designed. The specifics vary from thing to thing and so the decisions made at the start and along the way will vary with them. The design of all of them can be found in the decisions made both before and during the process.

Closing Thoughts

The definitions for design sound simple. Design is some kind of plan with a purpose. To design is to create this plan and then make decisions that align with the original plan. I don’t disagree with any of the definitions, but I feel they leave so much unsaid.

In design there’s an objective, some kind of task to complete or problem to solve and there will be many, many decisions made along the way. Some of those decisions will be made up front. They’ll be based on objective principles, guidelines, and experiences that start us on the design journey.

Many more decisions will be made during the journey. Design asks us to make the best decisions we can at each step of the way even if that decision is to turn around and start down the journey again from a different road.

Design can be applied to most anything. If it requires more than a single decision, more than a single step, it can be designed. A website can be designed. A shirt can be designed. An automobile can be designed. Your life can be designed.

In the end to design is to be human. It’s making the best decisions you can under any and all circumstances. To become a better designer, to become a better person, is to become better at making decisions.

Download a free sample from my book Design Fundamentals.

The post Design is Decision-Making appeared first on Vanseo Design.

Friday 7 March 2014

How I Start A Design Project — Problem Definition - Vanseo Design

How I Start A Design Project — Problem Definition - Vanseo Design

How I Start A Design Project — Problem Definition

Posted: 06 Mar 2014 05:30 AM PST

How do you start a new project? What are the first things you do when a client gets in touch and you’re beginning a new design? I’d like to talk a little about what I do in the first phase of a new design project.


Note: This post includes an audio version. If you don’t see the audio above, Click here to listen. You can also subscribe in iTunes

The idea for the post comes from a post Cameron Moll wrote discussing the very same topic about how he begins a project. I think it’s helpful for designers to share more of their processes. When we do we help each other improve, which is why I wanted to share the start of my process.

One of the things I found interesting in Cameron’s post is that the way he begins varies. I tend to start pretty much the same way on every project. Cameron also mentioned how he jumps into Photoshop sooner rather than later. He has enough experience to work that way. Again it’s different from my process. I can’t remember the last time I used a graphic editor to design anything and it’s been even longer since I showed a client a design comp or mockup.

I should point out that both Cameron and myself are probably defining the start of a project in a different location. I don’t know for certain, but I have a hunch what he’s calling the start is a later than what I’m calling the start. I’m pretty sure he does some of what I’m about to describe before opening Photoshop.

Thinking About the Problem Drives the Process

My process begins with thought. I don’t open graphics programs or even sketch most of the time. I think. I write. I make notes. I didn’t realize until finishing Monday’s post on simplicity, but what what I’m doing is following an approach where I’m seeking the essence of what it is I’m to design. I’m defining the problem I’ve been asked to solve.

It reminds me of Einstein’s quote.

If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.

I begin by asking my client a lot of questions. I’m trying to increase my understanding of what my client wants, who my client is, who my client’s customers are, what’s the business plan, and anything else I can think of to ask.

It’s all about defining the problem to be solved and finding the essence of the site I’ll design. It’s not all about me, though. Many of my questions are meant to get the client thinking as well, so we can both define the problem the same way.

For example a few months ago a client approached me wanting a site. The client didn’t provide lot of information. There was an idea for the general look and a few paragraphs of text, but nothing more. They told me about their business and I started researching.

I searched for sites with similar businesses and looked for what they did and didn’t do. After a few days I thought there were some things my client hadn’t considered and thought through as much as they might. I wasn’t sure if they’d really thought about who they were targeting and what their pricing should be.

The next week or two turned into a back and forth between us. I wrote up a long email with thoughts about their business. They liked some of my idea and rejected others. Either was fine with me. My goal was to get us both talking and thinking about the business specifically in regards to their site, so together we could get to the core and define the design problem they were hiring me to solve.

Another thing I do early on with every project is ask clients to send me designs they like as well as some they don’t like. I want to understand the visual style they prefer. I ask for explanations about both their likes and dislikes, though I don’t always get either.

I’ll usually get a few examples and I’ll look at them for patterns to help me understand what my client wants and doesn’t want. Sometimes it’s a typeface. Sometimes it’s a color. Sometimes it’s a small detail like a line or shadow.

Again the goal is to define the problem as best as possible with the client and to understand the essence of what it is I’m to design.

Turning Thoughts and Notes into Design

Everything I collect goes into an ordinary text file. I record everything so I don’t forget anything and I use the file as a brain dump for any thought that comes to mind. I add anything the client says about what they want no matter how irrelevant it might seem along with my own thoughts and research.

Sooner of later I reach a point where my notes need some organization and I get a little more focused and I look through my notes to discover things about the content such as:

  • how many pages of content will there be?
  • how many different page types are there?
  • what are the different content types for each page type?

I’ll add sections about possible visual styles based on descriptive words my client has used. I’ll create sections in the document for color, layout, type, and general aesthetics and add these descriptive words to them.

As I’m organizing I’ll look for patterns. Again I’ll look at all the different pages and think how many will need to be distinct templates and I’ll look for the different types of content that will be in each template.

More and more my notes get organized around the different decisions I’ll need to make. There will be general notes and notes about color and type, etc.

As I find the underlying patterns I being to remove whatever isn’t essential. I’ll probably hold onto these things in part of the file or in another file just in case. I’m not always successful in removing the unessential. Sometimes it’s my fault and sometimes a client insists on something that would probably be best left out. I’m trying though to reduce to 100% essential and nothing more.

By the time anything most people think of as design happens (sketching, choosing a color scheme, selecting typefaces) the client and I have a 2 way feedback loop going. We’ve started to developing a trusting working relationship, and we’ve come to agreement about what the site will be. We’ve worked together to define the problem they want me to solve.

None of this takes a long. A week, maybe two. During this time I’ve turned my one file into several files and I’ve started filling in those files with real type and color choices I can show clients. I’ll take these files and build a simple prototype showing these options so my client can choose. I’ll offer more feedback and be prepared to implement their choices in what becomes the working website.

Summary

The key thing about the start of my process is that it begins by thinking. It begins with questions and communication between myself and my client. There are times when my thinking will be visual in the form of sketching, but most of the time it’s me writing down words in a text file.

The goal of all this thinking is to define the problem and understand the essence of the site being designed. A secondary goal is to set up the 2-way feedback loop between the client and myself. Everything is geared toward agreement on what I’ll be doing and building a working relationship.

By the time “real” design work begins we’re both involved and invested in the project. We’ve spent our 55 minutes on the problem and can spend the remaining time on the solution.

A nice by product is that all the investment and involvement on the client side leads to happier clients at the end of the project. They feel ownership in the finished site and know they’ve contributed to how it turns out.

Download a free sample from my book Design Fundamentals.

The post How I Start A Design Project — Problem Definition appeared first on Vanseo Design.

This posting includes an audio/video/photo media file: Download Now

Subscribe to: Posts (Atom)