Tag Archives: web-design

Mockups Software

Add to iTunes | Add to YouTube | Add to Google | RSS Feed

Not long ago, I was talking to my friend Brent Spore, who happens to be an amazing designer. I helped sponsor his PodCamp Arizona recently, and he wanted to do a favor for me in return. Knowing the quality of his work, I was all over this offer! I needed a single web page where people can go to read more about me, and go through a simple PayPal form to pay me to coach them. It would be like an on-demand consulting type of thing, for whatever type of help I can provide.

I had trouble explaining to Brent what it was I wanted the page to look like. I needed a white-board of sorts, so I could show him where I wanted things to appear on the page and how I thought it should look. I couldn’t draw it out on a piece of paper, though. Thankfully, I was able to use mockingbird to illustrate for me!

Mockingbird is a free service. You don’t need to register to get started, but you do need to register (still free!) in order to save your work and share it with others. You’re simply going to be dragging and dropping different elements around until you get them exactly the way you want them. You’ll have just about every possible element you can think of, waiting for you to drop them onto your design.

If you have a good idea of what you want your page to look like, you can use mockingbird to show your designer. Clue them in, and make things easier on both of you!

It can save you time and money by helping you figure out what you’re looking for, before you pay someone to create it. Satisfy your clients by showing them clear mockups of what you’re working on for them.

Mockingbird is so easy and fun to use. I could do this all day long!

Want to embed this video on your own site, blog, or forum? Use this code or download the video:

How to Make Money With Web Design

Geek!This is Ashmiester’s submission for the HP Magic Giveaway. Feel free to leave comments for this article as you see fit – your feedback is certainly welcomed! If you’d like to submit your own how-to, what-is, or top-five list, you can send it to me. Views and opinions of this writer are not necessarily my own:

Do you want to make money with web design? Almost every organization has some kind of web presence on the web today. Does that mean there is no room left for new designers to get into the business of designing bespoke websites? No. In fact, it is a good thing, because a huge fraction of the existing websites out there are full of issues including bad design and technical errors. This can be for a majority of reasons with any bad website; perhaps the buyer was on a low budget, made it themselves with little experience, or just got completely ripped off by a bad service.

Whatever the reason, this opens a door for designers to do website redesigning. This is not much different from designing a website for a business that does not have one. The only difference is that it can be a bit easier because at times you will be transferring content from the client’s old website, or perhaps using an existing structure. I would say around 80-90% of my clients already have some kind of web presence, and they are at a stage where they are willing to spend some real money.

Getting Started

As long as you have some kind of skills in creating websites, you can absolutely do this. And you know what? Even if you do not have any website creation skills, I have provided some great resource links at the end of this article for those that would like to get started on the skills necessary for this lucrative industry. The first time I was paid to make websites, I only knew the basics, and then the more I did the more I improved. It is actually not that hard becoming a web designer, all it takes is some time commitment. It is good to start off learning HTML, CSS, and some basic interface graphics. Scroll to the bottom if you would like to check out the learning resources right now. Otherwise, read on.

A Safe Investment Opportunity

A great thing to keep in mind is that web design can be such a low-investment business opportunity as long as you go about it the right way. The only costly things tend to be some of the one-off costs, such as having the right software and actually having a computer to work on. I am not saying that these do not need upgrading ever, but to me a one-off cost is something where you are not paying for it on a recurring basis. Here are a couple of important tips on keeping this all a safe investment:

  1. Work from home. At least to begin with. It means you are saving money on the rent and bills involved in having an office. In my experience, it is best to start small because you then do not have to put as much funding into things that are not so necessary to have right away.
  2. Buy cheap but quality hosting. This is done by finding a small package offered by a reputable hosting company. I use the smallest package at www.1and1.com, because it is all that is needed for the hosting of a web design company’s website. It costs $3.99 per month ($23.94 per 6 months) and includes a domain.
  3. You do not have to quit your day job (if you have one) straight away. You can start by doing the odd project here and there while you are still employed. I actually do part-time studies and work full-time with my web design business. I love it, and I would not have it any other way.

Name or Business Name?

