This has caused the quality of designs (especially the mobile usability factor) to decrease on a larger scale when compared to the sites that not only practice good mobile aesthetics, but allow their users a smooth transition between the regular site to an enticing experience on their mobile devices.

Because of the instability in a lot of the mobile web design information that is being distributed on the web, a lot of websites have very poor mobile interface designs. Below, we’re going to cover a few simple, yet prominent steps to designing a much more effective interface and increasing the quality of a mobile websites usability.

Get To Know Your Users

Like any other usability article no matter web or desktop related, there’s always some sort of connection that needs to be made between the designer and the user. Needless to say, if you’re aiming towards designing a mobile website with the best possible level of interaction between the sites interface and the user, how would you be able to devise this step effectively if you don’t have a clue who’s going to use the mobile website?

Get to know your users by conducting a few tests and gathering useful information using various usability testing and analytics tools on the large scale site. Remember, your job is to “listen” and learn from your users. Once you have a good idea of what areas and design elements your users are attracted to the most, then you can move on to the next step, which is: Accessibility

Mobile Accessibility

Designing your mobile site so that your users can move quickly and freely throughout the interface is key to the effectiveness of your websites usability. For example allowing toggling for options rather than forcing users to view them, hiding rarely used features and widgets, and avoiding having users fill out long forms are just the beginning of things you can do to create a more accessible environment. When users access a mobile website, a massive amount of their attention should be re-focused on the content you want them to view opposed to the aesthetics. This means that the content should be as equally accessible as it is legible.

You should also use a variety of techniques that will help you redirect mobile users and/or detect specific screen resolutions. The standard screen resolution is 240×320.

Keeping Everything to a Minimum

KEM (Keeping Everything to a Minimum), is very much like the Keep It Simple Stupid (KISS) technique. Okay, you got me, there’s no such thing as the KEM technique, but you get the idea. Since effective mobile interactions have everything to do with great usability and nothing to do with overcrowded designs, we find ourselves at a place where in order for us to successfully reach out to a user we must keep our mobile designs as simple as possible. For example, make sure your navigation bar is as short as it can be, you eliminate excessive hyper-links within one page, and you keep the use of images to a minimum. A simple mobile website, will more than likely be 9 times out of 10 more effective then one that feels bloated. Less is definitely More.

Communicating Through Color

As unrelated as it may seem, color plays a large role in a mobile websites usability. When color is used within the right parameters, it gives way to a more visually compelling manner for us to communicate information on a page without having to use up any additional space. If you decide to use different colors, make sure you refer to the W3C Mobile Web Best Practice (Use Of Color), this tells us that if we provide users with information in color, we have to make sure that this same information is available without any color.

Background colors are accepted, however there must be a definite contrast between a background color and text. Information that is conveyed using colors, should contain a clear contrast between any of the other elements within the mobile websites design. Remember, we’re using colors to communicate information effectively, not to make things just look pretty.

Testing Phase

The development of effective usability within your mobile website will require you test early on in the design process. As we touch base on mobile testing, remember to keep tests as simple as possible. Testing for usability is not a one-time event, it’s an ongoing process. This will help you increase the quality of your mobile website through time. After-all, Rome wasn’t built in one day. Since there is an enormous amount of devices users can utilize to access your mobile site, you should not only test often, but on multiple devices as well. Even though some devices may use the same browsers, you should make note that testing on multiple devices will help you address the difference in screen resolutions, sizes, and operating systems so that your mobile website is able to run as efficient as possible.

Here’s an article written by Jakob Nielsen on Mobile Usability. It explores conducive research results from 36 websites. Definitely worth reading.

Books and Further Resrouces on Mobile Usability

• A Three Step Guide to Usability on the Mobile Web
• Wikis for Mobile Testing
• Nokia Forums: General Usability Tips
• Handheld Usability Book
• Mobile Usability in Educational Contexts
• Informative Slide on Mobile Usability Testing
• Mobile Usability: Is it Good Enough?
• Mobile Usability: How Nokia Changed the Face of the Mobile Phone

Your Turn To Talk

