Friday, 28 June 2013

Reminder: Google Reader Is Closing Its Doors - Vanseo Design

Reminder: Google Reader Is Closing Its Doors - Vanseo Design

Reminder: Google Reader Is Closing Its Doors

Posted: 27 Jun 2013 05:30 AM PDT

On Monday Googe Reader is going away. As someone who doesn’t use Google Reader to manage feeds this change won’t affect my reading habits, but as someone who runs a blog where 70% of you are using Google Reader in some form, I expect to be affected.


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

Most of you are likely aware that you’ll need to use something other than Reader in a few days, but I wanted to remind those who don’t and point you to some possible alternatives. Naturally I’d also like to remind you to resubscribe here if you need to re-add feeds when switching to a new reader.

Thanks

First off let me say thanks to everyone who reads here and pays attention to anything I might say. Why you do is sometimes a mystery, but it’s always appreciated. I do my best to respond and say thanks to anyone who gets in touch in some way, but I don’t always thank everyone en masse.

Thanks.

In recent months I’ve received some really nice comments and emails from some of you. Many have reached me one day or another where my attention was perhaps more focused on the difficulty in keeping this blog going than in the enjoyment I get maintaining it. The comments instantly get me to shift focus and remind myself of the good things about keeping up with the daily grind.

For anyone who’s been reading here over the years, thank you. Hopefully you’ll still be reading come next week, but whether you are or aren’t the fact that you have at some point in time is appreciated.

Google Reader Alternatives

Hopefully those of you who need a new rss reader have already found one. I’ve been using NetNewsWire for a few years. At times I’ve looked elsewhere and to be honest the thing that most often stopped me from switching was how many apps required a Google Reader account. Since syncing hasn’t been a need for me I didn’t see the need to sign up for an account just to be able to test an app.

Unfortunately, because I haven’t used many different readers, it’s hard for me to recommend anything specific based on experience. Instead I’ll point you to a few articles that offer alternatives.

The 3 names that seem to come up most often are, Feedly, The Old Reader, and NewsBlur. A couple of pay services I’ve heard good things about are Feedbin and Feed Wrangler. Again I haven’t tried any of them, but I’ve seen all recommended in various places. There are plenty more listed in the articles above and easily findable with a search or two.

My guess is many apps designed for feed reading that make use of Google Reader on the backend will switch to another service and continue to work. You might have to reimport an OPML file and sign up for a new service, though I imagine your app will let you know if either or both are needed.

What the Demise of Google Reader Means for this Blog

I’m not entirely sure what the disappearance of Google Reader will mean for this blog and for others. It’s clearly the most popular way people have grabbed feeds the last few years. FeedBurner stats tell me that more 70% of you are using it to grab my content and that does make me a bit nervous. Will I wake up Monday morning discover I have less than 30% of the audience I had the day before?

Naturally I’m hoping everyone currently subscribed will still be subscribed in some fashion after July 1st. I realize that isn’t likely to happen and subscriber numbers here are probably going down. It’s a bit disheartening to work long and hard gaining new subscribers only to see them drop much more quickly overnight. I doubt I’m the only blogger who feels this way.

I’ve been wondering how accurate that 70% number really is, though. Are that many of you logging directly into Google Reader to get your feeds? Something tells me not all of you are. I couldn’t guess at the number, but I suspect a significant number of you use a 3rd party app that happens to use Google Reader on the backend. FeedBurner doesn’t seem to report these.

While I wouldn’t expect any 3rd party app to be among the top feed readers used, I’d expect some popular ones to appear at least a few times in FeedBurner’s stats. None do so I suspect FeedBurner reports them all as coming from Google Reader as it’s Reader that’s actually pulling the feed.

That probably means less of you are reliant on Google Reader as the stats would indicate on the surface. Most 3rd party apps will likely have you covered with another service, though it’s possible you’ll need to take some action for it to happen. This makes me feel a little less worried, though I still assume I’ll have a smaller audience on July 1st than on June 30th.

I imagine I’ll feel a sense of disappointment and loss, though I’ll do my best to focus on the positive. The truth is anyone who isn’t subscribed after Google Reader goes away, probably wasn’t all that engaged with the site in the first place.

While I prefer not to see the numbers go down, ultimately I think I’ll be left with a more interested, more connected, and more engaged audience, albeit a smaller one. In the end it won’t really affect anything other than the surface numbers.

The more I’ve thought about it, the more I don’t expect the demise of Google Reader to mean as much to most blogs as it might seem at first glance. Reader’s demise will peel away the outermost layer of the onion, but that layer was close to falling away on its own.

Thanks Again and a Last Reminder

Thank you. That you read and comment is noticed and appreciated.

If you use Google Reader, whether directly or through a 3rd party app, you’re likely going to need to do something come Monday morning if you want to continue receiving all you feeds.

There are a handful of services looking to replace Google Reader. They probably won’t have feature parity just yet, but they should work well enough to keep you reading. My guess is Feedly is going to become the most common replacement.

One last time I’ll remind you to resubscribe here. If not, thank you for having been subscribed until now. Hopefully I’ve done enough recently to convince you to stick around longer.

