I decided the best way to do that was with a screencast and so in addition to the simple tool I built here’s my very first screencast.

Note: This post includes a screencast. If you don’t see the screencast above, Click here to watch.

Don’t get too excited about either. The tool is very basic and meant as a learning tool for myself rather than something to use for choosing a color palette and the screencast is likely rough given it’s my first attempt at one. Hopefully you’ll find something worthwhile in both.

Why I Built a Color Tool

Generally, it’s not a problem for me to make some color decisions. For example I usually know in my head what I want to use as a dominant color and I even have a sense of what colors to pair with it as as subdominant and accent colors.

What turns out to be somewhat problematic for me is finding that exact color I’m looking for with so many possible choices. Why settle your cursor in exactly one spot on a color picker and not a nudge to the left or right just a bit. Naturally part of the reason relies on an eye for color, but I’m looking for deeper understanding about why you would make one choice over another.

Right now I tend to choose an initial color with what I hope is an improving eye and then use my tool of choice (ColorSchemer Studio) to point me to the rest of the colors I’ll use in a palette. The end result is usually something that works, but never quite what was in my head.

I also have a tendency to rely heavily on various grays and use color sparingly. It’s a safe way to work with color, but I’d like to have the skills to do more. I thought building a tool that would only include a few things I’m currently learning about would help me learn those things. As I learn and explore more about color I’ll add more to the tool.

The Color Tool

If you want to see what I built the screencast is the best way to see it. If you want a quick version of what it does read on.

At the moment it’s 4 simple blocks in the center of the page, each with a default background color. Adjacent to each are a series of sliders and inputs to adjust the hue, saturation, and lightness of the block. There are also RGB and hex displays so you can see their resulting values as you make adjustments to the hue, saturation, and lightness.

One reason for this set up is so I can see the mathematical relationships between colors. I’m curious to know things like how would I increase saturation only by changing a hexadecimal color value.

Another reason is so I can quickly find things like the complement of a specific hue and see how it looks against the initial color or how a single hue looks over several different saturation or lightness values.

Again it’s all very simple and basic at the moment, though I do have ideas for how to expand the tool and develop what I think will become a more useful learning tool.

Watch the screencast. It’s about 13 minutes long and it’ll walk you through the tool and why I think it’ll prove helpful. Let me know what you think of it and any suggestions you have for improving it. It’s not currently online, but if you think it would be useful for you or would like to play with it that can easily change.

Also let me know what you think of the screencast. I made a couple of mistakes when recording that I managed to correct well enough during editing, but I could certainly use some feedback to help me make the next one better.

Thanks.

The post A Simple Color Tool Built For Learning [Screencast] appeared first on Vanseo Design.

One birthday, a somewhat generous brother, and quality service from Amazon later, and an assortment of books (including a few specifically about color) are here waiting to be read. Thanks David.

I’ve finished reading one of the color books, Design Elements: Color Fundamentals, and thought I should start sharing. I want to start with how we describe colors in part because it’s the beginning and in part because it led to some clarity in how I understand color.

How We Describe Color

There are 3 primary ways to describe a color and since the book added it, I’ll add a 4th way to describe color as well.

• Hue — another word for color
• Saturation (chroma) — the intensity or purity of a hue
• Lightness (value) — the relative degree of black or white mixed with a given hue
• Temperature — the perceived warmth or coolness of a color

Let’s dig a little deeper into each.

Hues are colors and what hue we see is dependent on the wavelength of light being reflected or produced. I doubt I need to tell you what a color is and since color and hue are synonymous you should know what a hue is as well. One thing I will remind you about is we all perceive color differently. The hue you see may not be the same hue I see.

Saturation refers to how pure or intense a given hue is. 100% saturation means there’s no addition of gray to the hue. The color is completely pure. At the other extreme a hue with 0% saturation appears as a medium gray. The more saturated (closer to 100%) a color is, the more vivid or brighter it appears. Desaturated colors, on the other hand, appear duller.

How saturated a hue appears also depends to a degree on what colors it’s next to. A 50% saturated hue placed next to a 25% saturated hue will appear more vivid than were the same hue placed next to a 75% saturated hue.

Lightness measures the relative degree of black or white that’s been mixed with a given hue. Adding white makes the color lighter (creates tints) and adding black makes it darker (creates shades). The effect of lightness or value is relative to other values in the composition. You can make a color seem lighter by placing it next to a darker color.

The greater the difference in value between elements, the greater the contrast between them. Because of this, lightness is a good way to show contrast and indicate hierarchy among elements. About 7 steps of lightness is the maximum variation the human eye can discern. Beyond that it becomes hard to distinguish the differences.

Temperature is the perceived warmth or coolness of a color. Warm colors are red, orange, and yellow, while cool colors are green, blue, and violet. Somewhere in the green and violet spectrums the temperature changes between warm and cool.

How the eye recognizes color temperature can change based on the source of light. For example the actual temperature of a computer monitor can affect the perceived color temperature.

Warmer colors tend to advance into the foreground of a composition while cooler colors recede into the background. Also like saturation and lightness, temperature can be relative. Place a warm color against a warmer one and the initial color will appear cooler than if it were placed against a cool color.

Color Harmony

In working with color our goal is to choose a palette of pleasing color combinations (except for those times when a displeasing combination complements the message better). We’re trying to achieve some kind of color harmony.

Color harmony can be subjective. What works for your eye may not work for mine. Principles of color theory aim to reduce the subjectivity by offering guidelines that help us find pairings and groupings of colors more likely to work well.