I hope you enjoyed this post! Please feel free to chime in and leave a comment below ;)

Regular readers here on SpyreStudios probably already know about MediaLoot as I’ve talked about it in earlier posts, but for those of you who don’t know, MediaLoot is a brand new site for designers offering premium resources like textures, print templates, web elements, icon sets, vectors, etc…

We’re constantly working to create new resources, and we’re also working with some awesome designers to create even more stuff for members! Being a membership site, MediaLoot will be updated many times a month with new resources and members can even suggest/request that we create specific items via our ‘vote‘ page!

Normally, MediaLoot is $29 per month, but we’re launching at $14 per month, and this price is locked-in for life! Make sure you check out the tour and sign up to start download resources and interacting on the site! See ya there! ;)

In this post, we’ll explain the difference between padding and margins, how the box model effects browsers and some tips and tricks dealing with cross-browser issues.

What are margins?

Beginning developers often use margins and padding interchangeably, but there’s actually a difference between the two.

Margins are the spaces around an element. In order for margins to work properly, the element must be floated or positioned relative. This style is often used to move the element it’s applied to, or to move other elements around it.

An element can have equal margins on all sides of it, which is simply written as:

element { margin: 5px; }

This gives an equal 5px to every side of an element. (Every element is a “block” or 4 sided square or rectable, regardless of it’s visible shape.) An element can also have different margins, or no margins at all on some or all of its sides. This can be written in the short-hand or long-hand style:

element { margin: 5px 10px 2px 4px; } /*margin: Top, Right, Bottom, Left*/
element { margin-left: 4px; margin-right: 10px; margin-top: 5px; margin-bottom: 2px; } /*if you don't want margins on a side, just leave it out of your CSS*/

There are a few IE issues with margins that probably cause most of all IE layout problems.

• Double margins – The double margin bug in IE6 is probably the hardest bug developers struggle with. If any element is floated and has a margin in the same direction, IE6 will double that margin. So if you have an element that is floated left and also has a margin of 5px to the left, IE6 will give it a left margin of 10px.
• Bottom margins – All IE versions like to ignore bottom margins, so it’s better to use padding for bottom spacing instead.

What is Padding?

Like margins, padding is the space around an element. However unlike margins, which deal with the space around the outside of an element, padding can effect either the outside or inside of an element.

Padding can also be written in the shorthand or longhand version of CSS:

element { padding: 10px; }
element { padding: 5px 10px 2px 4px; } /*padding: Top, Right, Bottom, Left*/
element { padding-left: 4px; padding-right: 10px; padding-top: 5px; padding-bottom: 2px; } /*if you don't want padding on a side, just leave it out of your CSS*/

The way padding is handled in the browser is called the box model. IE6+ (in standards mode), Firefox, Safari and Chrome all handle the calculations of padding the same, while versions of IE5 and lower calculate it completely different.

So how does the box model and padding work? Let’s say the element below is 100px in width and height.

Now, let’s say we give it an equal padding of 10px because we have some nice text inside of it and we don’t want it touching the element’s edges. However as you can see below, the padding didn’t push the text inside the element, it just made the element itself bigger! This is when padding is most similar to margins, as it affects the outside of the element.

This is where the idea of the box model comes in. Adding 10px of padding to an 100px element will increase it’s dimensions to 120px. (100px element + 10px top + 10px bottom = 120px).

So if we wanted to keep the element only 100px in height and width, but push the contents inside the element by 10px, we’d need to adjust the actual dimensions to 80px in height and width. Then our element would look like:

Unlike margins, an element with padding does not need to be floated or positioned relatively for it to work, if it’s dealing with padding on the inside of the element. However, if you’re using padding to move the element (or another element around it), it does need to be floated or positioned.

IE5 and below calculate padding opposite of the rest of the browsers. IE5 simply assumes that when you apply padding, you want it affect the inside of the element. Therefor, if you gave an element of 100px a padding of 10px, it would simply push the inside contents 10px in, so there’s no need to adjust dimensions.

Plenty of space

Margins and padding can be tricky when dealing with cross-browser compatibility, but once you get the hang of it, it becomes much easier to anticipate the reactions of browsers.

