Wordpress Leaks

Prior to selling my web agency, HotPress Web, last year and starting uGurus, a new venture to help web professionals become more profitable, I pitched a lot of website projects.

My proposal folder has over 950 bids in it. Of course I didn’t win all of these, but I did close several million dollars in website deals over my tenure. Our typical project was in the ballpark of $20,000. When I started out, I had a hard time winning $3,000 deals.

Until I learned how to sell and build value, I wasn’t getting paid enough. Sometimes it would take everything I could muster to win a project for $1,200. And I would end up promising $3,000 in services.

I was also spending a lot of time pitching business that never panned out. I had a hard time winning 1 in 10 bids. The time suck was draining away my hours to be productive outside of pitching business–like actually getting project work done.

I was frustrated. I began looking for answers.

The Status Quo

The typical process for me looked something like this:

1. A prospect calls me asking for website services
2. I ask what they need–a little info about their business and what kind of features and functionality they are thinking about
3. I demo what we can do (show the technology of the hour: WordPress,Drupal, Shopify,BigCommerce, LightCMS, Business Catalyst, etc)
4. I deep dive into the different functionality they need on their project and show them how it can be done
5. I send a proposal
6. I start following up

Inevitably I would get into some follow up conversations with the prospective customer about my platform of choice. Every time we would spend countless hours deep diving into the technology.

“Can it do this? What about…?”

Eventually the customer would tell me that the other company bidding on the project is using a different technology, usually something similar to what I was pushing.

Then it would happen: the technology debate.

• Is WordPress better than Drupal?
• Is Opensource better than Software as a Service?
• Who has control over the site?
• How is it backed up?
• Where will it be hosted?
• etc etc etc

The worst part about it was that most of this software we were debating was free and open. There was no cost associated with the platform. We were spending all of this energy debating something that really had no bearing on my expertise and the value I brought to the table.

Before I knew it, the customer was choosing between software platforms and not which company was going to provide the best solution.

As WordPress became more popular, it got worse. The technology debate softened, but then all of my competition was offering the same technology solution that I was. Instead of debating about the technology, I lost differentiation.

An Epiphany

As I sold more projects, worked with more businesses, visited more offices, I started to see patterns. I began thinking about what I was really doing.

Was web design just that? Designing web pages and loading content? Was it programming and open source and PHP this and .NET that? Or were we doing something much bigger for our customers?

I always assumed that when a customer called me for a website, that the problem they are trying to solve was: getting a new website. But it’s not.

Businesses are looking to solve sales, marketing, logistics, customer service, or public relations problems. Websites just happen to be a great solution to problems in those areas (and many others).

Zap! (Lightning strike.)

When business owners call and ask about getting a website, they are trying to solve an issue that goes beyond their request for some design and HTML. They couldn’t actually care less what platform you use. No matter how great WordPress is.

The #1 Problem

So I changed my approach. At first it was subtle adjustments.

I started listening more intently. I asked a lot of questions to try and get to the root problem that the customer faced in their business.

Let me provide some examples:

Old Approach:

• Customer: “We need to be able to update the content on our website.”
• Me: “Content management is what WordPress is all about.”

• Outcome: Sell a WordPress solution and compete with everyone else doing the same thing.

New Approach:

• Customer: “We need to be able to update the content on our website.”
• Me: “What kind of content do you plan on updating?”

• Customer: “Our products change quarterly. We also want to blog.”
• Me: “Why do your products change quarterly? And who is responsible for blogging?”

• Customer: “That is when our catalog gets updated. We haven’t thought about who will blog, we just know we need one.”
• Me: “Is it necessary for anyone to be aware of your catalog being updated, or do you just need the content changed? And besides knowing you need a blog, what is the problem that needs solving?”

• Customer: “Yes! We’d love our customers to get an email for a promotion each time our catalog is updated. We’d like to attract more customers through our blog – you know, let people know what we are up to.”

• Etc.

• Outcome: Eventually create a compelling solution for a dynamic website project, content management training, ghostwriter with SEO strategy for blog content, email marketing template creation, email marketing training, and some custom content development.

Instead of taking my prospects “stated needs” as absolute, I question all of them. Eventually they will fess up to the real problem they are most likely trying to solve: getting more customers.

The more I practiced this technique, the higher priced my proposals got (and the more I won).

My clients ate it up. No one else I was competing against talked like this. Everyone sold to the technology.

The Challenge

So I started to give myself challenges. I would see how long I could go with a client without ever mentioning the technology we planned to build on.

At first it was a meeting. Then two. By the time I sold my agency, on most deals I would go through seven or eight interactions in the sales cycle without ever talking about a lick of technology.

If you are having a hard time building value for your website services, then I have a challenge for you: stop selling the technology.

See how long you can go without mentioning WordPress, Drupal, Joomla, Shopify, or whatever your technology poison is.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/Ldoc74kTgOY/

Startups have, for the last few years, focused heavily on having beautifully designed landing pages. When software design is a big part of the company, it’s only natural that there’s also an emphasis on great design for the marketing site. The landing pages for hardware products, on the other hand, often feel like they’re an after-thought, and it’s not as often that you find a marketing page for a real-world, physical product that’s had as much care and attention put into it’s design.

And of course, that’s a huge shame – as we all know, great design should be everywhere that a potential customer can find you – from the product itself, to it’s packaging and all the way to the marketing site and advertising. The bottom line is a well-designed landing page can increase the hype and sales for a physical product.

We’ve brought together some examples of thoughtfully designed landing pages for hardware products. Each one does an impressive job of showing off the product, with copy that fits well and helps build demand for the hardware.

Leap Motion

Leap Motion is a device that allows you to use gestures to interface with your computer, without having to touch the screen. The landing page does a great job of showing off the ‘Minority Report’ style interface, and they’ve used big, bold imagery to both show off the device in detail, and also show it in use.
The copy is also beautifully written, and is clear, concise and engaging. For example, “Do almost anything without touching anything” is a short, clever and instantly understandable heading to describe the product.