For example one of the main principles holds that the eye is always seeking balance and equilibrium in color that lead it to arrive at neutral combinations like when a hue is combined with it’s opposite or complement. It’s one reason we often see after-images of a different color (but with the same saturation and lightness) when staring at any one color for too long.

Color theory doesn’t always lead to predictable results. Sometimes theory and practice don’t quite mesh, which means we need to develop our eyes for color and experiment with different combinations of hue, saturation, and lightness.

The Disconnect in Color Theory and Color Practice

Like I said above, something clicked for me in reading Color Fundamentals. We describe color in terms of hue, saturation, and lightness (HSL), yet we typically set color values on the web using hex values and to a lesser extent RGB values. Wouldn’t it make more sense to work with the system that better describes color?

Note: HSL is not the same as HSB (hue, saturation, brightness) or HSV (hue, saturation, value) found in most color tools.

Hex and RGB are really two versions of the same thing. Each provides 256 possible values for how much red, green, or blue is in a given color. HSL works differently. There’s no easy way to glance at something like rgb(63, 69, 146) or it’s hex equivalent #3f4592 and easily know it’s 40% saturated or hsl(236, 40, 41).

If you’d like to see the math involved in making the conversion have a look at any or all of the links below

• Color Algorithms
• RGB to HSL color conversion
• HSL to RGB color conversion

Why is that? Why is there a disconnect in how we attempt to understand color and how we attempt to use it? If anything HSL is the more intuitive system as it actually describes the colors we see and fits with color theory.

I realize color skills come from developing a critical eye for colors and asking questions about why something works or doesn’t work. And it’s about answering those questions as you observe the colors around you.

It just seems like it would be easier if both the theory and the practice spoke the same language. Now that I’ve come to this realization, I’ve decided to make a commitment to using HSL values as much as possible in my code. The stumbling block is IE8 and below, which don’t accept hsl() or rgb(). They need hexadecimal values. That’s ok though, since SASS can make the conversion. You can use hsl() in SASS and have the html output be a hexadecimal value.

To go along with my commitment I’ve started building a simple color tool to help me learn and study. It’s not something you’d want to use in its present state to choose a color palette, but it lets you play around with hue, saturation, and lightness values to see how each affects one particular color and the colors around it. I’ll share the tool later in the week.

For awhile I’ve suspected the mathematical relationships between colors could offer a guide for working with them and I’ve often looked for those relationships in the hex values of colors. My hope for using hsl() more and playing around with my simple color tool is they’ll help me connect the theory to the colors I use in design a little better than they’re connected for me now.

Keep this disconnect in how we learn about and describe color and how we use it in mind. The realization has given me a greater understanding for how to better study color and it’s why I wanted to start this conversation with the basics of how we describe color. I’ll have more posts about color coming soon, starting later in the week when I talk about the simple tool I created to help me.

The post The Fundamentals of Color: Hue, Saturation, And Lightness appeared first on Vanseo Design.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

Limiting yourself is a topic I’ve written about before. I was recently reminded of it after a client let me know he was going to close one of his businesses. It’s not his main business, but one related to it and one that served the same market. We both thought it had potential and could also bring more customers into the main business. Unfortunately it didn’t happen.

Remove Can’t from Your Vocabulary

Nothing is impossible. Those things that seem impossible are simply things we haven’t yet figured out how to make possible.

You might suggest time travel or teleportation or many other things that come from the world of science fiction are impossible and they certainly seem to be given our current understanding of the universe. I don’t believe any are impossible. We can’t envision the possibility given the context of the knowledge we have, but that doesn’t mean there is no possibility.

Keep in mind that not all that long ago flying was considered impossible and yet at this very moment the skies are filled with airplanes carrying passengers from one destination to another. It’s hardly the only thing once thought impossible.

• Computers
• The telephone
• The light bulb
• Circumnavigating the globe
• Breaking the sound barrier
• Going to the moon? Mars?

We have reached the limits of what is possible with computers.
—John Von Neumann (1949)

Nearly every important invention or accomplishment was thought impossible before it became possible. Those people who made the impossible, possible had one thing in common, which was believing it was possible.

There’s a famous quote attributed to Henry Ford. I’ve seen it written a number of ways, though I’m sure you’ll recognize it.

Whether you think that you can, or that you can’t, you are usually right.
—Henry Ford

When you decide in advance something isn’t going to work, you limit any chance it had of working. Believing something will work isn’t a guarantee it will, but it gives you a chance of making it work.

Break Out of Comfort Zones

Recently I talked about shaking things up in my routine and breaking out of my comfort zone. Here’s another quote I’m sure you’re familiar with.

Insanity: doing the same thing over and over again and expecting different results.
—Albert Einstein

I’m not sure that’s really what it means to be insane, but I’m pretty sure if you continue to do the same things in the same way over and over you aren’t likely to get different results.

If you’ve been happy with the results you’re getting, then by all means continue to do what you’re doing. If, however, the results aren’t quite what you’d hoped for, then change is in order.

Comfort zones have a way of limiting us in that they don’t allow us to get different results. They keep us where we are. They usually won’t have us regress, but they tend to limit how we can grow.

Again if you’re satisfied with where you are, then there’s no reason to change, but I’d suggest most of us would like to be more than we are now. Being satisfied is an enemy of progress.

Be Willing to Risk for Reward

It can be scary to take a risk. There’s a potential for loss and most of us prefer not to lose what we have. Limiting risk, limits loss. It also limits gain. Here’s one last quote that I don’t think is attributed to anyone, because it’s so common.

The greater the risk, the greater the reward