The In Depth CSS Series

• Part 1: Margins, Padding & the Box Model
• Part 2: Floats & Positioning
• Part 3: All About Text
• Part 4: New CSS3 Styles

Your Turn To Talk

I hope you enjoyed this first post of our CSS In Depth series. Stay tuned for the next part!

Of course feel free to chime in and leave a comment below :)

What if I were to tell you that you can control those feelings even more than you’re used to? The truth is, you can control the feelings you have by utilizing some tips on how to make sure you’re creating a killer website design right from the start.

There are things that you should (and shouldn’t) be doing during your website design process. These things can be as small as subtle color choices or as large as advertisement placement or layout. Regardless of the size of each item on the list, the impact of each item is equally huge when you look at the bigger picture.

So today i want to go over 5 things you can do that will either make, or break, your next website design. Of course you should always start by brainstorming, sketching, wireframing and go through a couple rounds of revisions before you actually start designing a site in Photoshop or Fireworks.

I hope you enjoy the article.

Making Proper Use Of White Space

It’s no secret that here on Spyre Studios, we’re all fans of minimalism. This translates perfectly into website design because using the right amount of white space can make your design have a better flow and help visitors find what they’re looking for – and fast!

For those who are new to web design, when we say “white space” we’re not actually referring to the actual #FFFFFF color. What we’re referring to is the open, airy spacing that is utilized in designs. Spacial sense is also very important. For some inspiration on minimal designs, you can check out some previous articles we’ve wrote here on Spyre Studios.

• 40 killer minimalist blog designs
• 56 light and clean website designs using a minimalist color scheme
• 20 examples of dark, minimalist website designs with great typography
• 15 minimalist designs that inspired me

The Wrong Color Choice Can Kill A Business

When you’re designing a website that’s geared towards making sales and getting people’s attention, you’ve got to remember that the wrong color choice will throw off potential buyers, especially if the color scheme you’ve chosen isn’t giving off the proper vibe for your product/business.

For example, a business aimed at selling meditation products wouldn’t do very well with a loud color scheme filled with bright reds or yellows. That business model would be better suited for muted colors – something calming and soothing. On the other hand, a website that’s trying to sell training equipment would do very well with a brighter, more “tough” color scheme.

One way to find good color schemes for your site is to check out Colour Lovers – they’ve got great palette choices for all kinds of styles. This article written by our very own Jon should also prove useful.

Don’t Turn Your Navigation Into A Game Of “Where’s Waldo?“

Your goal is to keep people on your site for longer than 4 seconds, so one of the main things you should be thinking about is your navigation. Is it easy to find? Are people able to get from page to page easily? Will your visitors know how to contact you in the first couple seconds of viewing your site? (we’ve all seen Flash sites that have the navigation buried under 37 seconds of animation and heavy graphics, right?)

These are all questions that should be asked while designing your website. Turning your navigation into a game of Where’s Waldo? will definitely ensure that your page views per visit drop, your interaction plummets and your visitor’s overall experience is shot to hell.

By looking at the Spyre Studios website, you’re greeted with the navigation right away. It’s not hidden, blended in or hard to find. It’s up front and in your face – just like it should be.

Ignore The “Keep Everything Above The Fold” Mantra

Some people will have you believe that you must keep all of your content above the fold, disregarding the design and interaction you build into the top part of your website. Maybe they tell you to make your navigation and logo so small that the content comes in at 100px. Maybe they say that a “buy now” button doesn’t work if it’s below the fold. Whatever “they” say – they’re wrong; if you execute the top part of the design properly.

Paddy Donnelly has an awesome post titled “Life below 600px” that you should check out. A lot of great points are brought up in that article that you should really be thinking about when designing your site. Sacrificing design to appease the masses shouldn’t be at the top of your to do list.

Don’t Be Afraid To Sell Yourself As Much As Possible

Look, if you’re designing your own website to promote your business or you’re building another company’s website, one of the main thing that site is supposed to do is sell. Don’t let people tell you anything else because it would be a lie. Interaction is great and socializing with your clients is obviously a no-brainer, but if your website design doesn’t sell you to them, what’s the point in having a website to begin with?