The post Reminder: Google Reader Is Closing Its Doors appeared first on Vanseo Design.

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

Thursday, 27 June 2013

HSL Color Tool Now On GitHub - Vanseo Design

HSL Color Tool Now On GitHub - Vanseo Design

HSL Color Tool Now On GitHub

Posted: 26 Jun 2013 05:30 AM PDT

A little over a month ago I built a simple color tool to help myself learn a little more about color. I was specifically looking to understand the relationship between the hue, saturation, and lightness values that I read about and the rgb and hex values we typically use in css.

If you just want to grab the tool and skip my leading up to it, here’s the link.

If you missed it, I recorded a short screencast showing my color tool and talking about why I created it and why I think it can make for a useful learning tool with some additional development. Here’s the screencast again.

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

At the time I promised I would put the tool online somewhere in case any of you wanted to play around with it, though first I wanted to add a few things to it. Unfortunately I haven’t had any time since to work on it and so still haven’t placed it online for use.

A few you of recently reminded me of my promise and asked again if I would place the tool online. I’ve been hesitant because I did want to make a few changes, but when Colm recently suggested uploading it to GitHub, I thought it made sense and would be a good home for it.

I have a GitHub account that I’ve been using mostly to bookmark projects I’ve been interested in and I’ve been meaning to do more with it. This past weekend I moved all the files of the tool to a repository I created and you can find what I’m calling the HSL Color Tool there.

You should be able to download everything as is and run it locally. Everything that’s needed to run it should be included. My apologies for not saying much in the readme, but it’s really not a complicated tool that needs a lot of explanation.

I do still plan on placing the tool online somewhere so you can play with it without downloading it and running it locally, but I’d like to set that up in a way where I’m still working it locally and pushing changes to the server instead of having to upload files over and over. As soon as I figure out the best way to make that happen I’ll let you know.

For now though feel free to download it from GitHub and feel free to improve upon it. Hopefully you find it useful.

The post HSL Color Tool Now On GitHub appeared first on Vanseo Design.

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

Tuesday, 25 June 2013

Webmaster Tips: articles

Webmaster Tips: articles

Why You Need an International PPC Campaign, and How to Do It

Posted: 25 Jun 2013 08:34 AM PDT

Are you using the power of PPC to get the international traffic you deserve? This sort of advertising can put a brand or service in front of global customers who would otherwise be out of reach.Even if you already benefit from PPC (pay-per-click) advertising, using the English language will only take you so far in the rapidly changing online landscape…

Webmaster Tips: PPC articles

Webmaster Tips: PPC articles

Why You Need an International PPC Campaign, and How to Do It

Posted: 25 Jun 2013 08:34 AM PDT

Are you using the power of PPC to get the international traffic you deserve? This sort of advertising can put a brand or service in front of global customers who would otherwise be out of reach.Even if you already benefit from PPC (pay-per-click) advertising, using the English language will only take you so far in the rapidly changing online landscape…

Grid Construction — How To Choose Constraints From Within Your Content - Vanseo Design

Grid Construction — How To Choose Constraints From Within Your Content - Vanseo Design

Grid Construction — How To Choose Constraints From Within Your Content

Posted: 24 Jun 2013 05:30 AM PDT

The benefits of using a grid are easy to see, but how do you build them? The divisions of unit, field, column, gutter, and row are based on something, but what? Where exactly does this something come from? That’s what Zell wanted to know when he asked similar questions in a comment a couple of weeks ago.

Print offers a ready made solution for the starting point in grid development; a fixed canvas. The web doesn’t provide that luxury. Mark Boulton proposed that we need to stop thinking about designing from the canvas in, and instead design from the content out. In other words we should look to something in our content as the starting point for constructing a grid.

I want to walk you through 3 examples of grid construction. The first comes from Khoi Vihn’s book, Ordering Disorder. The other two will come from sites I’ve built. I won’t walk through all the details and math. Instead I want to focus on the general process, specifically how do you find something in your content around which to build your grid.

grid with potential sources for units
Potential starting points to develop the grid should be found inside the content

Advertising Units as Starting Point

In his book, Ordering Disorder: Grid Principles for Web Design, Khoi Vihn works through an example to show how he might build a grid for a specific design.

What ultimately becomes the starting point for your grid will depend on the specific content of your design and the choices you make in setting constraints

First he looks over the requirements for the project and sketches potential layouts for different sections of content. He looks over the wireframes for consistent elements and in his example notices that several contain a rectangular ad. Given this ad offers the constraint of a fixed size it becomes the starting point for the developing the grid.

Choosing from the standard ad unit sizes, Khoi settles on 336px by 280px. The dimensions can accommodate several smaller ad sizes, which offers some additional flexibility. Khoi’s design further adds another constraint, that of fixing the canvas to 960px wide.

With constraints set it becomes a matter of trial and error to find a grid that works. First Khoi divides the page into 3 equal columns of 320px each. Unfortunately the ad is 336px wide. A 4 column grid is tried next, but it too doesn’t quite work. Khoi continues to subdivide the grid until he finds a solution (a 12 column grid) that accommodates the ad unit and provides enough flexibility for the remaining elements in the layout.