I’m not sure that’s 100% accurate as I’ve seen people take some pretty stupid risks where it was hard to see any potential reward, however, I feel confident saying that great rewards usually require great risks.

You have to be willing to take a chance. If you read about some of the more successful people on the planet, you’ll find many of them took chances and failed many times along the way. Successful people tend toward being risk takers.

I’m always struck by some people who join my business forum seeking advice on a business idea. They won’t share the idea out of fear someone will steal it. They spend most of their time and energy trying to protect an idea from being stolen and in the process spend no time or energy developing the idea into something that can be successful.

It’s true if the idea is out there, the possibility exists someone else will see it and work on it and be successful with it. It’s a chance you take, but one you inevitably have to take. In order to start your business you have to release your idea and once it’s out there anyone can copy it.

Most people won’t take an idea until after you’ve proved it can be successful and if you’ve managed to prove that, you shouldn’t have to worry about competition. You’re already ahead of them.

What Could Have Been

Coming back to my client, I can’t help but wonder what could have been. Perhaps he’s right and there isn’t any way to save this business. He certainly knows the business better than I do.

Still I keep thinking back to many suggestions I offered over the years and the many times my suggestions were returned with a “that won’t work, because…”

This particular client has some very good ideas and is willing to try things to improve his business. He also has a way of making up his mind in advance of any information and once made up, little can change his mind.

I won’t go into the specifics of why he thinks this business can’t go forward or any of the things I thought he could have tried over the years. He knows his business better than I ever could. Maybe my suggestions wouldn’t have made a difference. Perhaps this was a case of not having the means to realistically compete.

And yet I can’t help but wonder what might have been and whether or not self imposed limitations are ultimately the reason the business is closing its doors.

The post How We Limit Our Chances For Success, And How We Can Stop appeared first on Vanseo Design.

One of the interesting techniques that’s been proposed for delivering bitmapped images to retina devices comes from Daan Jobsis. The technique is being called compressive images and I recently had a chance to run an unscientific test with a client and thought I’d share the unscientific results.

Compressive Images

First in case you’re not familiar with compressive images the general idea is that the quality of compression of a .jpeg image contributes more to its file size than the physical dimensions of the image.

Consider two identical images that differ only in their physical dimensions and quality of compression.

• 800x600px and 0% compression
• 400x300px and 100% compression

The theory behind compressive images suggests the first, while being physically larger, would ultimately have the smaller file size. If you take that image and reduce its dimensions in the browser you have an image that downloads quicker and has the additional px needed for retina and other high resolution displays.

It’s an appealing solution because it’s relatively easy to implement. However, it’s hardly a perfect solution as the comments to Scott Jehl’s post about compressive images point out.

I was curious what, if any, difference in file size and quality there would be between images of different dimensions and compression and set up a test for a client. I also set up two tests you can check out, which I’ll get to momentarily.

The Client Test

This particular client is a photographer and her site will naturally feature a lot of bitmapped images. At their largest the images will need to be 800px on the longest side. Thinking about the compressive images technique, I’ve had her send me every image at 1600px on its longest side.

Ideally we’d us media queries to serve high resolution images to particular devices, but time and budget make that unfeasible. Since I want to optimize the images for both quality and performance I wanted to test the compressive images technique to settle on the best way to save the one version we’ll use.

I took one of her images and saved it 2 ways.

• Full 1600px size with 0% quality compression
• Reduced 800px size with 100% quality compression

The file weight of the latter image was about 5 times as large as the former. That’s quite a lot of extra file weight.

I placed both images on a web page and set each to the smaller dimensions letting the browser resize the larger of the two. Then I sent her a link to the page and asked her to have a look and to ask her friends to have a look as well.

This was highly unscientific, but the results were split about 50/50 between those who couldn’t notice a difference and those who could. All who did think one of the images looked better chose the smaller image with the higher quality compression. Unfortunately most of the people responding aren’t the tech-savvy type and I wasn’t able to get them to include the resolution of their monitors.

Those who couldn’t tell the difference reported first and initially I thought I’d use the technique. Later when those who could tell the difference all reported the smaller image as being of higher quality I wasn’t so sure.

When it came time to actually add some images to the site I tested again with more realistic compression settings included.

• 1600px image was saved at 10% and 20%
• 800px image was saved at 60% and 100%

When compression on the smaller image was 60% (as high as I usually save images by the way) the difference in file size wasn’t worth using the larger image. In fact it had a smaller weight than the larger 0% compressed image.

In the end I’m using the smaller images on her site, since they aren’t noticeably heavier in terms of file size, but I wanted to conduct more tests to make sure the results I saw weren’t due to the specific images I chose to test.

What Do You Think?

Instead of testing my client’s images this time around, I thought I’d try one of my own. It’s an image I took last summer while eating lunch at Montauk and it’s the one you see at the top of this post. I’ve set up two pages comparing the same image over different sizes and compression settings.

• 1600 x 1200px vs 800 x 600px (9 images)
• 800 x 600px vs 400 x 300px (8 images)

If you peek at the file names of each image you’ll be able to tell it’s dimensions and compression settings. The files have been names with the same format of length-height-compression.jpg

Each image was compressed (and resized) using Pixelmator and then run through Image Optim to further compress them. This has become my typical workflow and I wanted to keep the test as close to what I normally do as possible.

If you don’t mind taking a moment, have a look at both tests and look over the images to see if you think one or a few look better than the others. Also, of you don’t mind, let me know the resolution of your monitor. Thanks.

My Observations

I’ve made a few observations while setting up these two test pages. First, I can see a difference in quality. It’s generally located in one specific part of the image, but it’s there. However, had I not been specifically looking for differences in quality I wouldn’t have thought the lowest quality images looked bad.

