Friday 30 January 2015

Adding Value To Your Freelance Business Through Scarcity - Vanseo Design

Adding Value To Your Freelance Business Through Scarcity - Vanseo Design

Adding Value To Your Freelance Business Through Scarcity

Posted: 29 Jan 2015 05:30 AM PST

How do you differentiate your business from your competition? Will potential clients recognize your brand? Do they even know your brand exists? What can you do that can’t be easily duplicated?


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

The last few weeks I’ve talked about what I think is a changing and shrinking market for our services. It’s certainly true for my services and I’m guessing yours as well.

I talked about the smiling curve and how it points the way for us to survive and thrive despite a shrinking market and then last week I looked at the right side of the curve and how you can add value to your business through scale.

Today I want to talk about moving to the left along the curve and adding value through differentiation and uniqueness. I want to talk about how you can add scarcity to your business.

The Opposite of Scale

One of the things I find interesting about the smiling curve is that you can add value on opposite ends of the value chain. The main thing is to move away from the middle and you have choices in which way to go.

You can add value at either or both ends, based on your interests, your skills, or the potential revenue something brings. Choose the thing that comes easier to you or that you find less objectionable. You should be able to find value somewhere away from the middle that you’re comfortable doing.

One end of the curve was scale. The end I want to talk about today is the opposite of scale. It’s doing something difficult to duplicate. You’re adding value through a lack of scale, through scarcity.

Offer something that’s difficult to replicate, automate, or scale. Make yourself or your work hard to copy. Differentiate yourself from the designers and developers that are your competition. Do something they don’t know exists or better that they still find difficult to copy even after they see how it’s done.

Become a better designer or developer. Become a more unique designer or developer. Become a more unique you.

Give yourself bonus points if you recognize the battle between productivity and creativity in all of this. Scale and productivity on one side. Scarcity and creativity on the other.

How to Differentiate and Be Scarce

Just as there are multiple ways to add scale, there are multiple ways to differentiate and add scarcity. I think they all revolve around doing what you do better and doing it more uniquely you.

I’ll break things done into two main categories.

  1. Specialization
  2. Brand

Specialization

Go niche. Look deeper instead of wider. Specialize.

You might need to be less of a generalist. Sell a narrower set of services with a deeper focus on a smaller market. Get better through your deeper focus. Become the big fish in the smaller pond as opposed to yet another small fish in the ocean.

Smaller markets aren’t as profitable for companies that are built for scale. Scale seeks increased sales. It wants larger markets. Larger organizations at scale are looking to serve the masses. They can’t serve everyone with the same level of quality or satisfaction.

In moving to a niche market you can serve a smaller segment of the overall market better than the big companies. Serve the underserved edges instead of the center.

You should command a higher price because there are less people serving the smaller niche. There are fewer people the market can turn to. Less supply with the same demand leads to higher prices.

Less people will choose to become an expert at the same thing you do so there will be less competition. Your services are more scarce. Your prices can be higher and you don’t need as many clients.

If you believe in the idea that 1,000 true fans can support a creator how many do you think are needed to support a service based business? 20? 50? How many clients do you really need. If you can become the expert for 50 or 100 people, you probably have a strong freelance business.

Specialization could mean working for a larger organization. It wouldn’t be joining the organization for scale, but rather to be the expert in something the company does. Maybe it means you become the department. The idea is to make yourself the most difficult employee for the company to replace.

It could also mean working for yourself and offering services few others do. You might combine services across different disciplines. For example combine design, development, marketing, sales, and analytics and offer conversion optimization services to ecommerce clients. I don’t know how many people currently offer conversion optimization (CRO) services, but I’m sure it’s less than those offering general design and development services.

Building a Brand

Building a brand isn’t easy or quick work, but there are a few things I want to talk about that can build your brand in way that adds scarcity to your business.

  • Get better
  • Develop a recognizable style
  • Share a distinct personality

Get Better

One way to stand out is to be better than everyone else. Be the best designer or developer you can be. Improve your skills, which is something you should be doing anyway. Be better than that. Be the only person that can solve a client’s problem. Be someone they think in advance can solve their problem.

The best, the most talented, the most skilled, won’t lack for clients or job offers should they prefer. You’ll be able to ask your price or your salary. The best comes with a limited supply of one. You can’t get much more scarce than that.

Be so good that when someone wants it done right, they want you. When businesses talk about the successful sites they have, you want them to mention you as the person who designed and/or developed the site. You want everyone talking about you and how good you are. Build a brand around yourself or company that has people asking for one or both by name.

One way I think we can do this that doesn’t get talked about enough is to become a better storyteller. Stories are about communication. Design is also about communication. Design is visual storytelling.

Businesses sell products and services with stories. The business tells a story about itself, the work it does, who it can help, and more. If the story resonates with a potential customer it likely leads to a sale. Tell stories visually that let your designs sell products and services like they’re supposed to do.

Recognizable Style

Don’t just get better. Develop your own unique style. When it’s time for a potential client to hire a designer or developer make them ask for you by name or point to something you’ve done and say they want the person who did that work.

Mike Kus is a web designer who comes to mind as someone with a unique style. You may not like every one of his designs, but there’s usually something interesting in them and more important there’s something unique. I can often tell Mike’s work without knowing Mike was the person behind the work.