The keys to his process were finding an element with a fixed measurement within the layout, fixing the canvas itself, and using some trial and error to find a grid that works within both of those constraints. While many sites do feature ads, how about those that don’t? And given we work with an unknowable canvas how can we choose a grid without having the canvas be a constraint?

Images as Starting Point

One of my clients is a photographer and we’ve been working on a redesign of her site. There are no ads, but there are a lot of images. Because the site will feature so many images and because we want the size of images to be consistent across the site, they make for a good starting point in constructing the grid.

Like Khoi’s example I began by sketching and wireframing different layouts. Each layout calls for a narrow column of information on the right and a wider column on the left that will hold a grid of thumbnail images, a large single image, or text. The thumbnail images became the starting point and on the widest screens we decided to present 4 images per row.

My instinct was to think in multiples of 5 and I started sketching out a 10 column grid. 8 columns would hold the images and 2 would hold the text. Unfortunately it didn’t work. I hadn’t considered how much space would need to exist between images and text and everything felt cramped.

I was stubborn and tried to make it work by playing around with different sizes for the gutters between columns. As much as I tried I couldn’t make it work. Eventually I switched to a 12 column grid. 8 columns for the images, 3 for the text, and a single empty column to provide enough space between them.

Notice that I haven’t mentioned fixed sizes for the images or the canvas. They weren’t necessary to develop the grid. We needed to know what size to make them, but that came from other considerations. Making a decision about the size of the large image, the thumbnail image, or even the maximum width of the layout quickly leads to all the other sizes.

Typography as Starting Point

This site features more text than images so when I designed the current version, I decided to develop the grid around the type. One of the first things I did was choose a typeface. I then played around with font size, leading, and measure, until I found a combination I liked.

The length of a measure of text became the constraint to build the grid. Because I didn’t want the measure to grow too large or small I constrained it to a max and min width. These became fixed constraints from which the grid followed.

Again starting with some sketched layouts, I played around with different numbers of columns. Like the examples above I didn’t get it right on the first try. Initially I tried a 12 column grid because it offered the flexibility of dividing the space into multiples of both 2 and 3. However, when I placed the measure of text inside, I didn’t like the resulting space.

Trial and error led me to settle on an 8 column grid. Text occupies 5 columns on the right. A single column of empty space sits immediately to its left. 2 columns on the far left hold meta information on posts and sub-navigation on pages.

Summary

Why you would use a grid isn’t hard to understand. What’s more difficult is understanding how to build grids. While the details differed, the process for building the grid was the same in all 3 examples above.

  1. Potential layouts are sketched and/or wireframed
  2. Something within the content is chosen as the constraint for building the grid
  3. Different grids are explored and through trial and error a solution is chosen

In Khoi’s example an ad unit served as the constraint. For my client’s site it was a thumbnail image. For this site it was the length of a measure of text.

What ultimately becomes the starting point for your grid will depend on the specific content of your design and the choices you make in setting constraints. You can find something that naturally occurs in your design or you can create your own constraint from which everything else follows.

You may not choose the best grid for your constraints initially, but that’s ok. Exploring a possibility that doesn’t work will reveal problems in the grid you’re exploring and the reasons why that grid doesn’t work will lead you to the eventual grid that will work.

The post Grid Construction — How To Choose Constraints From Within Your Content appeared first on Vanseo Design.

Friday, 21 June 2013

How To Recognize When An Opportunity Is Right For You - Vanseo Design

How To Recognize When An Opportunity Is Right For You - Vanseo Design

How To Recognize When An Opportunity Is Right For You

Posted: 20 Jun 2013 05:30 AM PDT

How often does opportunity strike? Is it a once in a lifetime proposition. Is it your only hope for starting a business before it’s gone forever? Or is it something that comes again and again waiting for you to be ready for it?


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

A few weeks ago I came across a post by Laura Spencer for Freelance Folder about 7 freelancing secrets for balancing work and life. One of the secrets was that you shouldn’t believe opportunities are once in a lifetime. In Laura’s words.

We freelancers put a lot of pressure on ourselves by believing that a project or product is a "once in a lifetime" opportunity. We knock ourselves out to get that opportunity, believing that this is our only chance. Most of the time, these unique opportunities are not really so unique. In reality, most legitimate opportunities repeat themselves over time.

I agree, but think there’s more to the story.

Opportunity Strikes Often, but it’s Seldom the Same

I’ve mentioned wanting to build a business around WordPress themes for several years now. When I first started thinking about it, there weren’t a lot of theme shops online and the opportunity existed to build a business where limited competition was present.

That opportunity no longer exists because there are many, many theme shops around today. However, the opportunity to build a business around WordPress themes still exists and likely will as long as WordPress exists.

The general opportunity is there though some of the specifics have changed. The lack of competition is long gone. It takes new skills to work with WordPress. The market has different needs and wants. Price points have changed. However, the general opportunity to build a business around WordPress themes (or plugins) is there as it always was.

