$0.00
$0.00
$0.00

100+ step-by-step resources to go from Padawan to Webdev Knight

Blog, DealFuel / By /

Being a web designer is more than knowing how to slice layers in Photoshop and hacking code with Bootstrap. Yes, those two are important but there are many other stages that a site goes through before it’s ready to join its siblings on the WWW.

This illustration by John Furness shows the successive steps that a site goes through, from the first client meeting, to the research, wireframe, mockup, content generation, coding, testing and lastly, launching stage.

In this article we put an overview of each step along with hand-picked resources to help you achieve it. We’re going to give you not only Photoshop and coding tutorials but also advice on how to negotiate, how to write content, how to use wireframes correctly, how to optimize your site for search engines and other topics pertinent to each stage of web design. Put simply, if you’re just starting out and you haven’t got your first client yet, this guide will give you all the knowledge you need to go out there and close that first deal.

Ready? Let’s get started.

planning

Needs Assessment

On your first meeting with the client you want to assess their needs, or why the heck they contacted you in the first place. On first look, this might seem obvious. “Well, they need a website, duh!”. However, with most clients, it seldom is that simple. Why do they need a website? Don’t they have one already? Is there something about the current one that could be improved? Will their business really benefit from having a website or is there more to the story? Professional web designers have developed a standard list of questions that they ask each new client. This allows them to accurately assess the client’s needs. To simplify your work and streamline your workflow, we recommend that you do the same. Here are the most important questions to ask:

  1. What is the goal of the website? Is it to sell stuff? Is it to get people to call a certain phone number? To make prospects fill out a certain form (to be contacted later)? Inform prospects about your products or services? Keep current customers up-to-date on the latest news about a product? A combination of these or none of the above?
    The client should have a couple of ideas as to what they want their site to achieve. Make sure to note each down and sort them by importance. As a designer, it is your job to devise a solution for these needs.
  2. Who is the intended audience? Who will be using this site? Write down the age, gender, profession and other demographics that are relevant to the main goal of the website. Depending on this, you will make the decision on how to order the elements of a page, what colors to use, typography, what content to create and so on. You’re catering to a certain audience and you must be as persuasive as you can be to get your message across.
  3. What content is going to be on the site? From blurbs to full-blown articles, images, videos, audio and other types of content – all of this constitutes the meat and potatoes of the site. Who will be providing the content: you or the client? If it’s the client you will want to set deadlines: clients are notorious for procrastinating when it comes to content. If it’s you or someone on your team, we have a couple of links below on how to write (and outsource) great content.
  4. Do they have any specific requirements regarding the look & feel of the website? Perhaps they’ve seen another site which has a similar look to the one they want – let them give you some examples. Do they have a logo? Do they have the Pantone numbers for the logo/company colors (so that you can use them in your design)? Is there anything they’d like to avoid in the design?
  5. Do they want to be able to write their own stuff (news, updates), upload their own products, images and so on? While some clients won’t ever need more than 3-page static website, others will require the ability to edit and create new content, upload images and so on on a regular basis. In such cases installing a CMS like WordPress should do the trick. A dynamic site can also be a good way to make the client sign-up for a monthly maintenance fee. This, when multiplied over a number of clients, can prove to be a worthy source of almost-passive income.
  6. What is their budget? Arguably the most important question, the answer to this will tell you how serious the client is and allow you to ascertain whether the two of you are a good fit. Smaller clients will often have lower budgets – which is to be expected – but this doesn’t mean that you have to work for peanuts either. With corporate clients you will find that money generally isn’t an issue, so they won’t mind quoting them double your standard hourly rate (just don’t tell them… m’kay?).

These are some basic questions that should get the ball rolling. As always, make sure that you’ve got deadlines in place. Compile the answers in a document and send a copy to the client for review & approval. To get even more specific, see these 72 questions to ask web design clients (asking them in a row, in a low, monotone, robotic voice might be counterproductive though).

What about the contract?

Working without a contract is asking to get burned. Always make sure that you’ve got a solid contract in place and at least 1/3 or 1/2 upfront payment. The best time to send the contract is right when you send the needs assessment file for review.

  • Paul Jarvis uses a template that is easy to read and gets straight to the point. Adapt it to your own projects.
  • The folks at Pelago put out a full-blown contract that is based on years of working with clients as a web design company. This one’s longer and contains more legalese, but if you want something that says “we’re serious”, you can’t go wrong with this template.
  • Web Design Law has also put out a collection of web design contracts, from the letter of agreement, to project proposals, terms & conditions, invoice form and so on.