Google Glass

Google Glass is a complicated product to explain, as it can do so much, but the landing page to show it off is incredibly simple. As always, Google has chosen to use large, bold imagery and copy that perfectly explains the benefits (“answers without having to ask”) instead of using dry features and tech specs.

Fitbit Aria

Fitbit Aria is a wifi enabled scale that builds up a picture of your weight, body fat percentage and BMI over time.
The product itself is beautifully designed, and the designers have gone to great lengths to truly show it off on the landing page.
The hardware itself is shown from all angles, and they even show it in use. On top of that, they show screenshots of the software that the Aria uses, and do a great job of explaining the benefits of using the system.

Nest

The Nest thermostat takes a relatively unsexy product – the home thermostat – and reinvents it with beautiful design at it’s core.
It looks amazing, it’s clearly easy to use and the entire user experience has been considered from start to finish. The same is true for their marketing page, which needs to convince people of the benefits of switching to a Nest, and uses clever animation to show the hardware in action and gives a rough tour of your first 30 days using the product.

Pen Type-A

Pen Type-A is an ambitious product to take an everyday object – the pen – and obsessively engineer it to create something that will last several lifetimes. While the typography on their landing page could potentially do with some work, the page does a great job of showing off the design and ethos behind the product.

Square Register

Twitter founder Jack Dorsey’s latest startup Square has earned a lot of respect for disrupting the payment industry. While their main product is the software itself, they’ve had some experience shipping actual hardware azzs well in the form of the card reader – and they’ve recently started partnering with other firms to sell physical products that support companies who use Square, such as a cash draw and customer facing, secure iPad stand.
The landing page they’ve used follows the same theme as Square’s regular marketing pages for their software – the copy explains the benefits over the features (e.g. “Secure your iPad to your counter. Swivel the stand so customers can sign with their finger”), and they’ve used an easy-to-read font size along with plenty of white space to help separate out the content.

Little Printer

Little Printer is an innovative, if somewhat expensive, desktop printer that connects to the web, and automatically prints small custom newspapers for you throughout the day. It can sync with apps like Foursquare, Google Tasks, Instagram and The Guardian, amongst many others, to create a custom newspaper just for you.
The marketing page is stunningly designed, with descriptive sales copy perfectly matching the product imagery. The close up shots of the hardware itself are of incredibly high quality that show off the quirkiness of the product. As an aside, the chunky “Order Now” button looks extremely satisfying to press.

Tesla Model S

The Model S is Tesla’s take on a high performance electric car, and could be a crucial turning point in the success of the company. It’s important that they get all of the marketing materials right to help promote the car, and they’ve gone into a ton of detail with the landing page.
For a product like this, there will always be two main readers – people who want to read every word and dig into the tech specs, and people who want to skim read. Tesla’s landing page appeals to both, with copy that informs and pull out quotes and important tech specs (“416 Horsepower”, “4.2 seconds 0 to 60″) that are easy to read at a glance. The large, detailed photos help to showcase the car and work well to highlight the intricate details as well as the overall car design.

Apple

A focus on aesthetics runs through Apple and, as a result, their hardware landing pages have been beautifully designed for years. The iPhone 5 landing page, shown above, uses concise, clever copy paired with close-up imagery of the hardware. Further down the page, they explore individual features of the phone – and each of these is separated out with white space and, again, paired with an image to help illustrate that new feature. Everything on the page either draws you to examine the hardware in more detail, or to buy it either online or in-store. It’s a formula that Apple have perfected over the years, and they don’t just reserve it for their most publicised products.

The landing page for the Magic Mouse – part trackpad, part mouse – uses the same style, with snappy, sharp headings and expertly written descriptive copy, coupled with extremely high quality, beautiful imagery to help sell the hardware.

When it comes to designing a landing page that helps to showcase hardware, it’s hard to beat Apple – but adopting a similar, razor sharp focus on getting the details right can help to create excitement for your product and, ultimately, can lead to more sales.

You ight also like…

Websites That Inspired a Generation
Clean Web Design Agency Homepages
The Popular Rise of Magazine-Style Homepage News Layouts
Exploration of Single Page/One-Pager Navigation Systems

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/GFXk5PDD08A/

Last month Digital Surgeons launched the latest version of their responsive front-end framework, Gumby. Gumby 2 is a complete re-imagination of its version 1 counterpart. It adds a ton of new features and has been rewritten in Sass to allow for easier customization and maintainability. Many of it’s new features are incredibly helpful in streamlining the front-end development process.

The original version of Gumby was born out of the frustrations that it’s developers encountered while attempting to migrate to a responsive web design process. Gumby 2 is no different; it solves quite a few problems in very elegant ways that make building websites with it a joy. In addition to the obvious benefits of being built with Sass & Compass, Gumby 2 also has many other features such as using variables, and an extensive library of useful mixins. Gumby 2 was created to function as a pain reliever, an aspirin of sorts, for front-end developers.

Google WebFonts

Gumby 2 integrates with Google WebFonts which makes embedding custom fonts into your application prototypes and websites a cinch. You don’t have to worry about syntax changes, licensing, converting, hosting, serving, or even much in the way of the cross-browser compatibility of your custom fonts because Google handles all of that.

Using custom web fonts on your web projects is super easy; no more fiddling with Font Squirrel or any other form of font conversion — its as simple as dropping in a link, or using their customize tool to create a custom build. It’s an amazing time-saver.

Customizable UI Kit

Gumby 2 is a complete front-end framework, meaning that it includes a UI Kit with which you can use predefined classes to build out various UI elements rapidly. You can use the UI kit to build out buttons, forms, tabs, and navigation elements very quickly. This means that you can rapidly prototype your application using default UI elements. Gumby’s UI Kit offers a trendy, flat-designed UI as well as a gradated one.