It’s possible people will try to copy your unique style, but if they do it well, people will probably think it’s you and if they do it poorly it’s easy to point out it’s not your work. Kind of a win-win for you.

Who says aesthetics aren’t important? Like it or not it’s how most people will judge your work. They’ll decide if a design is good based solely on an initial impression of how it looks.

We try to get away from aesthetics as what we think is important and what we wish customers would see. We’ll push usability and performance as web design and both are certainly important aspects of designing a website.

You can’t ignore the parts about making a site usable and functional and doing what you can to improve its performance. But don’t kid yourself into thinking that how your designs look isn’t the major factor in why most people hire you.

You should probably spend more time improving the aesthetic quality of your work. Before someone realizes how easy it is to navigate around your latest design, they’ll notice your color scheme and decide if they like the site.

It’s great to focus on usability and accessibility and performance and we should all be getting better with these things, but if your site looks like ever other site (Bootstrap anyone?) what is there to compel someone to choose you over all the other sites that look the same.

Like it or not; agree with me or not, a lot of people will hire you based solely on how the sites in your portfolio look. That’s just how it is. Develop your unique visual voice. Discover trends before everyone else or better be the trend setter.

Aesthetics are better at telling a story than a completely minimal, functional, and usable design. Unless the story you’re telling is one of minimal, functional, and usable, of course.

Story communicates. Story connects. Story builds empathy. Story helps turn prospects into customers and customers into loyal customers. Usability can be part of the story, but it won’t be the whole story. Usability will enhance stories by improving the experience. Aesthetics, though, can contribute more to your visual story than anything else.

Unique Personality

In addition to a unique style to your work, you can differentiate yourself through your unique personality or the personality of your business.

Some people will choose you even if there are better options. They’ll choose you because they like you and trust you. They’ll want to support you because they see you both as connected to a larger cause you both support.

You have to do something more than a token donation or announcing how green your company us. Speak your mind. Don’t water things down. Sure, you’ll lose a part of the market that doesn’t agree with your views, but you’ll become that much more appealing to another part of the market that does agree. Make it difficult to duplicate your personal connection and relationship with your client.

I have no idea if Gary Vaynerchuk knows anything about wine, but I do know his name and I know it’s associated in part with wine. I would certainly click a link with his name in search results if I’m looking for information about wine.

Stand for something. Instead of trying to please everyone, please those most aligned with your views and who you are as a person.

This isn’t about being loud for the sake of being loud, though I suppose that does fit and can work. It’s about being you and not hiding who you are. Connect with potential clients because of who you are. You can connect and stand out for something related to the work you do, but it doesn’t have to be related. It just has to be away to stand our and differentiate yourself from your competition.

Think differentiation. Think uniqueness. Think scarcity.

Closing Thoughts

Once again, I’ll repeat what I’ve been saying for a few weeks now. I think the market I serve and probably the one many of you serve is changing. The part that hires us is shrinking.

A smiling curve helps describe and explain what’s going on and it points the way toward adding value to our businesses. That’s something you should want to do regardless of whether you agree with my assessment of the market.

Both scale and scarcity (opposite sides of the same coin) can add value to your business and help you make more money, shrinking market or not.

Adding scarcity is mostly about getting better and building a brand for yourself and your business. You can build a brand by getting better through learning and practice and improving your skills.

You can go niche and specialize to become an expert on a smaller subject with less competition. Become an expert on a smaller subject instead of remaining intermediate to a wider audience

You can develop a unique and recognizable style to your work and you can also show a unique side to your personality. The key is becoming recognizable and doing things that others find difficult to duplicate.

Next week I have one last post/podcast in this series. I’ll talk about my personal choices in moving left and right along the smiling curve and I’ll share some of the reasons why I’m choosing to transition my business, the specific way I am.

Download a free sample from my book Design Fundamentals.

The post Adding Value To Your Freelance Business Through Scarcity appeared first on Vanseo Design.

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

Tuesday 27 January 2015

SVG Basics—Creating Paths With Line Commands - Vanseo Design

SVG Basics—Creating Paths With Line Commands - Vanseo Design

SVG Basics—Creating Paths With Line Commands

Posted: 26 Jan 2015 05:30 AM PST

A couple of weeks ago when talking about basic SVG shapes, I mentioned paths as a more general way to create any shape. Paths are more powerful and flexible than the basic shapes and they can be used to create any or all of them.

With paths you can create lines and curves and connect both to form shapes. You can combine both to create complex paths and subpaths. Paths can be filled and stroked or used to clip other elements. They can do all three at once and more.

If you export an SVG image from a graphics editor, it likely exports all your shapes and lines as paths. If you work with SVG, you’re going to come across paths a lot so it makes sense to learn a little something about them.

Today I’ll talk about the path element and the different line commands you can can use. Next week I’ll continue and talk about curve commands.

The path Element

You create a path with the aptly named path element. Inside the path element you set a path definition through a series of commands and coordinates.

1  2  3  
<svg>    <path d="path data" />  </svg>

The path definition (d) is filled with different commands to move to a new point and draw different lines and curves. The majority of this post and the next will cover these commands.

The path element can also take a pathLength attribute. The attribute takes a non-negative number for a value and it’s used to override the length of the path as calculated by browsers.