You have two choices, you can work as a freelance web designer under your full name, or you can operate under a business name. In my eyes, the latter is much preferred. Freelancers can be awfully undercut these days; you are more likely to make good money as a business. Not only will people take you more seriously but there will be the opportunity to get staff or partners later on if you so please.

The first thing you need to do is secure a .com for your business. Having a .com is pretty standard, I would ignore .net and .org if I were you. You can always have them additionally later on if you like. When thinking of a business name, do not try to be too smart with it. "[Something] Designs" or "[Something Media]" are the kind of names that give people an idea of what your business does when they hear the name. What goes at the front does not matter too much as long as it is not particularly ridiculous. It is also more appropriate on a corporate level if you eventually get some big-time contracts. Create a shortlist of the names you have thought up that you like, and see what is available for domain registration (I use GoDaddy).

If you are having trouble thinking of a business name, you could, for example, try combining colors with animals. Black Crow Designs, Red Wolf Designs, Purple Monkey Media (or not). You do not have to worry too much about thinking of a name, because it is your service that will be defining your company’s quality.

Setting Up Your Web Presence

Whether you are looking to deliver to clients locally, across the country, or all over the world – you need to have a home website for your web design company. The website is to show information about what the company does, what work it has done (a portfolio), how you can be contacted, what services you specifically offer and what the prices are. There are other things too, such as providing the general terms for contracts and the payment options. The more details, the better. But don’t cram your website with too much, keep things neat and spaced appropriately. This website is going to be a big part of selling yourself, so it should be a breeze to navigate and read.

Also, the design and layout are going to show what you are really capable of (besides your actual portfolio). And make sure you have a nice and recognizable logo in your header somewhere. If the website looks bad then you could be losing out on a crazy amount of business. So put your all into making it look great!

Putting a Portfolio Together

So, are you wanting to get into web design business but lack a strong portfolio to get people interested in your services? I will be honest, this will take some work if you really are at square one.

Do not worry, you can rapidly build a portfolio by doing some free websites for businesses, bands/musicians, artists, freelancers, etc. These are also the kind of clients you can get paid business from in the future. And while you are doing work for free, you are in return getting the experience of working for clients and having something to put into your portfolio on your company’s website. Once you have built these sites, you can charge money for any maintenance they would like from you in the future. They just got a free website from you, so that is completely acceptable.

Getting Clients

To be honest, getting clients is not actually too difficult. Back when I wanted to start my own web design company, people would tell me it was a bad idea because there would be “dry patches”. This means going for a while without any business. Put it this way: if you put effort into marketing yourself effectively, you will absolutely get clients. Before I learned to become more organized, I had queues of clients that I just did not have the time for. This excited me though. I really enjoyed marketing myself because I believed in what I was trying to sell. I truly believed that my potential clients needed my services in order for them to further their business, and I still do believe that.

The best way to start getting clients is for you to find them, rather than them finding you. It costs a lot of money advertising for people to come and find you, so do not worry about spending that kind of money just yet. Here are some tips on marketing yourself effectively at low-cost:

  1. Get some business cards printed. I started by getting a few hundred printed for cheap, with my company name and business logo on them. Include important details such as your own name, along with your cell number, e-mail address, and of course the URL of your company’s website. I used cardsmadeeasy.com as I am based in the UK. If you are in the US, uprinting.com has some good value printing services. 1000 cards for $25 is pretty awesome.
  2. Walk into small businesses of any sort and tell a member of staff who you are and what you do, then just leave your business card with them. If they show an interest and ask questions, give them as many details as possible. And remember, you are selling yourself, so give them the reasons why your services will benefit them greatly. You may get their business there and then, or you may have to wait for a call. Do this to as many local places as possible, especially independent businesses.
  3. For potential clients that are not based quite as close by, write a short letter explaining your services just like you would face-to-face, then mail multiple copies, with a business card, to places that have bad websites or perhaps even no website at all. I got a good few clients by doing this, but the only downfall is that they may want you to travel to them if they do business with you. That is why local clients are best. It can be very worth it anyway though, especially if it is someone paying you a lot of money.
  4. Referrals. Ask all of your friends and family if they know anybody who needs a website doing. Hand out more business cards and tell them to pass them onto people. If you are not getting results, then put a twist to it. Offer potential referrers a small percentage of what a client will pay you if they find that client for you. You could offer around 5-10% depending on what you are being paid. Advertise it on your website too. This is useful for getting those first paying clients in, but to be honest I still use this method today because it does get me good business, and word about the company spreads.
  5. Similarly to the above, you could do a special offer that is to take place for limited time only. You could offer 10% off of any quoted price, or something like $50 off with a promotional code. I now only do this with some of my fixed-price services, such as website packages and my hosting services. These kind of things are really great for drawing customers in, trust me. We all love discounts.