I don’t currently have a retina display Mac and it’s possible on a monitor with higher resolution I would be more put off by the lower quality images.

In comparing the file sizes of the saved images I noticed

• The larger image saved with a compression quality of 10 has a near identical file size to the smaller image saved with a compression quality of 80.
• With a compression quality of 60, the smaller image weighs about 2/3 the size of the larger image compressions at 10.

Rarely do I save images with a compression larger than 60, which suggests the compressive images technique isn’t going to work well for me.

For the most part the smaller dimension image ended up with a smaller file size. That had me wondering why, since the articles I’ve read suggest the opposite should happen.

Then it occurred to me what the difference might be. I’m using Pixelmator to compress the images and I suspect those who’ve written before me used Photoshop for compression.

One of the things I’ve learned since I started using Pixelmator is that Photoshop’s compression algorithm needs improvement. It doesn’t compress images as well as it could. I suspect the technique isn’t quite as effective as first thought where file weight is concerned, though it may still make sense for delivering images with more px density to high resolution displays.

Granted everything that’s led me to this conclusion is far from scientific. Once again if you don’t mind check the two test pages and let me know which of the images, if any, look better. I’d also encourage you to run some tests for yourself.

I’ll leave you with a table showing the difference in file size between Pixelmator and Photoshop at various compression settings over 3 different images sizes. The numbers below are after compressing each image in the specific editor and then running each through Image Optim. Above 10% and below 100% the files weigh more when compressed with Photoshop than when compressed with Pixelmator.

The post Are Compressive Images A Good Solution For High Resolution Displays? appeared first on Vanseo Design.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

Sometimes different activities have things in common and working on them separately can contribute to something important at the core of all of them. Sometimes it’s best to do multiple things that serve a single purpose.

Design and Writing

A couple of weeks ago I came across a short post by Jordan Koschei for The Industry. The post is titled Design Writing and the Self-Aware Industry and it comments on how there are many designers who also write about design.

Jordan brings up an interesting point that this is both positive to help the community learn and potentially negative in that the industry tends to iterate off each other instead of truly innovating. It’s a great point, however it’s not the reason I’m citing the article. I mention it for these two quotes from the start of the post.

• We designers are natural observers
• That same trait makes one a natural author

The reason why being a designer, specifically a graphic designer makes one a natural author is because both are fundamentally the same thing. Both are at the core about communication.

• Graphic designers communicate to an audience through visual elements
• Authors communicate to an audience through the written word

Both make use of language. The difference is each uses a different language with which to communicate. Getting better at one involves becoming a better communicator, which can then be applied to the other. Designers write, because writing helps make them better designers.

Multiple Disciplines Contributing to a Single Skill

Let’s dig a little deeper into how writing helps make you a better designer. As a designer a large part of your job is to communicate to an audience. To do that you have to learn the language of design. You learn how to work with things like

• Space
• Color
• Lines
• Shapes

You learn how to combine these things to create a design that’s balanced and leads the eye through it. You learn how to create focal points and develop a hierarchy of visual elements.

When you write you learn to work with a different set of elements. You learn how to use words and how to combine words into sentences and paragraphs according to rules of grammar. You learn to work with the language to create:

• Pace
• Tone
• Story
• Perspective

What you learn from writing can be indirectly applied to design. Pace, tone, story, and perspective can all be communicated visually. Learn to control pace through the rhythm of word structures and you’ll have a greater understanding how to control pace through the rhythm of graphic elements and space.

Design and writing use different tools, but at their core both are fundamentally the same. Both are about communicating as effectively as possible. Learning and practicing one helps you understand how to do the other better.

Learn to see how the things are connected. Train yourself to see both the vertical patterns that go deeper and the horizontal patterns that cut across.

Summary

Sometimes it’s best to take out two birds with a single throw of a stone. Other times you’re better off throwing stones at two different birds in order to learn how to throw better.

It’s a good idea to become more productive by doing things that contribute to multiple projects at the same time. It’s also a good idea to do more than you have to a times, because they share something in common and doing that common thing in a different way helps you see it from a new perspective.

The connection between writing and design is communication. Learning to communicate in one language will help you learn to communicate in another.

The post Communication — The Connection Between Graphic Design and Writing appeared first on Vanseo Design.

I’ve suggested a few times that responsive design doesn’t add significant time or cost to design and development as many make it out to seem and figured I should expand my thoughts to make clearer what I mean.

Minimum Viable Responsive Design

When someone asks the generic “how much does a website cost?” I assume your response is something along the lines of “it depends” and rightly so. Even disregarding the difference between a few page brochure site and an ecommerce site with thousands of products, it depends a lot on the specific details of each.

• Does the budget include user testing?
• How much research is needed or expected?
• Are we using a CMS or building from scratch?
• How much work has the client done prior to contacting you?
• Which features are necessary and which can wait till a later time?

It also depends when we’re talking about responsive design. What is and isn’t acceptable for layout changes? Is the site heavy on images and if so how are we going to handle all the images?

• A simple max-width: 100% and height: auto
• Cropping the images over several sizes and displaying the most appropriate
• Will there be additional images for retina?
• Will we use the server to detect the device?

The only fair comparison is how much extra work is involved in a minimum viable responsive site

How about the content? Are different versions of the content being written for different devices? Do we need to rework the information architecture for phones? Tablets? TVs?

Ideally we should all do more than the bare minimum, but when comparing any extra time to build responsively over developing a static site it’s hardly fair to compare the max responsive site with an ordinary static one.