Pick one, adapt it to your needs and then make them sign it.

Don’t start working until you’ve got a signature.

The traditional way is to meet with the client and have them sign two copies of the contract, one of which you will keep.

Another option is to send the signed contract to the client and have them sign and return it by mail. This, however, can prove disadvantageous as the client can delay signing the contract which can hold up your work on the project.

Are there any other options? Yes.

  • RightSignature is a service for filling out and signing documents online.
  • HelloFax is a service that does away with the need for a fax machine.
  • There’s also a number of apps for Android and Apple devices: DocuSign and
  • SignNow.

How much should I charge?

How am I going to get paid?

Where can I find my first client?

Research

Don’t worry. You won’t have to wear a lab coat (unless you want to), handle acid flasks or peek at bacteria from under a microscope.

Research in web design is important because that’s where your real design is born. Research is what separates designs based on guesses from those built on facts and objective observations. As a result, research-based design is much more likely to help the client achieve their proposed goals and satisfy the user’s needs.

Giving exact instructions here is somewhat challenging since each new project will have different goals but to start off, we recommend this chapter on Research in Mark Boulton’s Designing for the Web book (the rest of the book is a must read as well).

Other resources that should point you in the right direction:

Site Outline & Map

The site outline is a a precursor to the sitemap. Creating an outline means sitting down with your client and creating a list of all the content that has to be on the site. All of this must be aligned with the goals of the website that were established in the beginning which means that some content will be more important while other pieces might be trimmed or discarded altogether. Once you’ve got an outline you can start plotting out the sitemap.

 

Wireframes

Wireframing is the process of defining the information hierarchy of your website, planning where an element should be placed in a page, according to how you want the user to process the information. Wireframes are like the blueprint of a house. It’s much easier to build a house when you know exactly the dimensions and placement of each building.

See how others use wireframes

Other UX and UI resources

Design also includes user experience and user interfaces. To craft great products you have to start with the user in mind: how can he satisfy his needs in the most efficient and straight-forward way possible. If you do that, users will reward you with loyalty. Here are a number of courses that will get you initiated into this crucial facet of design.

 

content

Content is just words on a page…right? Not so.

Good content spurs the visitor to take some kind of action. Bad content will confuse and irritate him, ultimately leading to a negative action, like leaving your website. Because of this, content is arguably the most important part of any website. Even a website with no design but loads of information will be useful to the user. It’s the reason why a user visits the site in the first place.

Even though as web designer/developer content creation isn’t really your responsibility, having some copywriting basics down will make a huge difference, not only in the things you write, but also in your communication with the clients and other people as well. If it’s your client or someone else that is writing the content, refer them to the links below.

design

We’ve now reached the part where you can finally fire up Photoshop and get to work. However, you won’t really be creating the design from scratch: by now you should have a couple of wireframes to guide you in how to lay out the pages of your site.

Lessons / courses

These courses will give you the same essentials that you would learn in design school. Good to have a strong basis.

Tutorials

Mastering Photoshop is a trial & error process, but you can accelerate that by looking at step-by-step techniques on how to create graphics and wholesome website designs.

Aids / PSDs / other things to ease your job

As you begin getting better at this thing, you will slowly create your own library of bits and pieces to reuse throughout projects. Creating things from scratch isn’t always the most efficient way to go about things. Tweak and reuse as you see fit.

Colors

The design courses above have already covered the use of color. But what is a good way to come up with color palettes? These are sites and tools that will give you a dizzying array of matching colors and effective color suggestions.

Typography

Typeface or font? Helvetica or Arial? Serif or sans-serif? Humanist or geometric? What is kerning? What is the cap height?

Knowing how to work with typography is required of every designer, web or not. Give your content the typeface it deserves.

Learn how to use typography

Free typography resources

Photos

You can’t put just any stock photo you find on a website. There has to be some criteria for selection besides good composition and high resolution. We think this guide on photo selection for web designers nails it down quite nicely. After you’ve read the article, you’ve got two options: free or paid stock photos.

Here are some of the best resources for quality, free stock photos. These sites offer photos that can be used in commercial projects without attribution, however some do require it.

Inspiration

“Good artists borrow, great artists steal.”

Although we don’t recommend lifting these designs right off, looking at other’s work should give you plenty of inspiration for your own.