If you look over most business websites, you’ll see a pattern – they all have buttons of some sort that say things like “sign up” or “buy now” or “view pricing and plans“. Checking out sites like Woo Themes, Basecamp, Mail Chimp and even the upcoming MediaLoot will allow you to visually see what I mean. There’s a reason they’re utilizing these types of calls to action – one of their (many) goals is to turn a profit.

As long as you don’t forget that and you make sure it’s easy for people to know you’ve got something to sell (and for god’s sake don’t over do it!), you’re on the right track.

Have your say

Drop a comment and let us know what you think can make or break a killer website design. Did I miss anything on the list?

the add to cart buttons image was a screenshot of this article

For as long as humans have been able to hold a pen and a paper in hand, we have been prototyping and although different from now, “wireframing“. This dates back to thousands of years ago when architects and artists began converting their artwork into an actual physical presence.

This is to outline that we are no strangers to the planning, prototyping, and executing process.

What are Wireframes, Really?

A wireframe in essence, is a visual representation, guide, and basic element structure of a websites interface design. Wireframes are usually the product of an idea that’s later reproduced on paper (or screen) so that they can preserve and maintain the consistency of visual similarities throughout a websites design. Not only that, but wireframing allows us to save valuable time and money. Deciding to create a website without planning, many times results in a very poorly functional interface. This will ultimately drive users away from your website, and tarnish the quality of your brand.

Below we’ve compiled great web-based applications to create mock-ups and wireframes. And even though these applications allow us to streamline our development process, it can sometimes be a much more effective technique to begin with a pencil and paper. Before computers, softwares, and websites, we were already developing designs by prototyping on paper. When I began designing mechanical and electrical parts for one of my previous employers, I was introduced early to planning and later designing them through a computer. Meanwhile some of my colleagues that had been doing the same job process before computers existed kept sketching out their projects on paper, and rarely referenced their computers. This didn’t mean that they couldn’t design on a computer better than I could, it just meant they preferenced the pencil and paper.

A large portion of designers prefer and begin their wireframing process on paper, for the most part, you can see the benefit in this because it is quick, straightforward, and best of all, free. While web-based applications can be relatively hard to interact with, may lead to a lot of wasted time, and may also reduce efficiency. There are pros and cons to either of the above, and many times a decision to utilize one or the other, is based on preference.

Tools and More Tools

Hot Gloo

Hot Gloo is an easy to interact with Flash web-based wireframing application. You can fully develop a websites prototype with ease, and functions such as drag and drop, preset elements, grids, layers, snap to grids and much more contributes to how easy it is to use. Once you sign-up you will also receive a custom Hot Gloo URL so that you’re able to share your mockups with anyone such as clients and colleagues. Apart from the URL the free account comes with the capability of sustaining one worker and a co-worker, anything over that is $14/month.

Mockingbird

Mockingbird is a popular tool for creating mockups and wireframes. It allows you to easily create, preview, link to one another, and share all of your mockups with whomever you choose. Mockingbird comes with beautiful features that include snap to grid, drag and drop functionality, unlimited page linking and much more tools that’ll make your development process run smoothly.

Pencil Project

This next tool is actually a very useful Firefox add-on that lets us make detailed diagrams and amazing user interfaces. The Pencil Project add-on comes with a variety of features such as multi-page documents, on-screen text editing, rich text support, background pages, the export of HTML, PNG and Openoffice formats.

ProtoShare

PhotoShare provides an easy to use and collaborative tool that allows the creation of dynamic projects requiring prototypes and wireframes. Doesn’t matter the size of your project, seems like PhotoShare is able to accommodate most of your needs. The user interface is subtle, doesn’t seem to be way too over crowded, and it gives you ample space to work.

Balsamiq

Balsamiq is an interactive wireframing tool that feels just like if you were drawing with a pen and paper, only a the web. Difference is with this tool you’ll have full control of elements allowing you to easily move or rearrange them. Avoiding massive pencil erasing marks on your paper that can cause confusion, this nifty tool will get the job done.