The argument that suggests a responsive site is too expensive is usually followed up by a suggestion to stick with a static site. To compare fairly we shouldn’t compare the highest of high end responsive site with a typical static one. We should compare the responsive site closest to the static version, where the difference is only in being responsive.

If you want you can also compare to building a static site and then a site dedicated to mobile (or other device), but in that case you need to consider the additional costs of multiple designs.

Again we should be doing more than minimum viable responsive, but while all the extras are nice, none is necessary to make a site responsive. The only fair comparison is how much extra work is involved in a minimum viable responsive site. At that point the responsive design is an improvement over the static one.

3 Keys to a Responsive Site

Let’s keep in mind there are 3 ingredients to a responsively designed site

• flexible layout
• flexible images and media
• media queries

To accomplish the first stop using absolute measurements like ‘px’ and start using relative measurements like % and ‘em’ and you have a flexible layout. That hardly adds significant time to a project. Once you’ve done it a few times it adds no additional time

To accomplish the second set you images and media to

1
2

max-width: 100%;
height: auto;

It’s not a perfect solution, but it’s already better than doing nothing which is what the static site calls for and what we’re comparing costs to. While there is certainly more you should do to improve how images and media work across devices, you should be doing those things on static sites as well as responsive ones.

Note: The lack of a great image and media solution is one of the valid arguments for creating a separate design dedicated to a specific device, though it’s not a valid argument for maintaining a single static site.

When it comes to media queries I think this is where many expect a lot of time and thus cost is added. It doesn’t have to be that way. Take whatever 2, 3, or 4 column static site you have now and let the columns drop one below another at a couple or three major breakpoints.

To be honest I was doing this long before there was such a thing as responsive design and it’s not hard. Float your major containers to the left and guess what happens when there’s not enough room to display them all in a single row? Yep, they start dropping below each other.

Seriously, the majority of static sites built over the last decade have done this automatically so why did it suddenly cost more once we gave a name on it.

Again there are better approaches to rearranging the layout, but a simple column drop does work if you think anything else takes too much time.

Once you’ve designed and developed a few responsive sites the other methods for rearranging your layout are easier to achieve and even more, easier to plan for. The situation is similar to when the industry moved from table based layouts to css based layouts. At first the css layouts took longer to build. Then we learned and they became quicker and easier to build.

It really doesn’t take much extra work to design and develop any responsive site than it does to build a static site when you’re fairly comparing the two. I’m not saying they take the exact same amount of time to build. I’m saying the time is similar once you know what you’re doing.

An Ideal Responsive Site

A minimum viable responsive site shouldn’t be the goal. We should be doing more than the minimum and if we are reaching for an ideal, a responsive design will take longer and cost more to build. But again, that’s not a fair comparison.

The reason the ideal responsive design takes longer, isn’t because of the difference between responsive and static. It’s because a responsive design allows us to consider so many things we never could do with static sites.

A responsive design allows us to do more so we do more. That’s where any extra time and cost comes in. You don’t have to do all the extras to have a responsive design, though. You should, but you don’t have to.

Summary

I can’t claim to have built every possible type of site in a responsive way. I’m sure there will be exceptions to what I’ve said above. There are always exceptions. However, if we’re going to compare the time between building a responsive site and a static one, let’s compare fairly.

Fair is the difference between a static site and it’s minimum viable responsive alternative, and that comparison doesn’t lead to any significant extra time.

Responsive design is a change in mindset more than anything else. Once you embrace that change, responsive design gets easier and quicker to the point where you don’t even think about any difference in development time.

The post Responsive Design Is Easier Than You Think appeared first on Vanseo Design.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

However if we think about multitasking in a different way I think we can become more efficient. I want to look at how we can get several things done by planning what we work on and then offer some thoughts about what I call multipurposing, which is a way to have one thing serve multiple purposes.

Conscious and Unconscious Tasks

First, let’s be clear. We are capable of doing multiple things at the same time. We couldn’t function otherwise. The key is that all, but one of those things needs to be automatic and unconscious. It’s the conscious thought part that requires attention.

We all manage to walk down the street and take part in a conversation, because we don’t have to think about walking. It’s automatic. Trying to follow two conversation on the other hand is something we don’t do well. We might think we’re following both, but we’re only picking up parts of each.

We aren’t good at focusing our attention on more than one thing at a time.

Fill the Natural Gaps in Time

Many tasks have natural break points where we’re waiting on something or someone before we can take a next step. Many times these gaps in time are too small to make use of them. However, when they are large enough we can maximize efficiency by switching our attention and doing something else.

About 10 years ago I worked in a custom picture framing shop assembling frames, mats, glass, etc, into a finished framed print. Building the frames was generally the most time consuming part of the process, but it had natural points where all I could do was wait for glue to dry before continuing.

Since waiting was not the most efficient thing to do, I’d build multiple frames at the same time. I’d grab the big frames that needed to be held in a vice while drying and I’d drill, nail, glue, set, and wait.

While waiting, I’d get the next frame going and then the one after that. If there weren’t more frames to build, I’d work on preparing the mats or cleaning the glass or something else during that waiting period. My attention wasn’t focused non-stop on any one task, but I was being productive every step of the way.

That’s not quite what people consider multitasking, but it is the only way to efficiently get multiple things done at once. All it relies on is advanced planning to maximize how your time is spent.

Think about the things you’re going to do for the day and try to identify points where you’ll be waiting on something or just need a break from it. Find something else you can during that gap in time and have it ready to do.

Multipurposing: One Task Serving Multiple Purposes

I have an alternate take on what multitasking is or what it should be. Instead of trying to do multiple things at once, which isn’t possible, try to do one thing and have it serve multiple purposes.