Be Prepared…

I have met some great people through my design business, but there will always be clients that are difficult to deal with. To avoid clients walking all over you, make sure you put everything into writing if someone is going ahead with your quoted service. Also, take a deposit upfront. Usually anywhere from a third to a half of the full amount is a good idea, then they can give the rest during and after the development of the product. Or the rest of it could be put into the form of a monthly payment plan if the client is budgeting.

The last thing you want is a client refusing to pay for many long hours of your hard work. Yes, people can be this cruel, even if they seem very nice! So secure some money upfront before going ahead with the project.

Extending Your Services

Doing bespoke web design is great to start with and as your primary service, but why stop there? As you grow, your services can too. Why not also offer logo design, video creation, Flash animation, DVD authoring, media printing, or perhaps multiple-use web templates? How about buying reseller hosting so that you can provide a hosting service to go hand-in-hand with your clients’ websites? You can also look at offering services for certain types of websites such as e-commerce, database-driven websites, CMS (Content Management Systems), etc. You could do work for marketing campaigns. I have also seen design companies provide website management training at hourly rates.

There are so many possibilities in this industry which gives you the opportunity to make more than a comfortable amount of money. Just be sure not to offer too much from the beginning, because you may find that it is just too difficult to deliver. It may also mean more investing in one go.


Thank you if you had the patience to read this little guide, and more importantly, I hope you got something out of it. I think that anybody is capable of starting a profitable web design business, and to top it off, it is something that is so flexible it can be worked around your job or studies if you wish not to do it full-time.

If you have any questions or suggestions then please post a comment. Keep in mind that everything I have written is based on my own experience in becoming a self-employed web designer. Perhaps you disagree on a part of the guide due to your own experiences. If so, please do post a comment. Other established designers reading may well have other methods of becoming a good business. I am interested to hear.

Thank you again my precious readers, and good luck on your quest to making money with web design.

Learning Resources

Learning HTML/XHTML (Hyper-Text Markup Language) is definitely the first step. It is the code that structures and formats the appearance of a web page, and is particularly easy to learn and use.

Here are some great HTML guides to get you started. Plus a whole array of different HTML tutorials for once you get some basics down:

CSS (Cascading Style Sheets) is a very structured language for formatting websites more efficiently, also enabling more enhanced formatting. It is also easy to use. Here are some great CSS guides to get you started. Again, there is a ton of different tutorials you can try out once you have some basics in mind:

It may be worth investing in a copy of the latest version of Adobe Photoshop if you are serious about web design. There are some nice and basic web interface design tutorials at these links:

Free learning is the way it should be. Enjoy your learning experience.

WicketPixie WordPress Theme Screencast

I wrote about it yesterday when I initially rolled out this new WordPress theme, but now I’ve had time to make a very brief screencast that explains a bit more about it. You’ll see that there’s a lot going on behind the scenes. WicketPixie gives you:

  • Your own Activity Stream / Social Graph page
  • Your own Collected Favorites page / News Aggregator
  • An easy ability to change certain style elements
  • A high-quality Web design for your site
  • A clean way to present ALL your social profiles
  • The freedom to donate to future theme development
  • Gravatar support within WordPress v2.5+
  • The ability to use any feed source as a Status message
  • Areas optimized for advertising

Not bad for free, eh? I’m likely to use CC BY-SA 3.0 for the license, with the hope that a small group of enthusiasts can help me maintain and build it further.

Right now, we’re working our way through a few last-minute layout bugs (cross-browser compatibility). I’m considering holding off a public release until it’s been modified for WPMU and implemented for bloggers on Lockergnome – which I don’t know how to do, since I’m not a WPMU guru. If you know any experienced developer who can help with that part of the process, I’m all ears. Until then, this screencast should whet your appetite:

I really want to ask you this, before I make the files available for download: would you rather download the plain version of WicketPixie or the version I’ve tweaked for my own site (understanding that with the latter, you’d have to make more changes to the core templates).

Top Ten Tips for Web Site Design

Alec is a regular member of our live community. Recently, he sent me his top 10 list of tips to help you with good Web Design. Even though I wasn’t able to do a video on this email, I wanted to pass them along to all of you.

  1. Why? Why do you need a site? What do you need to do? Get more leads? Sales? Votes? Look cool? Will search engines be important? If you can’t answer, better wait until you have a strategic plan for your company overall.
  2. Audience. Before anything else, you have to figure out who you’re creating your site for. What are the 1-4 questions they’ll have in their heads that, if answered, will mean they’re going to call, buy, or take whatever action they need to?
  3. Architecture. Create the site map. The map shows how your site will be structured. It could be fancy and complex, or simple. It could be drawn on a napkin, even. Just so long as it provides a rational structure for your presence.
  4. Wireframe. Then show where stuff will go on each page. Think of this as a site map, but for each page (a page map?).
  5. Design. Create the pretty stuff. This is what most folks call ‘Web site design’. Notice that it’s step 4? A lot of thinking goes into this, making sure that the way the site looks fits the site’s role.
  6. Mockup. Take the design and turn it into a set of Web page templates that you can view in your Web browser. The mockup is the model for the site. It shows how drop downs will work, and how processes like checkout or information requests will look.
  7. Test the Mockup. Then test the mockup. Is it standards-compliant? Does it look good in all major browsers? Does it present the most search-friendly and accessible information structure to the Internet? This is the chance to test before you build the site.
  8. Add the Tools. If you’re using a content management system (CMS), then the developers go to work, adding the mockup templates to the system. If you’re collecting leads, they’ll build the database and code to handle that, too. Finally, they’ll make sure you’re equipped for analytics.
  9. Add the Content. Type in the content, lay out each page, and check for spelling errors, etc.. If search engine optimization matters, tweak the content for best keyword richness.
  10. Test, Test, and more Test. Test the site for errors (broken links, crashes, and server errors) and bugs (sneaky things that aren’t immediately evident, like, say, your shopping cart not storing the ZIP code on orders).

TopStyle 4.0

If you’ve been itching to get ahold of the next version of TopStyle for CSS editing, looks like you’ll have to itch a little while longer. From the official forum thread, Nick Bradbury weighs in on the Cascading Style Sheet fanatical discontent:

Apologies for not jumping in here sooner – I guarantee that while I’ve been quiet in this thread, I haven’t been quiet about making sure that TopStyle has a future. The delay in our response hasn’t been due to a lack of desire to create a new version, but instead a lack of time and talent (let’s just say that I bit off more than I could chew when I decided I could handle two popular apps by myself!). As Ronnie states, we’re still planning a TopStyle 4.0. However, there’s a good chance that someone other than myself will be in charge of developing it (I will, of course, still be involved in its design).

I use TopStyle for CSS editing, too – as does most of the working Windows world. No word on whether Microsoft’s new Visual Web Studio is any better (or worse) than TopStyle, though. PSPad comes with TopStyle lite, which enables me to quickly edit Cascading Style Sheets. For the most part, I can do simple CSS tweaks from personal memory. Still, I’m looking forward to new versions of TopStyle (the definitive CSS editor on the Windows platform).

Mnemonic Web Design

I’ve been in tweak mode for the past few days, getting this blog ready to duplicate for a coming Lockergnome project (based on MultiUser WordPress). In futzing with my CSS, I’ve had to enter values for positioning left and right (literally). You can define the spacing for margin-top, margin-right, margin-bottom, and margin-left separately – or you can define the spacing for all four (or less) in a single margin property. Employing “margin: 10px 3px 3px 10px” is easy. The trouble is, I could never remember which one was for which position! But I didn’t stay in TRBL for long. Top, Right, Bottom, Left – no trouble at all, so long as I can remember to keep myself in TRBL. Mnemonic devices are so nices.