Flair Builder

FlairBuilder allows for rapid deployment of wireframes through the use of a cross-platform that houses various functions and useful features within a palette. This tool has what they call “built-in” comfort as you navigate through palettes and components swiftly. Their interface is drag and drop driven, has quick and easy preview options, and gives you a large space to design.

Cacoo

Cacoo is a great to work with online drawing tool that lets you develop various diagrams such as network charts, wireframes, and site maps. You can allow multiple users to access your prototypes and make changes or just simply view your progress, thus it ultimately makes a well collaborative tool as well. You can share your wireframes by email or by copy and pasting a code snippet and embedding them in webpages for everyone to see.

Serena: Prototype Composer

Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

MockFlow

MockFlow comes with an extensive online library of templates and presets that allow you to freely use them and improve the visual quality of your wireframes. MockFlow is free to use, however it’s premium version costs $59 per year (roughly $4.91/month) for an unlimited package that offers unlimited mock ups, collaborations, 500MB of storage, 30 revisions, export to PDF/PPT, real-time editing, team chat and more.

fluidIA

fluidIA is an emerging agile design tool for prototyping rich user interfaces. The big idea behind this experiment is whether we as interaction designers, IA’s, UX professionals and developers can create our own prototyping tool in an open way. fluidIA also provides speed, agility, amazing collaboration, and a rich interaction between the designer and the user interface.

Lumzy

Lumzy lets you create various prototypes of a website or an application that will function by adding events through your Lumzy control panel. This is a great tool that allows you to add interaction to a mockup, you will also get a hand drawn feel sketch as well. Create your mockups, share them with clients, edit with dynamic tools, and take advantage of the file versioning features as well.

GUI Studio Design

GUI Design Studio is a specialised software design tool for anyone involved in application user interface design, including User Experience Designers, Business Analysts, Developers, Project Managers and Consultants.

iPlotz

iPlotz lets you create wireframes that are clickable and you can navigate through. You essentially create/re-create the experience of a real-live website or application. Once you’re wireframe is complete, you have the option of sending out invitations so that others can come and critique your design.

OmniGraffle

OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click. Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable.

MockupScreens

MockupScreens is an interactive tool that lets you sketch screen mockups, showcase them, create a feedback system, and get the best results possible. Quickly visualize functions, embed them into your prototypes, and get a generalized or detailed idea of what your website or application will look like and how it will interact all before you even begin to code.

Your Turn To Talk

How do you create mock-ups and wireframes? I’m sure many of you start with a pen and paper, sketching ideas, but what tool(s) do you use? Please take a minute to let us know in the comments section below!

So today I’m going to show you 30 awesome blog designs that have killer typography and also do a well rounded job of making things look nice and also making things readable. I hope you enjoy the inspiration.

Inspect Element ↓

Burciaga ↓

Nuwomb Creative ↓

Down With Webster ↓

Brian Casel ↓

Looks Like Good Design ↓

Design Chapel ↓

I Love Typography ↓

All City’s Graffiti Blog ↓

Future Buro ↓

Comfort Brothers ↓

Brian Hoff ↓

AEXT.NET ↓

Creative Week ↓

How I Took It ↓

One By Four ↓

Stereo Super ↓

Abduzeedo ↓

UX Booth ↓

Gaby Castellanos ↓

Corking Design ↓

Curious Romain ↓

Web App Storm ↓

Pallian Creative ↓

The Visual Click ↓

Cuisine Saine ↓

Brad Ruggles ↓

The Swish Life ↓

Fubiz ↓

Westcoast Poppin ↓

And now we pass it on to you…

Do you run a blog that has great typography? Did you achieve this by using a good combination of web-safe typefaces, using the right weights, line-height, etc…? Or did you use something like @font-face or Cufón? Let us know in the comments.

But before we launch, we thought it’d be nice to give away an icon set. (you like icons, right?)

There is 30 128×128px transparent PNG icons included in this set.

Head on over to MediaLoot to grab the free icon set →

Right now, most websites are completely unsuitable for mobile viewing, taking 60 or more seconds to load and looking jumbled and confused as they’re squashed onto smaller screens.