As the developer, you can pick the style which best suits your application, which is something that other frameworks do not currently offer. Other things that you can do quickly with Gumby’s JavaScript library are things like fixed positions with offsets, skip links, drawers, and many other custom elements thanks to something called Toggles & Switches.

Symbol Fonts

One of the newest trends in web performance optimization is the “Symbol Font” or “Icon Font”. What symbol fonts allow you to do is implement all of your iconography in a lightweight, resolution independent (scalable) manner — embedding a font and instantiating them by referencing the private use area of Unicode they are mapped to. Gone are the days of giant sprite-sheets containing all of your application’s iconography. Symbol fonts are faster and more efficient.

Gumby 2 includes the open symbol font, Entypo by Daniel Bruce. Entypo has over 250 beautiful pictograms, suitable for any application. They’re all built into Gumby, which does all of the hard work for you, using any one of them is as simple as adding the appropriate class where you want the icon to appear.

Responsive Images

As more and more users flock to their mobile devices, and as more and more high density displays appear on those mobile devices, the crappier the web looks. Ok, I’m exaggerating there a bit, but if you tell me you’ve never visited a website on your phone and seen a pixelated or blurry image, you’re full of barnacles (yes, that was a Sponge-Bob reference. You’re welcome.).

Responsive frameworks make adjusting your layout to look pretty on mobile devices pretty easy, but what they don’t typically do is care about the rest of your site. The iconography. The photos. The rest is up to you. Gumby changes that by including a really intuitive way of loading retina versions of images on the fly, only when the device-pixel-ratio of the visiting device demands it. All it takes is adding the custom “retina” or standards compliant “data-retina” attribute to an image tag and Gumby’s Javascript will look for, and load the @2x version of that image as long as it lives at the same path as the non-retina version. Pretty cool, huh?

Toggles & Switches

Toggles and switches are so powerful that they really deserve their own blog article. Modern developers often find that most JavaScript that they are implementing or writing is redundant. Most of the time it is a matter of turning an element “on” and “off” when a user clicked or hovered over an element. Basically, most basic interfaces can be constructed by simply adding and removing “active” classes when a user performs an action. Toggles and Switches do just that. Don’t take my use of the word “basic” at face value either; once you grasp the concept, you can create some surprisingly complex interactive elements with them quite easily.

In my opinion, Toggles and Switches are the most valuable, and most compelling reason to use Gumby over any other framework. They are amazing. If you want to talk about streamlining the front-end development process, spend a week exploring the power of toggles and switches and get back to us .

Wrapping it all up

When it comes to choosing a front-end framework, or starting place for your design project, there’s so many things to consider that it can often be overwhelming. Unlike most front-end frameworks that cater to a more “dev” friendly workflow, Gumby was created to make the transition from design to code as effortless as possible. Gumby 2 is packed with features that are big time-savers for front-end developers. It has all of the makings of a great asset whose power becomes apparent once you unleash it into your front-end development workflow.

Grab a copy and start building on the Gumby Framework

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/RLBCdR2lr9A/

The period at the end of the last millenium was a heady mix of political change, economic optimism and for those working in the digital industries the phonemenon that was the dot.com boom and subsequent bust.

I was very lucky to land my first job as a web designer during this time – armed with a working if basic knowledge of the Adobe and Macromedia suites as well as HTML and CSS I became eminently employable due to the apparent skills shortage in the industry.

It was an exciting time as millions if not billions were being pumped into digital projects and the business pages were filled with stories of incubators and start-ups being valued at astronomical sums before they’d even launched or made a penny in profit.

As a young designer there was a real buzz about the possibilities the medium offered and in particular there was one technology which was wowing us all and sucking us into its proprietary web: FLASH.

Even at the time there were purists who talked about Macromedia’s eye catching product with disdain – the lack of open source, the need for a browser plugin, the non-standards compliant code required to embed it – were all complaints of a then small but notable minority.

For us as web designers who were struggling to get to grips with the disciplines of coding, Flash offered us a route to authoring digital experiences that weren’t restricted by the limitations of HTML 4, CSS and Javascript. This appeal meant we flew in the face of best practice usability principles as we sought to create opulent and indulgent websites that had our computer processors grinding but enabled us to realise the full extent of our digital creativity.

During this period there were some sites that would have us gathered round an iMac cooing with appreciation – websites that in what was still an emerging medium inspired a generation of digital designers to pursue a career in this exciting industry.

Hoover.com, Deep End (2000)

Deep End were the designer’s designers. Even though this was a burgeoning sector there were already digital practitioners who were commanding a huge amount of respect and Deep End were certainly one of the most revered within the digital design community.

The Hoover.com website launched in 2000 and was one of the best examples of the time of how strong, solid and elegant graphic design could be married with animation and interactivity to create an engaging and fullfilling digital experience.

We are after all talking about hoovers here, not necessarily the most naturally inspiring of products but in a sense this is what made Deep End’s achievements all the more remarkable. We were captivated by a website about vacuum cleaners!

The user experience was relatively simple, with a fast loading intro animation followed by a small selection of content areas to navigate. Each click eliciting a pleasing sound and animating in the desired content area.

With a circular theme, clever icons, strong typography combined with technical illustrations, the aesthetics had designers from all disciplines salivating.

The solid design principles of unity, harmony, balance, rhythm and emphasis were all translated to this digital experience – whether this was effective in selling Hoover products I don’t know, but it certainly had a profound effect on myself and my peers at the time.

Sadly a year later the London Deepend office was no longer – one of many casualties of the dot.com crash that ripped through the industry. However their impact on digital design has endured and it is no great surprise that key personnel went on to form the likes of Poke and Deconstruct, agencies that have continued to lead the way in digital design.