1  2  3  
<svg>    <path d="path data" pathLength="non-negative-number" />  </svg>

I don’t want to talk too much about pathLength now. It doesn’t entirely override the calculated path, but is used to scale it to a degree. This can affect calculations that are used to place text on a path or to have an animation follow a path. It could also affect different stroke operations.

Let’s get to the different path data commands. We’ll start with the simpler line commands and move on to the curve commands next week.

Line Commands

There are five different line commands you can use to create a path.

  • moveto (M or m)—moves to a new location
  • lineto (L or l)—draws a line from the current coordinate to a new coordinate
  • horizontal lineto (H or h)—draws a line to a new horizontal coordinate
  • vertical lineto (V or v)—draws a line to a new vertical coordinate
  • closepath (Z or z)—closes the current path

You won’t spell out the command, but rather use the letter for the command. Upper case letters signal the coordinates as absolute values and lower case letters signal the coordinates as relative values.

The moveto and lineto Commands

Here’s a simple example using both moveto and lineto. Note, I’ll be using inline SVG for the code in this post.

1  2  3  
<svg width="600" height="400">    <path d="M 50 50 l 0 300 l 200 0 l 0 -300 l -200 0" fill="none" stroke="#000" stroke-width="2px" />  </svg>

First let’s cover what you should know if you’ve read the previous posts in this series. I created an svg element and gave it a height and width. I also set the fill to none and added a stroke to the path. This way we’ll see the actual path lines instead of a filled in shape.

The path data starts by moving to a point with coordinates x=50 and y=50 (M 50 50). Every path needs to start with a moveto.

Next is a lineto command, here set as a lowercase letter l (l 0 300). The command says to draw a line from the current point (50 50) to the relative coordinates 0 300. In other words the line will be drawn 0px horizontally and 300px vertically.

Continuing is another lineto command (l 200 0), which draws a 200px horizontal line followed by two more line commands (l 0 –300) and (l –200 0). These commands draw two more lines, one vertical and one horizontal in the opposite direction to the initial horizontal and vertical lines.

Here’s what the entire path looks like

The path first moved to a starting point and then it drew a line down, one to the right, one back up, and one to the left which ends at the starting point.

You’ll notice I didn’t specify units. The default is px and I’ll talk more about this when talking about the SVG coordinate system. Also note the path data isn’t a comma separated list of commands. The commands just follow one after another. More on that in a bit.

The closepath Command

To create the rectangle outline in the previous example we used only the moveto and lineto commands. Let’s mix in the other three commands.

1  2  3  
<svg width="600" height="400">    <path d="M 50 50 l 0 300 l 200 0 l 0 -300 Z" fill="none" stroke="#000" stroke-width="2px" />  </svg>

The code here is the same as the first example, with one exception. I changed the last lineto command (l) with a closepath command (Z). Since no coordinates are specified Z and z do the same thing.

As you can see it looks exactly the same as the previous example, however closepath saves us from having to specify the last set of coordinates.

The Horizontal and Vertical lineto Commands

Replacing the last lineto with a closepath makes things a little cleaner than the initial example, but we can do better.

1  2  3  
<svg width="600" height="400">    <path d="M 50 50 v 300 h 200 v -300 Z" fill="none" stroke="#000" stroke-width="2px" />  </svg>

Here I replaced the middle three lineto commands with vertical lineto (v) and horizontal lineto (h) commands. These commands only need one of the two coordinates as the command itself takes care of the other, which will be 0.

It’s still a lot of points, but it’s cleaner than the original. Granted you won’t always be drawing horizontal or vertical lines, but when you do, you probably want these two commands instead of the general lineto.

Styling, Whitespace, and Commas

You have some measure of control in your use of whitespace. You can remove and add whitespace to make each command and the entire path data easier to read.

1  2  3  
<svg width="600" height="400">    <path d="M50 50  v300  h200  v-300  Z" fill="none" stroke="#000" stroke-width="2px" />  </svg>

Here I closed the space between the command and its first value. I also added an extra space after the last coordinate and before the start of the next command.

While commas aren’t necessary, you can use them to separate the x and y coordinates after any command. You don’t use them between the commands, but you can use them between the coordinates.

1  2  3  
<svg width="600" height="400">    <path d="M50,50  v300  h200  v-300  Z" fill="none" stroke="#000" stroke-width="2px" />  </svg>

I added a comma between the x and y values for the starting point of the path. I could have kept the space between them, but thought it easier to read without the space between the coordinates. You have some flexibility.

You can also skip the command if it’s the same as the previous command. Here’s the path using lineto commands from the first example. Where one lineto follows another I removed the actual command. Hopefully the spacing and commas make it easy to find the different sets of coordinates.

1  2  3  
<svg width="600" height="400">    <path d="M50,50  l 0,300  200,0  0,-300  Z" fill="none" stroke="#000" stroke-width="2px" />  </svg>

This works, but I find it more confusing to read. I prefer seeing the commands as they help separate one coordinate from the next, but again I’ll leave it to you to decide what’s easiest for you to read.

You can use even more whitespace and place each path command on its own line.

1  2  3  4  5  6  7  8  
<svg width="600" height="400">    <path d="M50 50             v300             h200             v-300             Z"     fill="none" stroke="#000" stroke-width="2px" />  </svg>