Every day, however, thousands of people are releasing mobile versions of their websites and seeing greatly increased levels of traffic as a result. Unless you optimize your website for mobile phone users soon, you could be left behind by the competition. Creating a mobile-friendly version of your site sounds like a daunting task, but it couldn’t be easier to do. Using one of the excellent tools below, you’ll be able to build, host and launch your mobile site with absolutely no coding knowledge whatsoever.

1. MoFuse (from $7.95 per month)

MoFuse is one of the most popular mobile website builders around, which is unsurprising considering its excellent customizability. Visit the MoFuse website, click “Launch a New Mobile Site”, choose a mobile domain and insert your URL. Next, click on “Add Elements” to add dynamic and static content to each page. Click on “Layout” to transfer elements to your live site, dragging and dropping them to create the optimal visual arrangement before, finally, previewing your new site using MoFuse’s emulator, which brings up a mobile phone screen on your computer’s monitor. For bloggers, MoFuse is completely free and even easier to set up.

2. Mippin (free)

Mippin is an absolutely fantastic tool for those who want to mobilize an RSS-driven site. It doesn’t offer the same level of customization as MoFuse, but it’s much quicker to use and the results look great, every time. What’s more, your site will be optimized to work on over 2,000 handsets and the service is completely free. It provides users with basic analytics in reports, as well as the ability to earn money through mobile advertising.

3. Mobilize by Mippin (free)

Mobilize by Mippin is a terrific WordPress plugin, which automatically displays your blog to mobile visitors from your normal URL. Once installed, everybody accessing your site from a mobile phone will be automatically redirected to the mobile version. Photos are scaled to fit the horizontal dimensions of a phone screen and videos are converted to the 3GP format, commonly used on most 3G, 2G and even 4G phones.

4. Wirenode (free basic package)

At last count, 31,912 websites had been optimized for mobile phones using Wirenode, a tool which lacks the customization potential of MoFuse, but offers slightly more in this regard than Mippin. From Wirenode’s dashboard, users can configure their domain name, upload pictures, track visitors and page views and preview their site on an emulated phone. Wirenode’s simple Editor interface lets users personalize their mobile site with colors and images, and create, edit, rearrange and delete individual pages.

5. 2ergo (contact for a quote)

2ergo has mobilized huge organizations like Rightmove and The National Guard, creating mobile-friendly websites for them which look great and load quickly. 2ergo’s customers can choose to use the self-service mobile publishing and content management tool, Mobile Site Builder, or let 2ergo design a custom site especially for them. The latter, obviously, is the more expensive option of the two. 2ergo’s service includes automatic device and carrier detection, data capture and collection forms, an integrated ad service platform, real-time tracking and top-notch technical support.

6. Zinadoo (free)

Zinadoo is a really slick, free tool, which lets users build a mobile site quickly and easily. Users can make the most of Zinadoo’s web and mobile widgets, as well as its text and email services, to promote their site to an online and offline community. Furthermore, they can optimize their site for Google Mobile with keywords and tags, and upload videos using Zinadoo’s Mobile Video. As if that wasn’t enough, users can also gain access to Zinadoo’s online Business Directory and Mobiseer, a Web 2.0 service for organizing, tagging, sharing and managing favorite mobile sites.

7. Winksite (free)

Winksite is an excellent W3C mobileOK and .mobi standards-compliant mobile website builder which focuses heavily on the community element of website promotion and social interaction. It’s packed full of mobile-community-type features like forums, chat and polls. Users can use Winksite to create their own mobile portal for communicating with friends, sharing feeds and favorites. Users can also divert all of their texts, emails and Twitter messages to one mobile destination which people can interact with.

8. MobiSiteGalore (free)

MobiSiteGalore offers a mobile website builder, which can be used just as easily from a mobile phone as a computer. Its Quick Start Wizard, accompanied throughout by Help Movies, makes setting up a mobile website incredibly easy. Once you’ve added pages, chosen a color scheme, added content and checked your new site for compliance with ready.mobi standards, you can add items to your new site from the Goodies List. Goodies include click-to-call, add to phone book, Google search and links to PayPal.