Requiem for a Dream, Hi-Res! (2000)

Hi-Res tore up the web design rule book and created truly immersive digital experiences that were closer to interactive art installations then they were to websites.

After establishing themselves as pioneers of this type of digital design they were asked to produce a website for Darren Aronofsky’s film Requiem for a Dream.

The result is an unsettling and quite extraordinary website which had myself and other members of my team locked in for 30 or 40 minutes exploring, compulsively clicking and even becoming part of the story that unfolds – playing the part of someone addicted to online alongside the other addicts in the story.

The seemingly broken pages and the fragmented and non-linear navigation reflected demise of the film’s chief protagonists.

I actually experienced the website long before I eventually saw the film with the web experience being such a satisfying entity in itself I didn’t feel compelled to see what it related to straight away.

The Flash itself was a technical as well as a visual triumph which responded in detail to user interactions – revealing elements and hiding others in order to build the narrative.

Creatively stunning, visually and sonically disturbing Hi-Res went on to create similarly immersive sites for Donnie Darko, Centre of the World and Jump for Tomorrow.

Unfortunately this didn’t start a trend of film marketing websites looking to explore themes and plotlines and instead most digital marketing in this sector still relies heavily on the dissemination of the trailer. However, Hi-Res’s legacy is felt and remembered amongst digital designers who are seeking to push boundaries in digital design and engage with users in a more cerebral way.

Praystation, Joshua Davis (2000)

Whether you had 5 or 50 minutes spare whilst at work or play there was one site that all designers would regularly look at in awe and amazement and that was Praystation.com.

If Hi-Res were pioneering immersive, experiential websites for the purposes of marketing – then Joshua Davis was pioneering immersive and purely experimental digital experiences for the purposes of, errr.. experimentation.

The Praystation website was a minimal affair of greys and key lines dividing the main information space with navigation via a calendar with the experiments organised by the date they were released.

The experiments themselves had varying degrees of technical and design wow factors and quite often would demonstrate technical brilliance in crunching the necessary numbers rather then something that had mass appeal on a visual level.

However, for the most part the experiments showed off the mathematical and creative flair of Davis’s art – shapes colliding, interacting – patterns evolving and morphing and soundscapes reacting to user interaction were all manifestations of his genius.

Davis was revered and respected not only for his inspiring and prolific output but also for his opensource attitude as source files for most experiments were available for download and therefor designers and developers could learn from his creations.

The dot.com crash and the decline in Flash as a force within web design may have meant that Joshua Davis’s experiments are less relevant today but his influence can still be felt as web designers and interaction engineers strive to build powerful interactive digital experiences.

Why look back?

A question you may be asking is why in this ever changing and evolving digital World am I (and some others) looking back when the rest of the industry is so ardently focussed on looking forward?

Well this isn’t just a nostalgia trip or a whimsical reminisce about the ‘good ole days’. I Actually feel ‘digital’, the industry, the philosophies and methodologies, its practitioners and proponents are all coming of age and that those that were responsible for setting the pace early on deserve recognition.

Too much is thrown away and forgotten in our disposable culture and it’s even harder to remember and document something that exists only on a computer screen for a relatively short period of time.

However we must try, as the medium matures the lessons learnt early on need to be remembered and those that set the digital word alight must be recognised and appreciated as digital design and production seeks to take its place within the established canon of creative and technical disciplines.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/cYX4RwqJHds/

Over the last 6 months I’ve chatted to some world renowned experts about building a sustainable web development business on my podcast Agency Talk.

Below I’ve pulled out some of the best bits that will help you on the path from freelancer to strong, sustainable web development business owner. Click on each step for 1 minute of audio from each expert (start from the bottom).

1. Define your ideal customer

Probably, one of the biggest things that most business people tend to do is they don’t really have a strategy or a focus or a target market that they are going after. One of the things that I think is valuable to any business is to be very clear about who your customers are. In the web space the majority of people are playing at the lower end of the market, they are dealing with the small businesses, low revenue generation businesses. They can’t afford to spend a lot of money on internet marketing but they are very willing and ready to listen to a lot of information and ideas.

So one of the things I learned very quickly is that there is a certain type of business that I want to do business with, there is a certain investment that I want those businesses to make and my products and services so I have a value on what I do and what I deliver.

My value proposition is based on the value of clients that they are trying to attract. The client in the market for example, let’s say it’s a luxury home builder and there are several of those in the market . The average value to a luxury home builder for clients in terms of profit might be in between 10-15 percent of the value of the property which in turn could be $150,000-$250,000 worth of gross profit. To walk into a client like that and to offer a solution that says “I’ll build you a website and do a little bit of social media for you and the solution’s only $2000-$3000”. The value doesn’t equate to the value that you are delivering to the client because if your strategy is focused on getting $250,000 clients then naturally the investment in those strategies is going to be significantly higher.

2. Learn how to sell

I definitely can’t stand cold calling, I’ve done it. I’ve essentially been given a phone book with names and numbers, so I just called until you can make a sale. It’s a horrible way of doing business. It’s uncomfortable for me, it’s uncomfortable for the people you are calling. I’ve also done auto sales so I’ve worked in dealerships selling cars and the processes that a lot of salespeople tried to use in those environments are just high pressure. It’s all about really the salesperson and the company doing the selling and very little about what that person needs.

The alternative is after you have done education based marketing, you are in a consultative mode. So people come to you because they see you now as the expert. the authority in the marketplace and want to do business with you because they feel that you’re going to be the company that will handle all their needs because you really spoke to those things. In this kind of situation, it is great because now all you have to do now is dive into that person’s specific needs in their company. You can just start a consultative process.

The best place I would say for people to learn about this process is to read the book “Spin Selling” by Neil Rackham. Read that book because it will help you with the process and the framework of going through consultative selling especially for things in the agency environment where it is a high dollar figure that we are talking about. It’s not like, “Here, I’m checking out at the grocery store and buying a pack of gum on impulse”. People have to really make a rational decision along with the emotional side of it. Consultative selling is really important. 