I did miss an opportunity and that was to get in on something early. That doesn’t suggest I could never build a successful theme business or that I would have been better off jumping at the earlier opportunity. It’s possible at the time:

  • My WordPress skills weren’t sufficient
  • My understanding of the market wasn’t sufficient
  • My ability to reach that market wasn’t sufficient
  • My understanding of price points wasn’t sufficient
  • My business acumen wasn’t sufficient

Any of the above could have rendered the business a failure despite the advantages the opportunity provided.

It’s possible that while getting in early would have meant fewer competitors, I might not have been ready in enough of the other aspects needed to build that business. Missing the earlier opportunity meant giving up the specific advantages it brought, but the opportunity comes around again and again bringing new advantages and difficulties with it each time it does.

My abilities grow and change over time as do the specifics of the opportunity. My probability for success will be greatest when the skills I bring to the business best align with the specific advantages and difficulties the opportunity brings to it.

Sometimes You Have to Jump on an Opportunity

Sometimes it makes sense to jump on an opportunity. A few years ago a forum I posted to was having some issues. The owners at the time showed a lack of interest and concern for the community. At one point the forum went down for a couple of weeks with little explanation and zero apology when it eventually came back online. For much of the remaining community it was a last straw that would send them away for good.

I had been the sole moderator of this forum for about a year and was ready to take a larger role in running one. With the community about to disintegrate and being ready to take charge of it, I grabbed the opportunity to build a new forum around an existing community wanting a new home.

5 years later my business forum is still growing. Had I hesitated even a few days though the opportunity to build it would have been gone. In this instance my abilities matched well with the specifics of the opportunity. Those specifics were time sensitive in that there was a limited time frame in which that community would still be a community.

Concluding Thoughts

An opportunity isn’t a guarantee of success. Many different things have to happen for a business to be successful. An opportunity provides for an easier path with one or more of those things, but rarely does it hand you instant and lasting success on its own.

When an opportunity presents itself there are a few things you should ask yourself when deciding whether or not to take it.

  • Is it time sensitive?
  • Is it unique or can it be duplicated?
  • How will conditions and context change if you wait?
  • How well do your abilities align with the specifics of the opportunity?

You should always be watching for opportunities, whether it’s for a new business or a way to improve your existing business. Just remember that opportunity doesn’t equal success. It’s a potential path to making success easier, but you have to be ready to travel down that path.

You can ready yourself by paying attention to your business and industry and everything connected to it. Understand what it will take to succeed and how well you can or can’t do those things. Recognize where an opportunity helps with the process and also what you might have to give up in accepting it.

If you aren’t ready it’s ok to let an opportunity pass. It will come along though it will take a different form and offer different advantages to help with success. You’ll also find the things you observe and pay attention tend to shape the form of the next opportunity you recognize.

The real secret to opportunity is that it’s always in front of you. The key is in recognizing what specific advantages the opportunity brings and whether or not they align well with what you can bring to the business at that time.

The post How To Recognize When An Opportunity Is Right For You appeared first on Vanseo Design.

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

Tuesday, 18 June 2013

Design In The Browser Means An Iterative Workflow - Vanseo Design

Design In The Browser Means An Iterative Workflow - Vanseo Design

Design In The Browser Means An Iterative Workflow

Posted: 17 Jun 2013 05:30 AM PDT

Designing in the browser is a topic that comes up often as web designers shift to a responsive workflow. There’s something of a divide in opinion, though. Some insist designing in the browser is the only way to go, while others suggest it can’t be done and graphic editors like Photoshop are still required. I think part of the divide has to do with what it really means to design in a browser.

An article by David Bushell and a couple of presentations by Brett Victor caught my attention recently and both clarified my thoughts about designing in the browser and why questions about its value exist.

I wanted to share some thoughts about the article and presentations and then offer where my own process is when it comes to designing and developing a site.

Design tools

What Does it Mean to Design in a Browser

David’s article suggests designing in the browser doesn’t mean abandoning the mock-ups we’ve always delivered to clients, but rather means adopting a more iterative and agile workflow for designing and developing a site.

I completely agree with the idea of designing with a more iterative process. Thinking back before responsive design a typical workflow moved through several phases each with different deliverables.

  • Research and Planning — deliverables were most often written documents
  • Design — deliverables were one or more static design comps for client sign off
  • Development — deliverable was a site in progress seeking client feedback
  • Deployment — deliverable was the finished site

The biggest problem is in that word static. Not that a website was ever a static thing, but it’s now less so under responsive design or at least the responsive part is calling our attention to the dynamic aspects more. A static comp produced in Photoshop doesn’t really give an accurate picture of how the design will work.

For clients to get the complete picture they need to see our designs in the browser, which means some development is going to be involved.

It doesn’t mean we have to abandon graphic editors. Designers are visual people and visual tools help us create. We’ll still sketch with pen and paper and use tools that allow us to move text and shapes around the canvas.

What’s most important is our old deliverables don’t communicate enough of what’s going on and browsers are better tools for the communication. We can still use graphics editors and send design comps as long as we and the client understand those comps aren’t communicating everything. As soon as possible we should push deliverables to the browser. Ultimately it leads to greater understanding and a better process with better results.