9. mobiReady (free)

You can’t build a mobile site using mobiReady. What you can do, however, is test your existing site for mobile usability. Enter your URL and press “Go” to get free reports, detailing how well your site displays on mobiles and any potential problem areas. You’re even given information regarding how much people in different parts of the world are charged to view your site.

10. Google Mobile Optimizer (free)

Google Mobile Optimizer is the quickest possible means of transforming your website into one suitable for mobile user consumption. Navigate your way to google.com/gwt/n, enter a site URL and a lightweight version will appear, without headers, ads or images. It’s completely un-customizable and renders a minority of websites useless, but it’s a very useful bookmark for your phone.

Your Turn To Talk

I hope you liked this post! I’m curious to know which tools you use to create mobiles versions of your sites? What do you use for client’s sites? Please take a minute to chime in and let us know :)

Despite this ongoing growth in demand, the never-ending competition in the web design world can make it difficult to create a highly profitable business. Sure, thousands of designers carve out a comfortable business online, but the level of designers that are truly excelling in business is quite slim. There’s a big difference between a lifestyle business and an ultra-valuable one, and many designers who are currently enjoying a comfortable business want to push their business up to the next level.

These seven careers are best when combined with design knowledge. For any web designer that’s looking to expand their business, incorporate new avenues into their career, or merely experiment with something new, they could be the best places to start. From online side-businesses to long-term offline career options, these seven career choices can go hand-in-hand with an online design business.

Publishing

The publishing world is in a bizarre state. Book sales are steady and constant, yet they’re still nowhere near the huge sales that mainstream films and albums achieve. However, with new publishing platforms like the Amazon Kindle – and soon the Apple iPad – publishing companies are looking at new ways to get their content online, available, and in the hands of potential customers.

This is where design is going to come in. When books are viewed as more than just printed media, but as a full-featured digital product, the value of design is going to be raised significantly. Rather than focusing on the same old website design projects, a number of designers would be best off predicting trends in publishing and setting themselves up as digital book designers, cover artists, or even application programmers.

PR, Marketing, and Offline Promotions

Online and offline PR requires a direct understanding of what people do. Offline PR experts spend years predicting how their media contacts will react to a certain call, how to approach new clients, and how to secure deals and generate exposure for the people that they work with. These skills might seem entirely foreign to designers accustomed to working on a per-project basis, but in reality they’re not all that unusual.

Whenever you take on a web design project, you’re negotiating with clients and learning exactly what’s required. If you’ve worked with high profile clients before, you’ve even built up some knowledge of how media heavyweights operate. The ability to design and create marketing materials gives you a real advantage – the ability to baseline and start an online PR side business inexpensively.

Animation

Today, almost all animation is digital. While Pixar-style operations are outside the financial bounds of most marketers, almost all other digital animation is inexpensive and relatively easy to grow accustomed to, especially when you already have a level of design skill. While major animation can take millions of dollars in startup capital and years of experience, a wide range of online businesses are seeking basic animators for videos and company marketing materials. As a side-business opportunity, online animation is backed by a lot of growth potential.

Online Marketing

Speaking of growth potential, few online businesses have more potential to scale massively than online marketing operations. From affiliate products to Adsense websites, the world of online marketing is wide, miles-high, and packed with potential to turn a valueless website into a powerful advertising resource.

While most designers focus exclusively on delivering websites for clients, few dedicate their time to their own online projects. A client project might bring in one-off income and stability, but it rarely brings in long-term recurring income. Most web designers have more than enough knowledge to put together a powerful CPA-powered website, which can bring in long-term income far beyond that of any short-term project.

Application Programming

Applications have changed dramatically in the last ten years, and they’re still changing. Ten years ago, you’d fire up Microsoft Word to take care of any documents, Powerpoint to cover your presentations, and Excel to graph out how much you’d bill your clients.

Now, you can write your documents in Google Docs, create presentations in Prezi, and deliver invoices online through Billings or Freshbooks. Rather than being local and limited, applications are online, open, and very user-friendly.