3. Productize service

Tweaky is the marketplace for website customization. We help small business owners who need to make small changes to their existing websites get the job done.

How it works is that the customer comes to us and creates a brief like ‘I want to change my logo or I need to add Facebook share buttons to my blog’. We then break it down to a series of tweaks and each tweak is valued at $39. Then it goes into the marketplace of developers who can get the job done. The interesting thing here is that it’s a curated marketplace so people have to apply to join and we’ve got a really strict application processes.

The developers rather than bidding on projects because we have already set a scope to project, set a dollar figure for it and define exactly what needs to be done, the developers just pick up the jobs and get started.

4. Build your USP

This is actually funny, I did some marketing training recently on the topic of USPs. For the last 6 months, I have been positioning myself as just a copywriter who wrote autoresponders and one thing that I got out of this marketing training that I did recently was that I had to be known for something. I have to have something, well ‘John’s this guy’ instead of just ‘John’s a copywriter’ because copywriters are everywhere.

Basically I just relabelled the site in a bunch of different ways . Calling myself the autoresponder guy and talking about myself as though everyone else called me the auto responder guy because even if that’s not really true people will assume that. It gives them a really easy way to explain me, so someone says “Hey, this is John. He’s the autoresponder guy.” and they would go “ Ah, that makes sense.” 

5. Get referrals

Your best source of leads are going to be from referrals , just like how I got a lot of customers from referrals. You’re probably going to get your customers especially at the beginning from referrals.

Make sure you have a clean reputation, always do good work, put the customer first even when it doesn’t make sense. When you are first starting out in your business even in the long run reputation is one of the most important things and if you can’t have a squeaky clean reputation, you are not going to get at ton of referrals and you will notice your business won’t keep on growing especially on the short run right? Because a lot of other methods to get customers, take a lot of work and are much longer term play risk vs a short term play.

I just do good work and I hope people refer me . Every once in a while when people would talk about random stuff for other businesses they are involved with I’d softly mention to them ‘Oh if you ever they need help let me know’. Sometimes I would help nudge them towards more people. 

6. Build an audience

It boils down to building up an audience of people, not all of them direct clients. A lot of people, just general business owners or people who are interested in the kind of work that you do. Building up an audience of these people and establishing your credibility and authority in whatever space you operate in and then using that to really drive a lot of long tail business.

Establish yourself and then over time continue to prove yourself, then when a project bubbles up to the surface or a member of your audience is in a position where they are speaking with somebody who wants a referral for an agency or an individual who can help them, you are at the front of their mind. 

7. Get your processes right

When I joined there was a senior designer, a creative director I guess you would him at that stage. He had some processes in place and he taught them to me. I have known him for a few years so it was a pretty easy transition.

When we sat down and actually looked at building the processes out as we moved from a team of 2 of us and at the time I left there was 10 . It had to be specific enough so people knew what was expected, specific enough that you can sell into clients. Let them know you have one round of design upfront, two rounds of revisions then one round of development and then a Q & A round and that is it.

You also had to be able to sell into the sales team, it’s that classic thing the more you can educate, the better your sales go basically. 

8. Find you unique lead advantage?

In business there is so many things to get a head around but really a lot of business comes back to how you are going to get customers. A lot of content we’ve had on the Agency Talk podcast over the last nine episodes really has to do with how you are going to get customers.

When I reflect on my time running my web design business, I think there was so many different ways I tried to get customers but in the end I was really only able to find one that really worked for me. At that time, it was SEO. Basically, I was able to rank really well on Google and get a lot of leads through Google that if I had to pay Adwords for I would have been broke overnight.

At least for me, I realized that a whole bunch of ways that generating leads didn’t work for me but then I was able to find that one that really did work for me that was able to use my strengths and kind of scale that a little bit.

I call that a unique lead generation advantage, what is it about you or your business that is going to give you that advantage in a particular way of generating leads. 

9. Get you business model right

Probably the biggest tip that I would give, the one I wish I had been aware of when I first started out is it’s all about the business model. With a web design / development business, you really don’t make much money or any money when you’re developing the sites. All the money is in the recurring stuff at the back end of it.

So once you have finished the website for the client you haven’t finished the work because there’s so much ongoing stuff you can then develop a relationship with the client with and can keep charging them from website maintenance, to updates, to software upgrades to online marketing from search engine optimization, to social media marketing to pay per click advertising, on and on it goes.

It takes you a bit away from the web development “per se” but to ensure the financial strength and growth potential of your web development business, you’ve got to look at recurring ongoing opportunities to make money and keep the wolf from the door so the recurring charges and opportunities there are just enormous and a great way to make a really good income as a web development agency.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/TZrmhfZGXNk/

All of the GUI templates we have for you today have been designed in a Flat style. Meaning they have been created ‘without the usual gradients, pixel perfect shadows, and skeuomorphism…’. All of the kits are free, editable,, in .psd format, and all are perfect for quickly creating web and mobile mockups.

Here they are:

Flat Blog UI Kit (PSD) by PSDExplorer

Download Page →

Square UI (PSD) by DesignModo

Download Page →

Flat Widget UI Kit (PSD) by Riki Tanone

Download Page →

Flat UI (PSD) by Andy Law

Download Page →

UI Kit (PSD) by Abhimanyu Rana

Download Page →

UI Kit (PSD) by Jamie Syke

Download Page →

Flat UI Kit (PSD) by VisualCreative

Download Page →

Web App Flat UI (PSD) by Blaz Robar

Download Page →

Minimal UI Kit (PSD) by ThemeDesigner

Download Page →

Flat Web Elements (PSD) by Alexey Anatolievich

Download Page →

Web Browser UI Elements (PSD) by Bluroon