As David points out we can design outside the browser and communicate within it and the best way to accomplish that is with a more agile workflow where design and development happen in concert.

Thinking in Pictures or Procedural Abstraction

Brett Victor’s presentations aren’t specifically about web design. They’re more about the way we think and create. Both presentations demonstrate a new tool he’s working on and after watching I couldn’t help but see the connection with this divide about designing in the browser.

Here are the presentations (35 and 40 minutes) along with some additional notes from Brett. Again they aren’t specifically about web design, but both are interesting and I think worth watching.

Brett suggests we currently have 3 ways to visualize data.

  • Use an existing tool or template — This is easy, but doesn’t allow for creative freedom. It’s not expressive, because you’re forced to work within the fixed structure of the tool or template.

  • You can draw (thinking in pictures) — This allows for creative freedom and a directness of expression, but presents a static picture of a system. New data requires a new drawing.

  • You can code (procedural abstraction) — This allows you to generate dynamic pictures, but does so by blindly manipulating symbols. You have to imagine the final visualization and can’t manipulate it directly.

It’s easy to think about these 3 ways of visualization in the context of responsive design workflows. The first is using a templating system like Bootstrap. The second is sketching and creating with tools like Photoshop that produce static mock-ups. The third is designing solely with code.

Brett doesn’t think any of the these 3 ways are ideal for visualizing the dynamic systems we deal with today. The tool he’s building aims at giving us a 4th way that will allow people to create visual pictures that can be dynamically updated.

Isn’t this the current divide over designing in the browser? Some people grab the nearest framework, make a few tweaks, and instant website. Others think in pictures and create however many static wireframes and comps they feel necessary. Some seem to suggest designing in code with the browser as a canvas.

What we’d ideally have is a combination of these things. Something that would allow us to draw pictures of procedural abstractions that we could directly manipulate and easily modify. Toss in a way to modularize some of the work we know will get repeated in or across projects and we’re set.

My Evolving Process

Unfortunately the tools we’d ideally like aren’t currently available. Our best solution at the moment comes back to adopting an agile workflow with more iteration and deliverables closer to the medium in which the work will live.

Ever since I began building responsive sites my workflow has been evolving. I find myself relying less on graphic editors for design, though I still sketch and make use of graphic tools. When using visual design tools I understand the result is only a static snapshot of the design and I’m delivering less of these static snapshots to clients, and presenting more deliverables in the browser.

Because my process is now more iterative and design and development occur together there aren’t clearly distinct phases like in the past.

  • Research and planning
  • Design
  • Development

Research and planning still works like it always did. There’s a back and forth with the client as we both ask and answer questions. I also research the client’s industry to understand it better. My goal is to define a concept for the design, organize the information, set up the site architecture, etc.

Design begins with sketching and starts while I’m working out a concept. I may or may not work out visual details in a graphics editor. When I do I’m keeping these “static comps” rougher than in the past. They’re mainly for me and may never get sent to clients. I also create style guides that include possible typefaces, color palettes, and meaningful aesthetic details. While working in these style guides I tend to work out any necessary grid math.

I’m still working out the best way to create deliverables for this phase, but more and more the deliverable is living in a browser usually as a simple html/css page built around the layout I’ve sketched for the design.

Development begins with these deliverables. I use the information I work out in the style guides and add them to the layout. Essentially I build a rough version of the design in html and css and show it to the client. I try to keep everything as modular as possible to make changes quicker and easier. For example I’ll set up colors as Sass variables and if the client wants to try another palette it’s a quick change to incorporate a new color scheme.

Thinking about the process in regards to designing in the browser, I don’t literally design in the browser. Rather I refine in the browser. I create enough visuals for myself to get started developing. That always includes sketching and may include something more refined in a visual editor. As soon as possible I begin developing my rough idea and show it to my client in a browser. At that point the design is a collaborative iteration until we both agree it’s done.

The major change in my workflow has been to modularize the visual design as I work on type, color, layout, and aesthetics independently before combining them. As I’ve done that my deliverables are moving from a high fidelity comp to something of a cross between style guides, mood boards, and style tiles.

Summary

I understand why people are divided over designing in a browser. I think part of the reason is that designing in the browser isn’t literally designing in the browser, but rather moving deliverables to the browser sooner and iterating those deliverables until they become the finished site.

I also suspect whichever side you lean to in the divide has to do with how you entered the world of web design. If you entered from the graphic side, perhaps with a print background you probably feel more comfortable creating static comps. If you entered from the development side you probably feel more comfortable working with code and a browser.

What we ideally need are new tools that incorporate the visual and the dynamic and create deliverables that communicate more effectively to clients. Until then I think a more iterative and agile workflow where deliverables are pushed to the browser sooner is the way to go.

The post Design In The Browser Means An Iterative Workflow appeared first on Vanseo Design.

Friday, 14 June 2013

Learning Through Exercise — The Bridge Between Theory And Real World Practice - Vanseo Design

Learning Through Exercise — The Bridge Between Theory And Real World Practice - Vanseo Design

Learning Through Exercise — The Bridge Between Theory And Real World Practice