development

This is where the logical part of the brain takes over. The part where you put the pedal to the metal, so to speak. A good design is just an image until it’s been put into code. Here’s how to implement a design, from Photoshop straight into your favorite code editor.

Tutorials

Here are individual tutorials that will teach you how to get a smokin’ design from Photoshop into cold, hard code. Fire up your favorite editor and follow along.

HTML & CSS

Tutorials are good but knowing HTML and CSS in-depth goes a long way to sharpening your web design skills. If you’re starting or you already know these, the links will refresh and hopefully improve your knowledge of the web’s building blocks.

Javascript

Animations, pop-ups, AJAX and JSON. The new web and Javascript are indispensable if you want to make a site that is interactive and useful to visitors. With HTML5, you can use Javascript to replace Flash altogether.

WordPress

There are many CMSes out there, all good and useful for their respective target demographics. But we have yet to find one that is as easy to use and powerful as WordPress. It’s also very likely that your clients will want to have a CMS to upload content on a regular basis. Why not get used to the basics of working and creating themes for WP from the get go?

Workflow

How do other web designers work? How do they prioritize tasks and what is the first thing they do? How can you be more efficient and create awesomer sites?

The answer to these questions lie in watching the masters at work.

Version Control

You need to keep track of the changes you make to your code. That’s the purpose of version control. The most popular with designers right now seems to be Git and is an excellent free solution for starters. As an alternative, there are other (paid) services that provide version control catered to creatives in particular.

Cross-browser testing

Using a modern CSS framework like Bootstrap eliminates much of the hassle that was previously part of a web developer’s job. While there have been many significant advances made in this area, you still have to check out how your design looks across different browsers and devices. Here are a couple of tools to help you do that.

launch

Launch day is here. Are you ready? If you went through all the previous phases, you should be. This stage involves setting up the server, uploading all your production files to the main site and double-checking that everything is in order and running smoothly. Some small tweaks and adjustments to the site might be needed at this stage.

How to migrate your WordPress installation from local server to live site.

Website Launch Checklist

Don’t launch without going through this list at least once. Printable sheets available.

When to Launch?

Before you launch and hand off any project files, passwords and other materials, make sure that everything has been signed off and all outstanding payments have been settled. If you don’t do this, you are basically letting your client decide whether he should pay you or not. As we emphasized in the beginning of this article, don’t start and don’t hand off any finished work until the contract has been signed.

Now on to the technical aspect of this question, we recommend that you launch on a work day, from Monday through Thursday. Avoiding the end of the week will save you headache if something goes wrong while you’re away.

Search Engine Optimization

Once your site is online, you’ll want to do a little SEO to help your content get discovered and indexed. This means you want to get your page titles & descriptions right, have the proper URL structure, make sure your images have ALT tags and have your keywords present in your headlines, descriptions and copy.

Closing thoughts

By now, you should have a finished site that is alive and kicking and a client that is (hopefully) satisfied. What else?

Analytics

You might want to install some kind of analytics solution to get data on how your visitors are interacting with your site and design.

Backups

Keeping regular backups isn’t hard. All you need is to setup a solution that will do so on a regular, hands-free basis.

Other stuff

Much of this stuff might take a lot of time or not make a lot of sense in the beginning. Our advice? Keep plugging away. The web will always need people who can craft products and sites that are useful and effective. Help our visual and informational ecosystem by perfecting your web and design skills further. Incidentally, as you get better your hourly rate will also jump through the roof.

Was this helpful? Share it forward 🙂

We would love to know what tools and resources you personally use. Is there something we left out? Let us know in the comments!

[greedy_subscribe]

Leave a Comment

Your email address will not be published. Required fields are marked *

DealFuel

DealFuel is a deal website for cool tech deals & amazing offers for web developers, designers, marketers, businesses, bloggers & freelancers. It is packed with superb themes, plugins, graphic bundles, Lightroom deals, website & SEO tools, Software, e-courses, web hosting deals and more.​

DealFuel

Support

Feedback

Follow Us

Follow us via social media to receive our latest updates

Facebook-f Twitter Instagram Pinterest
Scroll to Top
Please enable JavaScript in your browser to complete this form.

Need Help: Contact us at [email protected]

refund success

Thank you!

Your refund request has been submitted.

The DealFuel support team will contact you within 24 hours.

Please wait while we are fetching your order details ...