Download Page →

Flat Event Creation (PSD) by Seth Ely

Download Page →

Flat UI Buttons (PSD) by Alex Vanderzon

Download Page →

Flat Mini UI Player (PSD) by David Magère

Download Page →

Flat UI Login Panel (PSD) by Valentin Scholz

Download Page →

Metro Upload File Interface (PSD) by GraphicsFuel

Download Page →

Flat Icons (PSD) by Alberto

Download Page →

Flat Icons (PSD) by Vladimir Carrer

Download Page →

Flat Credit Cards (PSD) by Ian Silber

Download Page →

Vector Social Icons (EPS)

Download Page →

Flat Vector Chrome Frame (PSD & AI) by Jeffrey Kam

Download Page →

Flat Mini Browser (PSD) by Joe Barber

Download Page →

Flat Browser Freebie (PSD) by Keyners

Download Page →

Flat Apple Family Templates (PSD) by NumarisLP

Download Page →

You might also like…

…to read more on ‘Flat Design’…
The Flat Design Aesthetic: A Discussion
Flat Design and Accessibility
Examples of ‘Flat’ in Web Design

…or, you could browse our GUI category.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/qoeEq1XhF2Q/

In a perfect world, it wouldn’t matter to a designer what content management system a site uses. But for most of us, projects are actually a combination of design and site building. It’s with this last bit that things get tricky.

Each content management system that we work with requires a significant investment of time to gain the expertise required to make our projects successful. The preferred CMS among designers has long been WordPress. There are some good reasons for this, but I’d like to discuss why designing for Drupal is something you might also consider.

Now before we get too far, I want to say this isn’t a Drupal vs. WordPress thing. I have personally used WordPress on projects and I think it’s a great content management system. Another large Drupal firm, Phase2 Technology used WordPress on the latest redesign of their main site. So although the two systems often compete, they can peacefully coexist.

So why would you consider designing for Drupal? Let’s start with one of the best reasons.

You’ll Make More Money

A while back Mashable had a piece on average CMS project costs based on data from DoNanza, the freelance site. On average, Drupal projects earned twice that of those using WordPress. Think about that…double your income on a per project basis.

That article is a couple years old, but I can tell you from conversations I’ve had with my Drupal friends who work with both systems that this still holds up. Drupal projects are just better earners, usually because the projects have more advanced requirements that Drupal is better suited to meet. Now this last point may have you thinking, advanced requirements = project from hell.

Not necessarily.

Drupal Has Changed – a Lot

Let’s just come out and say it, Drupal used to be a big pain in the ass with regard to usability. I say used to be because with Drupal 7, things dramatically improved thanks to the work of Mark Boulton who was hired to design a new admin interface for Drupal. The result is a learning curve that is now very much the same as WordPress. 

I say this quite confidently because I have personally trained clients on both systems and I haven’t been able to tell that either is more difficult to learn for someone coming at it with a fresh pair of eyes.

With Drupal 6, this wasn’t the case. Clients would inevitably become frustrated with the maze-like administrative backend. In truth, it made a lot of people hate Drupal.

So although it was admittedly bad, it’s actually quite good now and slated to get even better with the release later this year of Drupal 8. The usability problems of early versions of Drupal have provided lessons to the community that have been taken to heart. It’s become a major and ongoing focus for improvement.

Installation Profiles

A comparison of WordPress and Drupal isn’t really apples to apples. When you download Drupal, it’s not actually a completed CMS and this is by design. Drupal is amazingly flexible and the intentional blanks that have been left are so site builders can customize things to their liking.

Sure, both WordPress and Drupal almost always require additional plugins or modules, but there is more left undone with Drupal. The parts that are missing – a rich text editor for example – are not included so that a designer or developer building a new site doesn’t have to undo something they don’t want included in their work. This is why when you download Drupal it’s said you’re downloading “core”.

Sounds like a big headache if you’re trying to get up to speed with Drupal on a deadline, huh? You bet it is, and the solution is using an installation profile. 

Installation profiles are something that I’m not sure has an equivalent in WordPress. It’s a version of Drupal that you install – same process as generic Drupal – but the end result is a completely configured site, often including sample content. The best way to describe them is “websites in a box”.

Oftentimes installation profiles have a specific purpose. For example, the first profile on the previous link is for Commerce Kickstart. It’s an e-commerce profile (aka distribution) that comes with almost all of the site building completed. No wonder it’s the top download, right?

So another great reason to design for Drupal is the huge time savings that installation profiles can provide. Remember when we were talking before about more money per project because of more complex requirements? Installation profiles are a great shortcut that can reduce time spent on site building and make those projects even more profitable.

Drupal Is Growing

While overall use of content management systems continues to grow, Drupal is outpacing the pack. The table below shows the market share of the “Big Three” systems over the past year. Take note of the column on the far right.

You’ll see that Drupal grew its market share by 21% – not too shabby! The data is from W3Techs, but the numbers from Builtwith show a similar trend.

My own feeling is that the improvement is due to the changes with Drupal 7. It’s been a game changer. It’s also quite likely that in the future, if you want projects in some industries, you’ll have to be open to working with Drupal. One example is higher education, which has been seeing a major shift toward Drupal over the past several years.

The Right Tool for the Job

You now have four good reasons to design for Drupal, but like I said at the top, both systems can coexist. It’s really about picking the right system for a given project.

Let me tell you a story about a redesign project at the university where I used to work. The project was put out to bid because the particular unit was small and didn’t have their own IT or design staff. One firm submitted a very competitive bid and they had great design skills. But when the time came for a review of their bid, they pushed back hard on Drupal. “Wouldn’t WordPress be better?” they insisted.

Sometimes WordPress is a better choice, but in this case it was clear they were simply uncomfortable with Drupal and were selling a solution that wasn’t best for the client. In the process they lost a chance at a five figure contract on a project that wasn’t particularly complicated.