This might seem like a curse for any designer, but it’s really an opportunity. Big business used to be focused around offline applications, and now it’s focused very precisely on online applications. Rather than focusing exclusively on websites, marketing materials, and visual projects for clients, it could be worth focusing on online application design.

Direct Sales

As Alec Baldwin so eloquently put it in Glengarry Glen Ross, sales is all about one thing – getting people to “sign on the line that is dotted.” While designers operate on a slightly different level and with a slightly different skill-set, we’re also salespeople in a way. We approach clients, deal with their needs and requirements, and ultimately push them towards a project that’s mutually beneficial.

We’re also salespeople in another way. When hired to create a commercial website, we’re expected to ensure that it’s user-friendly, commercially viable, and highly optimized as a sales and organizing tool. Google Analytics exists for a reason – to help us get the most from our commercial websites. In many ways, most web designers already have the mindset, knowledge, and application required to succeed in direct sales.

Webmaster – Own Projects

It’s never advantageous to run a business that depends on other people for revenue and success. While service businesses are an effective way to generate income, they’re also quite limiting. Almost all web designers have the skills required to create and control their own websites, yet very few put the time into creating their own portfolio of monetized websites.

Whenever you’re faced with a client drought and a shortage of direct work, don’t look at it as a lack of opportunity. The most successful web designers aren’t just designers – they’re webmasters too. A lack of short-term clients or ongoing work is really an opportunity to expand your design skills into different areas, primarily your own online properties. Dedicate some out-of-work time to creating your own websites, and in a year or two you could have some high-earning online properties of your own.

Your Turn To Talk

What do you think? Have you considered expanding your design business? In what ways? Please take a moment to share your thoughts with the rest of us. :)

More and more you see designers straying away from the traditional “design” at the end of their company name (ie: Some Name Design) and picking up one of the many words in circulation today (ie: Kick Ass Agency, Awesome Labs, Insane Creative, and so on).

So, with so many people using these name extensions, how original do they become when they’re put together with countless others who utilize the same name extension?

That’s what I hope to find out in today’s post. Below are sections that showcase portfolio websites that use the various names listed above. If you’ve got any to add, feel free to drop a comment and let us know – and don’t forget to let us know what you think about the use of these descriptive words in company names.

Websites That Use The Agency Name

HALO Creative Agency ↓

Red Interactive Agency ↓

Ola Interactive Agency ↓

The Other Design Agency ↓

Blue Ink Agency ↓

Websites That Use The Labs Name

PixelLab ↓

Mutant Labs ↓

Radium Labs ↓

Revelate Labs ↓

Pop Labs ↓

Websites That Use The Media Name

Riser Media ↓

NueMedia ↓

The House Media ↓

Jump Media ↓

New Business Media ↓

Websites That Use The Studio Name

The Solid Studios ↓

Zulsdesign Studio ↓

Full Fat Studios ↓

Frish Design Studio ↓

Miceli Studios ↓

Websites That Use The Creative Name

Phynk Creative ↓

Phunk’n Creative ↓

Steve Mullen Creative ↓

iHook Creative ↓

Armada Creative ↓

Websites That Use The Interactive Name

Davier Interactive ↓

Unit Interactive ↓

Rockfish Interactive ↓

Tracermedia Interactive ↓

Lift Interactive ↓

What I Found Out

I found out that a couple of these names are still much less common than others. The most used (from what I’ve seen while researching this post) is that the STUDIOS name is the number 1 used name out there right now. Coming in a close second is MEDIA. The next in line are all of the Creative websites out there.

Another thing I noticed was that some websites are utilizing a combo of the above names, which seems a bit overkill in my opinion. I think by doing that, you’re grouping yourself with two separate groups of design names, thus making your site twice as common. But maybe that’s just me.

What Do You Think?

We would love to know your thoughts on the topic – are these names becoming another cliche that the design community uses (similar to the 3d rounded tabs, bokeh effect and other trends in web design)? Or are there reasons for using those names?

I’m very curious to hear your thoughts on this. Does your company uses one of the above mentioned words? And if so, why did you go with that instead of another word? :)