This is probably the easiest to read, but obviously takes up the most space. Also keep in mind one solution to make inline SVG work in WordPress is to have everything on a single line.

Closing Thoughts

Hopefully you can already see how much more flexible paths are than the simple shapes we saw previously. One last example.

1  2  3  4  5  6  7  
<svg width="600" height="400">    <path d="M100,100             v200             M400 50             h-200"     fill="none" stroke="#000" stroke-width="2px" />  </svg>

With a single path definition I created two seemingly independent lines.

It’s that easy to create two visibly disconnected lines with a single command and we haven’t even talked about curves yet, let alone how text can follow a path or how animations can be made to follow paths.

Next week I’ll continue and talk about the different curve commands you can use. I’ll get to text and animation later in the year.

Download a free sample from my book Design Fundamentals.

The post SVG Basics—Creating Paths With Line Commands appeared first on Vanseo Design.

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

Friday 23 January 2015

Adding Value To Your Freelance Business Through Scale - Vanseo Design

Adding Value To Your Freelance Business Through Scale - Vanseo Design

Adding Value To Your Freelance Business Through Scale

Posted: 22 Jan 2015 05:30 AM PST

Does your business scale? Can you make more money without having to spend more time working? If not, can you find a way to make your business scale?


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

The last couple of weeks I’ve talked about what I think is changing and shrinking market for my services and possibly yours. I looked at the smiling curve as a way to explain what’s going on and more important as a guide for how we can add value to our businesses.

Even if you don’t believe in a shrinking market, it still makes sense to add value to your business. At one end (right on the smiling curve) you add value through scale. At the other end (left on the smiling curve) you add value through differentiation, uniqueness, and scarcity.

Today I want to talk about the right side of the smiling curve. I’ll talk about how to add scale to your business. Next week we’ll look at the other side of the curve and adding scarcity to add value.

The Difficulty in Scaling Services

To grow a service based freelance business there are a few things you can do.

  • Work more hours
  • Raise your rates/prices
  • Cut your costs

In a service based business your revenue is directly tied to how many hours you can work. If you want to bring in more money you can work more hours. There are only so many hours in a day, week, month, or year in which you can realistically work, though. Your billable hours will be even less.

Another way to increase revenue is to raise your rates. Charge more per project and you’ll make more money. Again, there’s a limit on how much you can charge. While there are always exceptions, you’ll find your market will only bear a certain maximum price. Once you’re charging that maximum rate, it’s hard to increase it any further without finding a different market to serve.

You can also reduce your costs. Most of the cost involved in offering web design services comes from your time. Sure, there are some expenses per project and some for your business as a whole, but the majority is still your time. There are things you can do to work smarter and more efficiently, but again you’re going to bump up against the limits pretty soon.

Adding Scale to Services

To scale your hours you really need to work with other people to add their hours to yours. Together you have more combined hours than you have on your own. Ideally everyone’s skills would complement each other so the whole company is more than the sum of the people within it.

You still run into same problem, though. There are limits on everyone’s time. The scale is coming from having more hours from which to draw. You can help through specialization and increasing your productivity.

Better is to be the owner and either hire others to work for you or outsource some of the work. You keep some of the value of the time of others in exchange for providing steady work and a paycheck. Your scale comes from taking a piece of the productive power of other people. It can be a win-win exchange as you offer a paycheck in exchange for some of that productive power.

Price isn’t really something you scale. It’ll come into play on the other end of the curve and it’s something I’ll talk more about next week.

You can add some scale through cost cutting to a degree by working as efficiently as you’re able. You can work more modularly and reuse as much as possible. Take advantage of the existing scale in a theme or plugin for example or set up patterns you can reuse across sites.

You can cut costs and add scale through automation. You can automate as much as you want, but that will only help one person so much. A larger organization can likely find more ways to automate and have that automation touch more people and a larger part of the company.

Adding Scale to Products

Unless you want to hire people or outsource, a better way to scale your business is to transition from selling services to selling products. Products scale better because revenue isn’t directly tied to the hours you can work.

With services you have to put in the time on the next site to make more money. With products your time becomes less relevant. Time goes into making the first product (first few more likely). That time is probably similar to the time it takes for a custom job. Subsequent products take much less time to have something for sale.

The creation of more products beyond the first few can be automated. Your goal is to reduce this time so it’s effectively 0. There will always be some cost associated with each new product, but you can effectively approach 0 time spent.

You likely have to charge less per product than you would charge for providing similar custom services. A theme typically costs less money than a custom site. Of course, you can only sell the custom site once. The theme you can sell as many times as you can.

Your goal is to sell more products than what you could have earned doing custom work. You become less concerned with absolute prices and more concerned with things like margins.

What Kind of Products

There’s really no end to the kinds of products you can create, but if you’re starting from a place of being a freelance web designer or developer there are some products already related to what you do that come to mind.

  1. Digital products
  2. Informational products
  3. Piggyback on someone else’s scale

Digital Products

By digital products I mean something you code and sell like a theme or template. The more developer among us might build plugins, extensions, and add ons. You might start with your content management system of choice and figure out what you can build on top of it that people will buy.