By expanding your tool kit, you can avoid situations where you lose potentially lucrative projects – I guess that makes five great reasons to design for Drupal!

What Does it Matter?

Now you may be asking why I care if more people design for Drupal. What does it matter?

Drupal actually needs more designers. We need the enormously valuable perspectives designers bring, perspectives that are different from those of the developers that make up the majority of the Drupal community. More people designing for Drupal means a richer, more diverse group of contributors and ultimately, a better product. I hope you’ll consider giving it a try.

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/_EXIGLDqXrs/

Over the years (as you can see from 2008 and 2010) design agencies have consistently produced clean and spacious homepages using a simple tried and tested formula: Large logo, a simple medium-sized tagline, main section used for showcasing some of their best work and finally listing some basic contact information in the footer. It is a very simple formula, but it has worked effectively.

Fast forward a few years to 2013 and web trends have dramatically changed, technology has greatly improved, user expectations are much higher and the mobile web has well and truly arrived. Typography is much larger nowadays, sliders are used instead of static images, parallax scrolling & single pagers are overly popular… there are so many changes and improvements that we can’t possibly list them all here.

But the one thing that hasn’t changed, despite all of the progress and as you will see from the beautiful and clean agency sites we have for you below, is that that simple, yet perfect, web design agency formula still works and rings true: Logo – Tagline – Best Work – Contact Info.

It is timeless.

Gin Lane Media

DangerDom Studios

Whiteboard

Manos

TeamGeek

Grain & Mortar

By Association Only

45royale

Playground Inc.

Palantir.net

Always Creative

Engage Interactive

Etch

FHOKE

Awesome

CO OP

Teehan+Lax

Sputnik Creative

Kohactive

Plain

Mark Boulton Design

35mm Design

Supereight Studio

Envy Labs

I <3 FR

Shelton Fleming

FortyOneTwenty Inc.

Online Department

The Prince Ink Company

SoftFacade

You might also like…

Our 50 Favorite Web Designs from 2012 →
Examples of ‘Flat’ in Web Design →
20 Websites with Original, Non-Standard Geometry →
40 Examples of Brilliant Responsive Website Layouts →
Our 50 Favorite Web Designs from 2011 →
Essential Elements of a Design Agency Website Layout (with 30 examples) →
30 Highly Unusual Web Designs →
40 Effectively Designed Non-Profit and Charity Web Sites →

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/TcFJxMOj-T0/

Twitter is one of the biggest social networks out there, and it can certainly drive a lot of traffic offering plenty of exposure and good conversion rates. Whether you are a developer or not you can make use of Twitter’s tools to interact with users on your own site. You can do this with these four tools offered by Twitter:

1. Embedded Timelines – a.k.a. widgets, that’s what we’ll be looking at today!
2. Twitter Cards – Similar to Facebook’s “share” tool, where you can include external content, excerpts and images.
3. Embedded Tweets – Allows you to add a single Tweet on your own site as a cool and styled quote.
4. Twitter API – This is the powerful and advanced way to interact beyond simply pulling data.

Today we’ll take a quick look at some methods of adding custom and styled widgets to your web site, taking things beyond the basic and standard five latest Tweets. Because at the end of the day we all want to stand out of the crowd, don’t we?

Warming Up

The easiest way to get started is using Twitter’s own tools. Most people don’t actually know that Twitter offers a cool “wizard” to create customized timelines.

If you are logged in you’ll see a screen with the most common functionalities, like so:

The current version offers 4 widget types:

1. Profile (or timeline) – The ol’ common widget we see pretty much anywhere. It show the latest Tweets.
2. Favorites – This will create a custom timeline of your own favorites. Those who are used to Google Readers sharing tools have seen this feature before (where you can share your own favorites as a RSS feed).
3. Lists – It’s good to group people with things in common, like activity field, Tweets type, company.
4. Search – You can show the results of your own searches or hashtags.

They are pretty straightforward, but that does mean little or no customization. That is a fair trade, since you can’t have everything in your life, right? Well, actually you can.

Getting Your Hands Dirty

Feel like coding today? Yes? Good. Let’s dig a little deeper and create a customized widgets.

The first thing you’ll need to do is to call the Twitter widgets functionality. This pretty line will do the job:

Next, we’ll need another snippet to actually create the widget. This will do it:

Now, let’s translate these attributes into plain English:

• Type: Pretty much those 4 types we’ve seen before. Possible values are ‘profile’, ‘favorites’, ‘list’, ‘search’.
• Rpp: Is the number of Tweets to be shown.
• Interval: How many milliseconds should the widget wait before attempting to retrieve new Tweets. The higher the number, the more JS calls you’ll have.
• Width and Height: You guessed right, dimensions for twitter box.
• Shell and Tweets: The basic styling options for your boxes (hang on though, things are about to get better).
• Scrollbar: False will force only the number of Tweets you selected to be shown, true and the user can navigate through past Tweets.
• Loop: False won’t bring duplicated results, true will bring the same results if the search doesn’t find anything new.
• Live: True will reload the search continuously, not just on page load.
• Hashtags, Timestamp, Avatars: false/true to hide or show those items.
• Toptweets: false to show all Tweets related to your search and true to show only the popular ones.