Many years ago I was reading a book on how to be a freelance writer. The book had lots of good advice, but something that’s stuck with me for years was how the author suggested researching a topic.

Instead of choosing a topic to write about and then researching it, the author suggested you first think about a number of related articles you could also write on the same subject or how you could write about the same subject from a number of different angles.

The rationale is that the research for the related articles would overlap quite a bit and researching them all at once wasn’t going to take significantly longer than researching any single article idea.

• one task (researching a general idea)
• serves multiple articles

If you think about the work you do, you’ll find there are opportunities to multipurpose like this around you more often than you realize.

Much of the time all you need to do is think about something you have to or want to do and then think about how to adapt the task slightly so it can help progress other things you’d also like to get done.

Thoughts for How I Can Multipurpose Better

This blog serves multiple purposes. I post for a variety of reasons.

• To add new content to the site
• To help me learn more about design
• To help you learn more about design
• To provide marketing for my business
• To practice writing and communicating
• To help me think better

When I can I’ve always tried to learn something new on every project I work on. Lately though, I realize I don’t always get to take on projects that help me grow and expand the skills I’m most interested in.

It leads to a 2-step process.

• I spend time learning to work better
• I spend time working better based on what I’ve learned

Wouldn’t it make more sense to combine the two. Why not find a way to make money while learning? Why not put my theory of multipurposing to better use where possible?

There are many projects I’d like to take on for myself. What usually keeps me from working on them is the need to work on things that help pay the bills, while maintaining this blog, marketing my business, and putting in time to learn to do everything better.

Seems like a good opportunity for multipurposing is there for the taking. I could:

• Work on a project for myself with revenue potential
• Learn what I need to learn to complete the project
• Discuss what I’m learning, observing, etc. here on the blog.

It’s so obvious I forget to notice it at times.

I am trying to build toward the above multipurpose taskflow now. In some respects it’s just a matter of being more aware of the things I want to do and seeing where they overlap. In other respects it means freeing up some time so I can put a new workflow in place, while temporarily maintaining the old one.

Summary

I’m sure there are some of you who think you’re good at doing multiple things at once. You aren’t. Accept that. It only leads to doing multiple things less effectively than focusing attention on one at a time.

Instead plan better so you can take advantage of natural gaps where you’re waiting on something before you can take the next step in a task. Plan how to efficiently fill the gaps in time.

Even better rethink the concept of multitasking. Think multipurposing. Think about the many different things you want to accomplish and how you can do one task to help you make progress on multiple projects.

I guarantee there are many opportunities for you to do this if you’re willing to think a little differently about what you’d like to accomplish and how you can accomplish them.

The post Multipurposing — Get More Done Without Doing More Work appeared first on Vanseo Design.

I’d like to change that and hope you don’t mind if I think out loud a little on how to start creating more modular and maintainable SASS projects.

An Example from a Recent Project

Recently I worked on a relatively simple project, a one page site with little content. I had it all designed and developed in an afternoon.

The end game consists of separate style sheets or SASS partials to reap the benefits of modular design.

While waiting on the client to have a look, I thought I’d play around a bit and refactor the css by setting up some variables for color and type in case the client came back wanting changes. As expected my client did want to experiment with color and type choices and having these values in variables made it easier to quickly try different possibilities.

My client, who had some design experience, would suggest a different color scheme and in moments it could be applied across the page. Want to see how different typefaces would look? No problem. Give me a second.

Variables are clearly useful and one of the great reasons to use a preprocessor. However, I don’t think I made the best choices in how I set up the variables. Here are some of the variable names and general organization I created.

1
2
3
4
5
6
7
8
9
10
11
12

/* Background Colors */ 
$background:
$header-background:
$content-background:

/* Colors */
$heading-color:
$link-color:

/* Typography */
$sans-serif:
$serif:*

It’s not bad at first glance, but it really isn’t the best way to organize even these few variables. The main groupings are probably fine, but the variable names aren’t great. At the very least a naming scheme like:

1
2
3

$background:
$background-header:
$background-content

would be easier to read. Variables like $serif and $sans-serif might be better as $display-type and $text-type;, which would be more reflective of their purpose instead of describing their values. My choice seems a little like naming a class red and risking you’ll want the color to later be green.

On the good side:

• I set up variables, which is a major step in the right direction
• I’m isolating color and type values and preparing both design layers for separate files down the road

On the bad side:

• The naming convention is poor. Using serif and sans-serif leads to a single css font-stack for each. Better would be to name them based on their function.
• The variable names are location dependent (header, content, link), which limits where they should be used.

Thoughts for Better SASS Organization

Variables are just the start.

The end game consists of separate style sheets or SASS partials to reap the benefits of modular design. The idea isn’t anything profound as it’s how many are already working with SASS and other preprocessors and it’s how frameworks and the like come into creation.

The obvious advantages are

• Ease of maintenance — A single set of styles would all be located in a single file
• Modular system for reuse — Style sheets could be refactored and collected in a library or framework

For example all color related css could be in one location for easy maintenance. All grid and layout related css in could be located in another file, and so on. Each file could be worked on independently so it could be applied to additional projects. Again, nothing others aren’t already doing.

The question I’m thinking through is what’s the best way to get there. I thought I’d start slow (unlike the larger forced changes I sometimes apply) to have fewer moving parts all at once. Before moving groups of selectors into separate files, I thought I’d start by organizing variables into logical groups and go from there.

Off the top of my head here are some possibilities for each of the groups.

• color
• typography
• grid/layout
• reset
• base
• forms
• tables
• navigation
• components