Posted: 13 Jun 2013 05:30 AM PDT

My current approach to learning design is reaching a point where it’s beginning to fail me. I don’t mean to imply that it doesn’t work at all, but rather it seems to only have the ability to take me so far and I’m starting to bump up against its limits. With some aspects of design my approach is plateauing at a point at which I still want to climb higher.

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

Earlier in the week I mentioned a realization I had about adding a routine of directed exercises to improve my skills working with color. This realization wasn’t limited to color. It was more about learning in general and about theory, practice, and exercise in particular.

I want to share some of the thoughts that have come about through this realization and offer some ideas for how best to learn different aspects of design.

Theory and Practice

There’s no substitute for the doing. I could explain to you everything you need to know to play the guitar and you can read about it and watch others explain the same things, but until you actually pick up the instrument and train your fingers to form chords and play scales you won’t be able to play the guitar. It’s no different with something seemingly less physical like design.

Practice is important because it trains your muscles or your brain to do some things automatically. Practice also gives you a deeper and more visceral understanding of whatever it is you want to learn. If you could only choose one or the other I’d always choose practice, because you simply have to do in order to do.

However, practice doesn’t show you everything. While it lets you feel and climb the trees and see the how their roots reach into the ground, at some point you have to step back and see the trees through the lens of the entire forest. You need the big picture to see the connections between different trees and those connections can take a long time to see through practice alone.

That’s where theory comes in. Where practice is learning from your own experience, theory is learning from the experience of those who came before. You aren’t the first person to design something. Others have figured out lots of what makes for good design so why not take advantage of their experience and avoid some mistakes or let their experience guide yours.

In his book Outliers Malcolm Gladwell popularized the idea of it taking 10,000 hours of practice to become an expert. Whether or not the number 10,000 is significant in any way isn’t important. The point is it takes a lot of practice to become good at something.

There’s huge difference though, between practicing without any direction and practicing based on some kind of plan. The latter can greatly reduce the number of hours it takes to become good. It’s another reason why combining theory and practice is important. You have to practice, but you won’t need as much practice if you put in some time studying theory as well.

My Approach to Learning

Whenever I approach a new subject, I typically begin with theory. It helps me avoid some early mistakes and gives me an overall understanding that might take years of practice to reach. Ultimately it helps prepare my first few efforts to be better and gives me confidence that I can get even better.

There’s a danger though in that I can easily find myself spending too much time in the theory, wanting to perfect every attempt before I even try. In spending too much time looking at the forest you can lose your connection with the individual trees you’ve been trying to know.

Practice is improved by theory, but theory needs practice. Sometimes I can get that practice through client work. When I can’t it’s on me to create projects that let me apply the theory I’m learning. Sometimes that’s not too difficult. Other times it’s harder than it you’d think.

There’s another way to practice and do and that’s through exercise. The first part of my recent realization is this understanding that exercises can bridge the gap between pure theory and real world practice.

Directed Exercise

Directed exercises give you practice because you have to do the exercises. They teach you theory because they aren’t random. They’re designed based on theory to help you learn something specific or to learn several things in a certain order to maximize what you get from each.

Working through exercises consistently and in a planned way is akin to practicing and performing katas in the tradition of a martial artist.

Those who design good exercises do so based on their own experience and what they’ve come to see is valuable for others to learn.

Directed exercises aren’t the same as real world practice. You’re practicing theoretical problems that you may never apply directly, though you’ll gain skills you should be able to apply to real world projects.

Toward a New Approach to Learning

The second part of my realization is an understanding that different design skills are best learned in different ways.

I think one of the reasons I find working with color difficult is because there’s only so much theory and it’s only so useful. Choosing colors is ultimately a skill that comes more from experience than intellectual understanding.

A similar situation exists with type. For me the most difficult typographic decisions revolve around choosing typefaces. That aspect of typography is also much more experiential than intellectual. Theory has helped me work with size, measure, and leading, but it can’t give me the eye for choosing one typeface over another.

My guess is I’ll need to find some exercises for working with type the same way I’m currently seeking some for working with color.

Concluding Thoughts

Not long ago I mentioned the letters of Vincent van Gogh and how they offered a good path to follow for maintaining a blog about design.

There’s a connection between van Gogh’s letters and what I’m talking about in this post. Those letters often share observations, thoughts, and critiques about daily practice in painting. Some letters discuss the finished work we’re familiar with. Other letters discuss what would be considered exercises designed to learn or prepare for those finished paintings.

I want to take this blog in the direction of van Gogh’s letters, but it hadn’t occurred to me until now that the desire is based on something deeper than this blog. The desire is more about changing how I learn. It’s about putting more emphasis on doing, in a way specifically directed toward learning and sharing what I’m learning.

I suspect it won’t be an easy change for me, given my current approach to learning has developed over a very long period of time. However, I think this change necessary in order to grow past a level of skill that I may have reached or be reaching soon.

The post Learning Through Exercise — The Bridge Between Theory And Real World Practice appeared first on Vanseo Design.

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

Tuesday, 11 June 2013

Developing An Eye For Color Through Exercise - Vanseo Design