Notice that we have the mandatory call setUser(‘UserName') for the profile widget. It doesn’t ask for any password nor have any control method, so you have pretty much the same capabilities as you’d have in your wizard but here we have a whole set of new cool things we can do.

And since the Twitter API doesn’t have any inline CSS rules we’ll use our own code. It has a lot of obvious class names and all you will need to know is a little CSS to customize it, for example:

.twtr-widget 
	width: 400px;
	margin: 50px 0 0 50px;
	padding: 0 0 25px;
	background: white url(background.png);

The same rule applies for the header: .twtr-hd, the body: .twtr-bd and the footer: .twtr-ft. A piece of cake. You can pretty much use any CSS rule you want to change the colors, sizes, backgrounds, shadows, gradients and you can even make use of pseudo-elements like :before and :after.

How to Customize your Search

We could also make use of the widget to show a custom search. Just change the type to search and add the title, subjects, and search attributes to the widget. The same CSS styling will apply, so you can easily add more than one widget.

Its the search attribute itself is where all the magic happens. Here are the possible search terms:

• Regular Text Search: Nothing new here. You can search by “speckyboy” and will get a lot of results.
• Hashtag: If you add the “#” operator you’ll filter the hashtags for that item.
• Excluding: If you are getting too many results you can remove the trash by adding -undesiredTerm.
• Authorship: Using from:speckyboy will return only Tweets from a certain user.

But in order to get a really good result you can chain multiple search methods into a single string, using the AND/OR operators. But the OR works as a XOR operator (exclusive or) which means that it’ll bring one result OR the other, but not both.

For instance, if you search “dev OR frontend” and you have a Tweet saying “@speckyboy is the coolest dev blog out there. Seriously good frontend tips there” this Tweet won’t show in your search, because of the XOR behavior. You could simply search for “dev frontend” to get both results.

Long Story Short

This is just the beginning, the eye opener to a much bigger world than simple Twitter widgets. Now I ask you, have seen any good widget implementations or customizations our there? Feel free to share!

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/-eowgM9r8jg/

There was a time when web browsers were simple tools used to browse the internet, and the internet itself was just a conglomerate of email and the odd news and gossip websites. However, now the net is much more than that, and with the advent of HTML5, we have seen a new generation of web apps that are capable of performing a multitude of tasks.

Most programmers and coders used to rely on offline programming tools to code and create new stuff. Few years back, we saw the advent of web based Integrated Development Environments and code editors, and nowadays, those online tools are slowly catching up with their offline counterparts.

In this short article, we shall be discussing web based IDEs as a possible and viable alternative to offline IDEs.

Coding, Offline to Online: The Transition

Some years ago, the common trend was to code websites offline and once done, deploy them online. There were many obvious reasons for this model, the most common one being the that the internet speeds back then were super slow. Over time, various online IDEs such as Cloud9 and ShiftEdit came into being, and this led to an experimental shift from offline to online IDEs.

With online IDEs, the choices are aplenty, and each choice seems to have its own mode of operation. There are some IDEs that require you to pay, whereas others are totally free. Similarly, some IDEs support as many as over 50 programming languages and also offer key features like FTP support to help you deploy your work on your own server, whereas others remain absent from FTP and stick to a limited range of coding languages.

Of course, features such as collaborative editing, syntax highlighting, debugging, terminal windows and even integration with services such as Github and DropBox seem to be common in virtually all online IDEs.

Online IDEs: The advantages…

Lets take a look at the positive aspects of online coding tools? Here they are:

1. Mobility:
   Just like a web based office suite such as Google Docs, online IDEs offers the opportunity to work from anywhere. No matter where you are — home, office or out on travel — if you have a decent internet connection and a modern web browser, you can satiate your coding needs easily.
2. Easier Collaboration:
   One of the biggest advantages of online IDEs is the fact that such tools can help you collaborate better on team projects. You can seamlessly share your code as well as develop applications as a team using online tools.
3. No System Constraints:
   You do not need a megaton of RAM or super power processor speeds in order to work on online IDEs.
4. No Operating System Issues:
   Mac, Windows or Linux; no matter which OS you are on, at the end of the day, it is your web browser that matters the most when using an online service.
5. Open Source:
   Web IDEs such as ICEcoder are open source, thereby allowing you to grab a copy of their source code, if you so desire. This means that if you need a particular feature added to the software, but do not wish to wait another two years for the developers to come up with it, you can just contribute yourself.
6. Speed:
   Generally, online coding means you can discover issues and rectify them faster, as compared to offline development and later online deployment. Meaning, web IDEs can help you code and deploy your apps and websites faster.

…and, the disadvantages

Having gone through the advantages of online IDEs, lets now turn our attention towards the drawbacks or some of the negative aspects:

1. In general, the common perception is that online IDEs and code editors are not as robust as their offline counterparts. For instance, if you are used to the likes of PHPstorm, and then move to an online IDE, you might find yourself handcuffed by the lack of features.
3. While this is debatable, most developers feel that online IDEs are ideal only for HTML/CSS and small to medium sized projects. Any bigger project involving a great deal of complex code may choke the life out of an online IDE.
4. Similarly, if your project is too large, using an online IDE would result in a lot of data transfer and processing, and an offline alternative will clearly be more feasible for this purpose.
5. Another often-discussed, though generally unproven, belief regarding online IDEs is the fact that they may not be as secure as their offline brethren. This same logic is also used to criticize cloud computing as well — if your data is accessible from anywhere, it really is accessible from ANYWHERE. While makers of web IDEs do take security very seriously, it does not take much effort to get unlucky and if the web IDE is compromised, your project might be at risk too.

Conclusion

While desktop based coding tools and IDEs are still in vogue, and will, most likely, continue to be prevalent for the next few years to come, online IDEs are gaining momentum at a rapid pace. To compare, take a look at the office tools section, for example: Zoho Office and Google Docs are gaining in popularity, even though Microsoft Office still has more features (at least in terms of quantity, don’t you think?).

Features such as the ability to code and deploy from anywhere and work collaboratively with an entire team have further added to the popularity of online coding tools. Oh, and before ending this discussion, just in case you are wondering, we do have a rather extensive list of wonderful online IDEsfor you to choose from!

What are your thoughts on online coding tools and IDEs? Do you use, or intend to use, any of the online coding tools?

Original from: http://feedproxy.google.com/~r/speckboy-design-magazine/~3/dh654SxKfeU/