Another thought is to organize around the SMACSS categories of base, layout, module, state, theme, though looking up at the list it pretty much includes the SMACSS categories and expands on them a bit.

Over the years I’ve tried to organize my css around similar design layers, however it hasn’t always gone well due to a certain amount of overlap. For example should the color of links in navigation be included under color or navigation? How about the choice of a typeface for the same navigational links?

Is it more likely the color scheme or type choices for the design will change or is it more likely the navigation will need change? The changes will be easier and quicker to make if everything that needs changing is located together.

Something tells me what I’m after calls for two systems of organization. One to keep all the navigation code together and one to make it easy to quickly change a color scheme across a design. Perhaps the first suggests how files should be organized and the latter suggests how to organize variables.

Now that I’ve thought out loud a bit, I suppose the next step is trying some of the above and seeing what happens and where issues come up.

Here are a few other posts with thoughts about this. As you can see I’m not offering anything revolutionary here. Just thinking out loud before putting these thoughts into greater practice.

• How to structure a Sass project
• GitHub CSS Styleguide
• Modular Front-End Development With Less
• The #1 Reason to Use SASS
• Sass: A Designer’s Perspective

Summary

I realize my thoughts here aren’t exactly earth shattering for most, but maybe these ideas will be new for some. It does help me to think through them and see them on the screen.

While I’m happy I’ve taken the step to writing css in SASS, I have a long way to go before I’m using it as well as I could. Thinking through how to best set up variables and variable names is a step for me toward modular .scss files. I hope you don’t mind listening in my thoughts.

I assume many of you are already beyond where I am with preprocessors and I’d be happy to hear how you’ve been setting up variables and files for projects. What do you find works well and where you’ve identified some trouble spots?

The post Thoughts For Better Variable Organization In SASS appeared first on Vanseo Design.

Note: This post includes an audio version. If you don’t see the audio above, Click here to listen.

My plan, if you can call it that, was to live life without a plan. Removing myself from my comfort zone and placing myself in the unknown forced me to find new patterns of behavior to respond to the world.

In shaking up everything I knew I’d force myself to see new possibilities that I hadn’t been allowing myself to see.

Ch-Ch-Ch-Ch-Changes

At the end of last week’s post I mentioned making some changes in an effort to make another start at evolving the way I blog. While the changes aren’t as drastic as completely uprooting myself and moving near 2,000 miles away from everyone and everything I know, they’re already helping to shake up old routines.

One thing I’ve begun or begun again is maintaining a journal. Back in the days before the internet I often pulled out a pen and notebook and wrote. I’m doing it again, though I’m now typing into text editors.

It’s a small change, but one that usually impacts my writing. It’s a safe place to collect any thought and get it out of my head clearing the way for new thoughts to enter. It also helps bring more spontaneity to my writing.

In the past I never looked back at anything I’d written in a journal. I saw it more as an exercise to practice writing and especially to lose myself in the flow of writing. It’s serving that purpose again, though this time around and with the magic of search, I hope to be able to pull things directly from my journal at times to either post here or shape into something worth posting.

New Tools For A New Train Of Thought

For a few months now I haven’t been happy with what I’ve been publishing or the approach I’ve been taking to publish. There have certainly been some good posts here, but the whole process has felt forced to me.

I’ve known I could take most any idea, plug it into my process and come out the other side with something I could post. It’s helped to keep me productive, but it hasn’t always kept me inspired.

When I feel a lack of inspiration for what I’m doing I have a tendency to desire a change of some kind. I’m not looking to uproot my entire life again, but I thought I could uproot my workflow with a few new tools.

For the last couple of years my writing process has mainly taken me through two applications, each with its own purpose.

• MacJournal — for collecting ideas, taking notes and writing drafts
• MarsEdit — for editing and polishing the drafts in preparation for publishing

They’ve worked well for me, but over time using them has begun to feel more chore than inspiration. That’s not to imply either is a bad app for writing or publishing. Both are great apps, but using them so often in the same way has made them feel stale to me.

It’s a case of doing the same thing the same way over and over again. To remove that stale feeling I purchased some new editors over the last few months.

• Scrivener — which I’m using to work on an ebook
• iA Writer — which sat idly until I recently started keeping a journal again
• Ulysses III — which I recently purchased and what I’m writing in now

Each of the above is quite different from what I’m used to. It’s that forcing myself out of old habits in order to see new ways of doing the same thing.

All offer some level of distraction free writing, which is something I never thought I’d care for, but I’m now finding more useful than expected.

All can also be used with Markdown, another something I never thought I’d care for. However hearing so much praise for it from people who’s writing I enjoy, I thought why not give it a try.

The latter two apps have one additional advantage in they have beautiful interfaces. I’m a sucker for beautiful things and both apps call to me when I’m not using them. Who said aesthetics aren’t important?

I’m sharing all this with you not because I think you need to run out and buy these specific apps or even care what apps I use for writing. I’m sharing because I’m sure you’ve found yourself in a similar rut where you feel a lack of inspiration in your work and the tried and true has become stale.

If and when you encounter those times think about making some changes. Find some way to leave your comfort zone to force yourself into something new. It can be scary giving up the safe and known, but it’s that safe and known that’s leaving you uninspired. Focus instead on the possibility for something better that can come with change.

Beyond Writing

This isn’t all about writing for me. The opportunity to change editors happened to be in front of me and I grabbed the opportunity. There are many more things I’d like to change, each of which will take me further from my zone of comfort.

• podcasting
• screencasting
• version control
• better use of css preprocessors