Developing An Eye For Color Through Exercise - Vanseo Design

Developing An Eye For Color Through Exercise

Posted: 10 Jun 2013 05:30 AM PDT

While I can’t proclaim to have read through dozens of books about color, the few I have read, all mention different exercises you can do to practice working with color and develop a better eye for it.

In my own foolishness I’ve generally ignored the advice and the exercises. For some reason they feel like homework, which I was never too excited to do. However I’m coming to realize how important they are if I want to improve my ability to work with color.

Example from a color exercise making a single color look like 2 different colors
A single color (#80c5c9) looks like two colors based on different backgrounds (#998fa7 left and #50d8d8 right)

Theory, Practice, and Directed Exercises

This is something I want talk about more later in the week, but let me offer some brief thoughts about theory, practice, and directed exercises.

  • Theory — Teaches based on the experience of others and shows the big picture.
  • Practice — Teaches based on your experience and leads to deeper understanding while training you physically to do.
  • Directed exercise — Uses the experience of others to direct your experience. It’s a bridge between theory and practice and aims to give you benefits of both.

At times I’ve been good about following the exercises offered in books on a particular subject. For example typing out all the code in development books. Color has not been one of those subjects.

However, something clicked with my recent reading and I’m now realizing the benefits of performing different exercises to apply theory and gain personal experience at the same time.

Interactions of Color

Josef Albers is a name you’ve possibly heard before. He was an artist and teacher who explored color relationships. Interactions of Color is his famous work and I happen to own an abridged version from a number of years ago.

Albers believed a person’s ability to work with color could be improved through practice and exercise and naturally designed many color exerices to helps his students work more effectively with color.

A couple of years ago I read through my copy of Interatcions of Color. Unfortunately I read it more as a way to increase my theoretical knowledge of color instead of what it was intended for and so didn’t get from it what I should have. It’s something I’m looking to change in the near future.

One thing that’s held me back in working through exercises in books like this one is they look at subtractive color systems where color is produced by the reflection of light not absorbed. That’s by no means a fault of the books. That’s the color system they were dealing with. However, on the web we work with an additive system where we see the color based on the light produced and not reflected.

I know I’m more likely to follow the exercises if they can be made to work with the tools I’m more likely to have and use.

Impetus for a Color Tool

When I showed you the simple color tool I developed a couple weeks ago there was something I didn’t tell you. I didn’t really share what inspired me to build it in the first place. The impetus was to help with a color exercise I’d read about.

The exercise has two parts. First is to collect anything you think uses interesting color combinations and keep it in some kind of sketchbook. Take photographs, clip magazine images, capture screenshots of websites. The idea is this will help train yourself to observe color and recognize color relationships that work well.

The second part of the exercises involves creating color palettes based on what you’ve collected. However, instead of using a tool to find the exact colors in the images you’ve collected, you create them independently.

Using colored pencils, pantone swatches, colored paper samples, or parts of other images you try to recreate the palettes from the collected color combinations. While you do, make notes about why you think the palette is successful and how it might be used to solve a design problem.

If you maintain your sketchbook and allow it to be a work always in progress, it should become your own personal reference guide to color relationships.

Since, I’m not the type to carry around color swatches or tear images out of magazines I thought why not develop a tool that would allow me to work this exercise digitally. I wanted something simple that used HSL to set colors. Next thing I knew I was working on a tool to help with this particular exercise.

At the moment I’m grabbing screenshots of the palette I create and later comparing it to the actual colors in the image I’m trying to match. Down the road I think it would be great if the tool could store both image and palette, allow for notes, and make it easy to come back to everything.

Color Exercises

In an effort to improve my skills with color I think some time should be devoted each week to different color exercises and exploration.

My original intention for this post was to share a some of the color exercises with you, but I’m still searching for which exercises I want to add to my routine. That’s what I get for trying to do too much during a busy week or two.

Because I haven’t had a chance to choose the exercises and work them into my routine, I’ll have to save that talk for another time. I can however provide you a couple links where you’ll find lots of different color exercises to try.

If you search using the words color and exercise(s) and you’ll find plenty more.

Summary

It’s taken more time than it should, but I’m finally realizing that improving my color skills will require more critical observation of color relationships along with practical exercises designed to help in those observations.

I plan on incorporating some exercises into my weekly routine, though I haven’t yet had the time to figure out which exercises. I’m talking about it here in order to make a commitment and hopefully to convince you doing something similar is a worthwhile pursuit assuming you’d also like to improve your color skills.

While this post has specifically focused on color, the realization I had evolved into something more general. Later in the week I’ll share some thoughts about the value of learning through directed exercises. It’s something I think has often been a missing ingredient in my self education.

The post Developing An Eye For Color Through Exercise appeared first on Vanseo Design.

Friday, 7 June 2013

Procrastinate Your Way To A Successful Business - Vanseo Design

Procrastinate Your Way To A Successful Business - Vanseo Design

Procrastinate Your Way To A Successful Business

Posted: 06 Jun 2013 05:30 AM PDT

Sounds too good to be true, doesn’t it? Sit around and procrastinate and watch as success sweeps over you? Well it is and it’s not quite what I’m saying with this post. What I’m talking about is a way to figure out what you feel passionate about, and how to incorporate more of that into your business.

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

The title of this post was inspired by something Jessica Hische said in an interview she gave a few months ago. It’s been awhile since I listened so I hope I have the following quote right.

The work you do when you’re procrastinating is the work you should do for the rest of your life

Whether or not I have the exact words right, the general idea behind the quote has stuck with me, given it’s close to how I got started as a web designer. I thought I’d share a bit of my story about how I started designing websites and how I let my choices in my free time lead my business.

How I became a Web Designer

I won’t bore you with my entire life’s story and career path, which has forked so many times it isn’t funny. Suffice it to say I’ve held quite a few jobs, from a civil engineer sizing, steel beams and columns to working a cash register and not always in the order of a typical career arc.

12 or 13 years ago I was working for a company that converted print books into ebooks long before anyone really cared about ebooks. It was a dot com that was growing frantically when I was first hired and shrinking even more frantically after the bubble burst about a year later.

Seeing the writing on the wall and realizing the job hadn’t given me any transferrable skills I decided to take some continuing education classes to pick up some useful skills before I was inevitably looking for work again.

I started working toward a certificate in C++ programming thinking skills as a programmer would lead me down a successful career path. It was a rational plan, but something inside of me had other ideas.

In creating ebooks, the company I worked for used html-like code to place digital content online. It wasn’t quite html, but it was a similar kind of markup language and I found that I was able to work easily in it. Even more, it felt natural for me to wade through the markup.

So while taking C++ classes a few nights a week, I also began learning html in my spare time at home. I picked up books on html and the then barely used css. I grabbed student copies of programs like DreamWeaver and Fireworks and on my own explored building websites.

Another Job to Keep Me Going

One of the people taking the same C++ classes as me worked as a software tester. He knew I was looking for work and I guess I impressed him enough answering questions in class that when his company was hiring he thought of me and asked me to email him a resume.

Thanks to Jim I landed a job as a software tester, which I thought was going to be the start of my career as a programmer. The job was as a low level tester, but my plan was to learn what I could and hopefully down the road be writing the software instead of testing it.

When I’d get home at night though, instead of reading and learning more about programming or just relaxing after a long day, I found myself wanting to learn more about designing and building websites.

I suppose it’s not so far removed from programming to be shocking, but it wasn’t long before I realized that I was spending much of my time building websites. Most never saw the internet, but I could see them and they weren’t too bad. Soon I added more classes to earn a second certificate in web design.

Every book I’d buy would be about designing websites. I started spending free time at work on the W3Schools website reading tutorials. Before long whenever I was procrastinating or had some time to fill I was filling it with something related to designing websites.

About a year into the software testing job the company I was working for was sold to IBM. Unfortunately for our office, we worked testing software that duplicated software IBM already had and they closed our office and I was once again without work.

By this time I had completed the C++ certificate and had some experience working with software. However, instead of seeking employment, I started taking steps toward self-employment designing and developing websites. At first it was in partnership with a friend and not long after it was on my own.

How My Free Time Shapes My Business Today

I’ve never forgotten how I didn’t follow a specific plan to becoming a web designer. My path was much more organic. I just found myself designing websites more and wanting to get better at it.

It might not be the best way to plan a career, but I’ve continued the same way since. It’s the things I gravitate toward when I’m not getting paid and when I’m doing something for its own enjoyment that I want my career to follow. I don’t mean that in the sense of dropping everything to follow a whim, but I look for ways to tweak my business to align it more with what I choose to do in my free time.

For example while I blog for a variety of reasons, I started mainly to help market this site and my business. Over time I realized how much I enjoy writing for all the other reasons and have tweaked my business to bring in more revenue from writing. That’s generally meant getting paid to write for other sites. Recently it’s included working on a book about design principles that’s nearly finished.

I’ve dropped services over the years I didn’t enjoy doing and more importantly didn’t care to get better at doing. You’ve seen more podcasts and now a screencast here, because I listen and watch more and more in my free time.

It’s not always easy and sometimes it takes me a long time to figure out how to incorporate something from my free time into my working life, but at every step it feels right. It feels like another step down a path I’m meant to travel.

Summary

The majority of time we spend in our adult lives revolves around the work we do. Long ago I decided that being able to enjoy my work and time were more important to me than other reasons you might pick and choose a career.

We all need to earn a living and we can’t just chase any whim as a career, but I think we can always be shaping our careers and driving them in new directions.

For me the guide that leads my career shaping comes from my idle time. What I choose to do when in a free moment or when I’m avoiding something I don’t want to do are those things I realize I enjoy most. Where possible I find ways to incorporate them into my business.

That’s how procrastination can lead to success. What you naturally gravitate toward doing gives you insight about what you really want to do. If you can find a way to incorporate some of these things into whatever work you do, you’ll likely find yourself enjoying your work and time more and to me that’s a pretty good definition for success.

The post Procrastinate Your Way To A Successful Business appeared first on Vanseo Design.

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

Subscribe to: Posts (Atom)