You are piggybacking to some degree on your CMS of choice so you want to pick a CMS you feel confident will be around awhile and be prepared to move to another content management system if need be.

Instead of starting with the content management system, you might also think first of specific industries and build turnkey solutions for them.

For example a real estate site has specific needs that are different from other industries. As another example I have several clients who are photographers. Their sites naturally need a lot of functionality around displaying images.

The idea is to find out what a specific industry needs in a site and then build all those things into something you can sell to that industry.

Perhaps you should aim higher and build the next CMS. There are plenty beyond the usual suspects. Perch and Ghost come to mind.

Another approach to digital products might be software as a service. Think Freshbooks and Harvest offering time tracking and invoicing to small businesses. The service based approach would be to hire an accountant or bookkeeper.

You can turn themes and plugins into a SaaS business by becoming a hosting company. The themes and plugins serve as a value add to attract people to your hosting business.

You can likely sell service around your products too. If someone is having trouble with a theme or plugin, their first stop for a fix is probably the developer. You might charge for services per project or you might charge a monthly or annual subscription for direct support or access to support forums. You can even add some scale by hiring others to handle the services.

Informational Products

True, these are digital too, but I needed something to distinguish them from each other. With information products I’m talking about books, audio, and video. I’m talking about content creation and the more formats the better.

Online courses through a membership site is another option. Your focus should be on teaching. Some already do this, but probably aim the teaching at fellow designers and developers. I’m thinking it’s time to expand that to site owners, non-designers and non-developers.

Any training you offer could reach beyond design and development too. If the focus is on our “former” clients we can offer training and information products about any aspect of running their website or business. Why stop at design and development? Toss marketing and content creation into the mix.

Think Lynda.com or Treehouse as a model for online courses. A list Apart created A Book Apart to sell books. Five Simple Steps is another book selling business originally started by a web designer.

The idea, as with digital products, is to build once and sell many times.

Piggybacking on Someone Else’s Scale

I think you’re better off being the one to create products and add scale, but you can also take advantage of someone else’s scale. You already do this if you work with anything open source.

You may not want to create digital or informational products, but understand someone else will. If enough people are willing to pay for something then someone will create that something and sell it to them. This has happened for centuries, is happening now, and will continue to happen in the future.

If you don’t want to create the products, you might want to get better at identifying which products will have staying power and work with them. Offer services around someone else’s scale.

For example if more people are signing up for Squarespace instead of hiring you, then learn how to work with Squarespace and capture the part of that market that doesn’t want to get its hands dirty working on their site.

Figure out ways to manage Squarespace sites for clients. It will no doubt lead to less money per client, but it should be easier and quicker work once you learn the system. And if I’m right about the way the market is changing, there will be more clients for these kind of services.

You can also create information products to help people use the systems you didn’t create. If people are signing up for Squarespace, write the guide to setting up a site on Squarespace. Maybe Squarespace doesn’t need such a guide, but there will be a need for information around these products and services in general.

Keep in mind it’s someone else’s scale you’re benefitting from and that benefit can be removed at any time without your consent. You might sooner look to an open source project to build on or offer informational products about. You could fork the project if it’s direction doesn’t align with your plans for your business.

I think you’ll do better to create your own products though you can add value through someone else’s scale.

Change Businesses

One last thought is to put your design and development skills to use in a business in a different industry. Why should you always be working on someone else’s website? Utilize your skills to service your own business in whatever industry interests you.

Design and development work done right is a significant cost and a significant opportunity cost if you don’t do it right.

You know how to design and develop effective sites so use those skills to run another business that scales more easily than offering freelance services.

You’ve Already Started

Some of what I’m suggesting is less difficult than it might sound. The world of web design has been getting more and more modular the last few years. Think Brad Frost and Atomic Design.

As an industry we’re building modular and reusable systems, which is a way to add scale through cost cutting.

Work on a site and pull out an abstraction for later reuse. For example the navigation you design might look and work differently on different sites, but it probably starts from the same ordered or unordered list. Pull the repetition out and begin your own pattern library.

If you’re following best practices for the industry you should already be doing this to some degree. The more that can be abstracted and modularized, the easier it becomes to combine everything back together as some kind of products. It’s where I think this inevitably goes.

Closing Thoughts

I’ve been saying for a few weeks now that I think the market for my services and probably yours is changing. Unfortunately that change is a shrinking market wanting to pay our price for our services.

A smiling curve can help explain some of what’s going on and it points the way to adding value in our business. On the right side of the curve we add value by building more scale into our businesses. On the left we add scarcity.

If you choose to add value through scale you can create digital products like themes and plugins or you can create informational products like books and membership sites.

If you prefer to continue with services, you could join forces with other freelancers and form a larger organization. Where the individual finds difficulty, the organization can more easily scale.

You can put your skills to use running a business in a different industry that scales or has a growing market or you can piggyback on the scale someone else has introduced into their business or industry.

The main thing is to break free from the direct relationship between revenue and money. Anything that reduces the time it takes to build one more product adds scale. Think modular. Think reusable. Think products before services.

Next week I’ll take a look at the opposite end of the smiling curve. I’ll talk about adding value by differentiating yourself and your business, by being more unique, and by adding scarcity to what you offer.

Download a free sample from my book Design Fundamentals.