Just as it will take me some time to completely change my writing workflow, it’ll take some time to incorporate the above.

I know it will be worthwhile though. Forcing myself out of my comfort zone and forcing myself to learn new ways of doing will inevitably help me to see the same old in different ways. I’ll find new patterns to combine with old ones and as a result grow to be something more than I am.

The post Take A Step Toward Growth By Leaving Your Comfort Zone appeared first on Vanseo Design.

How can we make our designs consistent across devices and maintain visual unity in a design that will inevitably look different when viewed on different devices?

Designing Responsive Systems

Last week when asking if dedicated device designs were appropriate, I mentioned that I think the future of responsive and adaptive design is about designing a system that can sense device characteristics and the context of the person visiting in order to present a design assembled on the fly.

Instead of thinking about different designs for different devices, we should be thinking of designing a single visual system

We’ll be storing more and smaller chunks of structured content that can be combined in a variety of ways. Ideally we’ll be presenting optimized versions of a design for each context visitors are in when viewing the site.

The designs will inevitably be different as we better learn to take advantage of devices capabilities. At the same time we want people who visit the site on a phone and then later on their laptop to instantly know they’re on the same site.

One way we can do that is through visual unity. We can make sure each optimized version of the design has enough visual consistency so that visitors know instantly they’re on the same site.

How to Maintain Visual Unity in a Responsive Design?

I recently watched video of a 20 minute presentation by Laura Kalbag on responsive design systems from the Responsive Day Out convention. The video expands on ideas Laura presented in her article for 24 ways on design systems.

At the start of the 24 Ways article she says.

The best responsive designs are those that allow you to go from one optimised display to another, but with the feeling that these experiences are part of a greater product whole.

That greater whole is unity at work. Instead of thinking about different designs for different devices, we should be thinking of designing a single visual system that may not look exactly the same everywhere, but is clearly one unified version of the same overall system.

It’s ok for our designs to be different across different devices as long as we can maintain a certain level of visual consistency to make it clear to our audience that they’re in right place no matter what device they used to get there. We can do that by treating certain aspects of our design in a consistent manner.

• Typeface choices
• Type proportions
• Base unit for grid/layout
• Color scheme
• General aesthetic tone

Let’s take a look at each of the above in a bit more detail to better understand how they help maintain visual unity.

Typeface choices — Consistent typefaces are the starting point. Whatever faces you use, you should use across all devices. Your audience (outside of type aficionados) probably won’t realize this consistency on a conscious level, but it will register in their subconscious.

Type proportions — In his post Molten Leading, Tim Brown talks about a fundamental triadic relationship of type consisting of font size, line height, and line length. A change in one requires a change in the others. When moving from one device to another these values have to change.

The change in screen width across devices forces a change on the line length unless we adjust by changing one or both of the other two values. We wouldn’t change all three to maintain the exact same relationship between them. Instead we’d likely keep one of the values consistent and adjust the other.

Base Unit — Hopefully you’re on board with the idea of designing content out as opposed to canvas in. Assuming you are, you realize that when developing a grid it should be be based on something internal to the design, which becomes the base unit. This base unit could arise from a number of things.

• Dimension of a banner advertisement
• Dimension of a standard image
• The line height of the type
• A line length of the type
• Modular scale

Wherever it comes from the base unit is a good candidate for consistency. Your grid or general layout is going to be different across devices, but it should still be based on the same fundamental units. Measurements across the layout should be proportional to the base unit.

Color — This should be one of the easier aspects to keep consistent. Whatever color scheme you choose should be used everywhere. How much of each color gets used could vary, though once again I think proportion enters into things.

Your scheme likely has a dominant color, a subdominant color and some additional accent colors. Ideally these should all be present in the same proportion no matter what the device.

General Aesthetics — Here I think there could be more visual variety as your site might conform to what works best on a particular device, but the the general tone of voice behind your aesthetics should remain consistent. If you’re going for a soft weathered look you wouldn’t change to a hard angular and sleek look on one particular device.

A consistent color scheme will contribute greatly here as will the consistent use of key graphics and imagery. Aside from your logo, you might not repeat every image exactly on all devices, but you can pull back and think about what your graphics and images are trying to communicate and make sure any changes in imagery are still communicating the same thing.

The forms you use should also remain consistent. If your aesthetic calls for curves and textures on one device it should call for them on all, even if the specific curves and textures are different.

Proportion

I mentioned proportion a few times above. The flexible nature of responsive design shifts our focus from absolutes to relatives. It’s one of the fundamental changes that’s taking place in this shift to responsive design.

Our print legacy and recent history developing websites has us all thinking in absolutes. We need to change that. The web is inherently fluid and absolutes only exist under a very specific set if conditions that will forever be out of our control.

In addition to the different aspects of design mentioned above, I think we’d all do better to spend more time understanding and working with scale and proportion. Much of the consistency want to bring to different devices will rely on both.

Summary

Our designs will inevitably be experienced in different ways due to the different devices and circumstances present when viewing them. Even were they to look and work exactly the same, they’d be experienced differently because the nature of how one interacts with them will change.

It’s ok for our designs to look and even work differently given they’re going to be experienced differently. What we want to do is maintain the same level of experience. We also want to ensure visitors to our sites know they’re on the same site regardless of how they’re accessing it.

One important consideration in providing the same level of experience is to maintain visual consistency across the whole of our design system. By making sure aspects of our designs like typography and color carry some consistency across devices we can help orient visitors in our sites even as the design changes to reflect the visitor’s context.

The post Visual Design Systems (Maintaining Consistency Across Devices) appeared first on Vanseo Design.