The post Adding Value To Your Freelance Business Through Scale appeared first on Vanseo Design.

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

Tuesday 20 January 2015

SVG Basics—Fills And Strokes - Vanseo Design

SVG Basics—Fills And Strokes - Vanseo Design

SVG Basics—Fills And Strokes

Posted: 19 Jan 2015 05:30 AM PST

The last couple of weeks I’ve been walking through some of the basics of scalable vector graphics. First I showed how to include SVG in HTML and then I showed how to create the basic shapes SVG provides.

In both posts I used the fill and stroke properties in order to see the what we were creating. Today I want to talk in more detail about fills and strokes and the properties associated with each.

Fill Properties

As you probably expect, the fill property takes a color and fills the interior of the shape (or line) you created with that color. Here it is added to a rectangle and circle

1  2  
<rect class="rectangle" width="100%" height="100%" fill="red" />  <circle class="circle" cx="150" cy="150" r="100" fill="#039" />

You could also set the values of fill in your CSS. Below I set the fill on different classes, but you could set it on the SVG property directly too if you prefer.

1  2  
.rectangle {fill: red;}  .circle {fill: #039;}

By default fill will be black or #000000 so if you don’t want a shape to be filled with color you need to explicitly set it to none.

1  
<rect class="rectangle" width="100%" height="100%" fill="none" />

What’s considered inside the shape (or line) depends on the fill-rule property which can have the values nonzero or evenodd.

1  2  
fill-rule="nonzero"  fill-rule="evenodd"

I’m not even going to pretend I completely follow how the two algorithms work. Here are the definitions from the spec. Below each is an example image of each algorithm, also from the spec.

nonzero—This rule determines the “insideness” of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.

title

evenodd—This rule determines the “insideness” of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

title

What I find confusing is the last example in each of the SVGs. I’m not following why they look the same, when the second examples look different. If anyone knows, I’d appreciate knowing too.

You can also set the fill-opacity of any fill.

1  
fill-opacity="0.5"

It takes a value between 0 (transparent) and 1 (opaque) and works just like the CSS opacity property and I’m guessing no further explanation is necessary.

Stroke Properties

You use fill properties to add color inside the element. Stroke properties add color around the element. They define the outline or contour of an element.

There are a few more stroke properties than fill properties, and quite honestly I find them a bit more interesting. If you read the previous posts in this series, you will have seen two already, stroke and stroke-width. The first takes a color as a value and the second takes a unit of measurement as a value.

1  2  3  4  5  6  
stroke="blue"  stroke="#347559    stroke-width="3px"  stroke-width="1em"  stroke-width="2%"

When a percentage is used for the stroke-width value, it’s a percentage of the current viewport.

1  2  3  
<svg width="300px" height="150px">    <ellipse cx="150" cy="75" rx="100" ry="75" fill="none" stroke="blue" stroke-width="3px" />  </svg>

There’s also a stroke-opacity property, which I again hope is self-explanatory.

1  
stroke-opacity="0.25"

It doesn’t end there. The stroke-linecap property gives you some control over the shape at the ends of lines. Your choices are butt, square, and round. You can see an example of each in the image below.

title

The stroke-linejoin property is similar but controls the joints between line segments. You might set it when working with a polyline. It also takes three values, miter, round, and bevel, which you can see in the image below.

title

If you set miter as the linejoin value and it the lines meet at a sharp angle, it’s possible for the miter to extend beyond the thickness of the stroke.

The stroke-miterlimit property sets a limit on the ratio between miter-length and stroke-width. It expects a number greater than or equal to 1. When the limit is exceeded the stroke is converted to a bevel.

Dashed lines are possible with the stroke-dasharray property. It allows you to set both the length of each dash and the space between dashes.

1  2  3  4  5  6  
<svg width="600px" height="300px">    <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3" stroke-dasharray="10 2" />    <line x1="0" y1="40" x2="600" y2="40" stroke="#000" stroke-width="3" stroke-dasharray="5 10" />    <line x1="0" y1="60" x2="600" y2="60" stroke="#000" stroke-width="3" stroke-dasharray="1 1" />    <line x1="0" y1="80" x2="600" y2="80" stroke="#000" stroke-width="3" stroke-dasharray="10" />  </svg>

The first value is the length of the dash and the second value is the space between each dash. If you only supply a single value (the last example above), it will be used twice resulting in equal dash length and space between dashes.

The stroke-dasharray can do more. Even though I’ve shown it taking a single set of values, it can accept a comma separated list of value pairs.

1  2  3  
<svg width="600px" height="60px">      <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3" stroke-dasharray="10 4, 5 10, 1 1, 10 30" />  </svg>

The dash will follow the pattern set by the different pairs of line length and space and then it will repeat until it runs out room to display. In the example above, I set the last space to 30 to make it easier to see the pattern repeating.

One last property is stroke-dashoffset, which allows you set the distance into the dash pattern to start the dash. Acceptable values are any unit of measurement and again if a percent is used, it’s a percent of the viewport.

1  2  3  
<svg width="600px" height="60px">      <line x1="0" y1="20" x2="600" y2="20" stroke="#000" stroke-width="3" stroke-dasharray="10 4, 5 10, 1 1, 10 30" stroke-dashoffset="10" />  </svg>

Read the previous paragraph again. The stroke-dashoffset property works opposite to my initial expectation. My instinct was to think setting the offset would delay the start of the pattern by the amount set in the offset. What happens is the reverse. The offset is how far into the pattern to start it.

Here’s an example of the same pattern with and without an offset applied. Hopefully the visually makes it clear what’s going on.

Shapes and Lines

At the start of this post I mentioned you could fill both a shape and a line, which may have sounded a little strange. How would you fill a line, after all? It depends on the line.

Other than the possibly confusing nonzero and evenodd algorithms, you probably don’t need my help to understand what gets filled and what gets stroked on a basic shape like a rectangle or circle. The stroke is the shape’s outline and the fill is everything inside that outline.

What about lines, though? Most lines won’t take any fill. What you see is the line’s stroke. There’s nothing inside to fill. However, when the line is a polyline if can be filled. The polyline be treated as though it were a polygon with the exact same points for each line segment.

For example both the polyline and polygon below will look exactly the same.

1  2  3  4  5  6  7  
<svg width="300px" height="200px">    <polyline points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="red" />  </svg>    <svg width="300px" height="200px">    <polygon points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="red" />  </svg>

If you add a stroke, however, you can see the polygon completes the shape with a line directly from end point to start point, where the polyline doesn’t show the line. The fills are the same though.

1  2  3  4  5  6  
<svg width="300px" height="200px">    <polyline points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="red" stroke="#000" stroke-width="5" />  </svg>  <svg width="300px" height="200px">    <polygon points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150" fill="red" stroke="#000" stroke-width="5" />  </svg>

SVG Properties and CSS

For most of the examples in this series. I’ve been setting SVG properties as attributes on different SVG elements. Earlier in this post I showed how you could set values on fill in your CSS file. You can set more SVG properties in CSS. Not all, but you can set both fills and strokes in CSS.

You can add the CSS inline as below.

1  2  3  
<svg width="300px" height="300px">      <rect x="20" y="20" width="250px" height="125px" style="fill: teal; stroke: 5px;" />  </svg>

You can also set styles directly in your CSS file.

1  2  3  
<svg width="300px" height="300px">    <rect class="example" x="20" y="20" width="250px" height="125px" />  </svg>
 
1  2  3  4  5  
.example {    fill: teal;    stroke: red;    stroke-width: 5px  }

Just remember to set fill as opposed to background color and set stroke and stroke-width, instead of border-color and border-width.

Plenty of other SVG properties can be written as CSS properties instead of having to add them as attributes on an SVG element. The W3C maintains a table that lists all the different SVG properties that can be styled in CSS.

Closing Thoughts

As I hope you can see, adding fills and strokes to basic shapes and lines is rather easy. If you’ve worked with background-colors and borders in CSS, much of what’s here probably seemed like review.

I find the fill-rule algorithms a bit confusing, but it will always be easy enough to test the two possibilities and see which one gives you what you want.

The opacity of both fill and stroke can be set and stroke also provides properties for the shape of the line at the end points or where line segments join. You can also turn solid strokes into dashed strokes.

You now have enough information to create simple SVGs. You know how to create, fill, and stroke simple shapes like rectangles and circles or build up more complex shapes with polygons. You can do similar with simple and complex lines.

Still it’s all rather basic. There’s a lot more you can do with SVG than fill circles and rectangles with with color. For example, instead of a solid fill you can fill shapes with gradients or patterns made up of other SVG elements.

Before we get there though, I want to look at something I mentioned when talking about shapes. I mentioned paths as another way to create them. The next couple of weeks I’ll look at how to create lines, curves, and shapes, using paths.

Download a free sample from my book Design Fundamentals.

The post SVG Basics—Fills And Strokes appeared first on Vanseo Design.

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

Friday 16 January 2015

The Lesson Of The Smiling Curve—How To Add Value To Your Freelance Design Business - Vanseo Design

The Lesson Of The Smiling Curve—How To Add Value To Your Freelance Design Business - Vanseo Design

The Lesson Of The Smiling Curve—How To Add Value To Your Freelance Design Business

Posted: 15 Jan 2015 05:30 AM PST

How can you add more value to your business? What value can you add to hold onto existing clients and attract new ones? In the face of a potentially shrinking market for your services what can you do to maintain and grow your business?


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

Last week I talked about the market for freelance web design and development services and how I think the market is shrinking. It’s changing in a way that requires us to change with it.

This is a topic I talked about on and off in 2014 and it’s a topic I’ve thought about for several years. I wasn’t sure if my observations made sense or rather if the conclusions I was drawing from them made sense.

Then I came across an article by Ben Thompson of Stretechery about the smiling curve. The term was new to me and I’ll fill you in if it’s new to you as well. I’m not sure if my observations have anything to do with a smiling curve as Ben discusses it, but it seems to fit with what I think is happening.

The Smiling Curve

A smiling curve is a graph measuring value (y-axis) against the value chain (x-axis) of an industry. It’s mainly been used to talk about the tech industry. The following image is an example.

The Smiling Curve

The idea is that the value in the market resides at the ends and not in the middle of the curve. The high end points and low middleof the curve approximates a smiling face, hence the name.

Initially the middle added value, but technology has made it possible for the two ends to connect directly removing the need for the middle. The value drops out of the middle and moves both right and left.

I think freelancers and small agencies are sitting in the middle and we need to move left or right along the curve to add more value to our business.

Today’s Publishing Industry

Ben’s post extended talk of the smiling curve to today’s publishing industry. In the sagging middle are publishers who historically delivered content to consumers. At the high end on the right sit companies like Google, Facebook, and Twitter who aggregate content and make it easier for people to discover. The high end on the left represents the content creators and the more focused publishers. Their value resides in how difficult it is to duplicate what they do.

In the case of the publishing industry, the internet makes distribution easy. This was the domain of publishers and a necessity for the two ends to reach each other, but technology can now do what the publisher once did.

For example I published this post and recording on my own. I didn’t need to go through a publisher in order for you to find either. In 2013 I self-published a book. It never went through a publisher. I distribute it myself here on the site. That would have been near impossible even 10 years ago.

Henry Ford and the Model-T

In a follow up post, Ben offered Henry Ford as an example of another smiling curve. It helped me better understand how this all applies to us so I’ll share it here.

Cars existed before Ford, but they were custom built and expensive. When they broke down they were difficult to repair and often required an expert. That doesn’t sound all that different from the custom website landscape today.

Henry Ford didn’t invent the automobile. He introduced scale to the process of manufacturing automibles. He built one car, the Model-T. He built it with interchangeable parts and offered it in exactly one color.

The scale allowed Ford to sell the Model-T at a much lower price than the custom cars the competition was building. Ford was able to continue to drive the price down in the following years.

He opened the market to new customers causing it to grow and he pulled customers from the segment of the market that previously bought custom cars.

Again I’m not sure if what I’m observing about our industry fits into a smiling curve, but it sure feels like it does. It feels like our part of the market is shrinking even as the overall market is increasing. It feels like our market is shrinking as clients move either left or right along the curve.

Where Ford introduced scale and a lower price, off the shelf site solutions are working at scale and lowering prices for our clients. You can generate a lot more websites from an off the shelf theme than you can from a custom design.

How Do We Add Value to Our Business

We have to move right or left if we want to retain what value we have and add new value. I don’t expect either of us will be out of business tomorrow if we change nothing, but a few years down the line we easily could.

I think we need to do more than make a few tweaks to how we do things or add an extra service. I think it means making some significant changes to our business and revenue models. The changes will take time so we might as well start now.

Adding Value on the Right

Adding value on the right means finding a way to scale your business. Some of the ways you can add value through scale include:

  • Creating DIY tools like themes and plugins. This might also mean creating content management systems.
  • Creating informational products to help do-it-yourselfers. These could be books, audio, or video courses. It could mean information behind a paywall. The focus of all is on teaching.
  • Becoming an expert with services like Squarespace or Wix. This isn’t so much adding scale to your business as it is taking advantage of scale others have built.

If you currently work with WordPress, Drupal, Expression engine, or some other CMS, you’re already adding some of this value. It might take longer for the changes in the market to affect you, but they likely still will and I’d sooner look for a way to add scale directly to your business.

Adding Value on the Left

Adding value on the left means differentiating yourself from other designers, developers, and solutions. It means doing something that can’t be easily duplicated or scaled. You might:

  • Join an agency or form one with several freelancers you know. Work with others who complement your skills to make the whole of the agency greater than the sum of the individual people working in it.
  • Add more specialized and focused services. Instead of general web design and development, be an expert in conversion optimization or build sites for specific industries instead of all of them.
  • Improve your skills as a designer and developer far beyond where they are now.
  • Develop a unique and recognizable style. Ideally clients will ask for you by name or at least know they want the person who did your work.

Be a more unique you and a more unique and better designer or developer. The most talented and skilled will be able to remain freelancers if they want or they’ll be able to pick and choose from the best employment offers.

Improve your skills with visual storytelling. Improve the aesthetic quality of your work. Develop an unmistakable style.

Closing Thoughts

I think the part of the web design and development market served by freelancers is shrinking. Off the shelf solutions are becoming good enough and pulling clients away from freelancers and small agencies. In house teams are doing the same from the opposite end.

It’s a sobering thought. It means no matter how well your business is doing today, you’ll have less clients in the not too distant future if you continue exactly as you are. You may be doing well enough now to brush this off as nonsense, but I urge you not to, at least not without giving it some real thought and observing how others in the industry are doing.

A smiling curve can help explain what’s going on and even if you don’t agree that a smiling curve can be applied directly to our industry, you can still agree with the suggestion it offers to add more value to your business.

That means moving left or right along the smiling curve. To the right you add value by adding scale to your business and to the left you do the opposite by differentiating your business in a way that’s makes it difficult to scale.

Despite the topic of a shrinking market, I hope I’m leaving you with more positive thoughts this week than I might have last week. At least I offered some ideas for what we can do.

Over next few weeks, I want to dig deeper into the solutions and offer more thoughts about how we can successfully move to the end points of the curve and continue to have a successful businesses down the line.

Download a free sample from my book Design Fundamentals.

The post The Lesson Of The Smiling Curve—How To Add Value To Your Freelance Design Business appeared first on Vanseo Design.

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

Subscribe to: Posts (Atom)