Web design skills are an important skill to have especially in this modern day and information age.

Most people who spend a lot of time online at one point or another find themselves contemplating doing some web design work either for themselves or for others.

Web design is a skill set that encompasses:

1. Designing the visual interface of a website
2. Designing web graphics
3. Designing the user experience
4. Authoring
5. SEO or search engine optimization

1. Web Design vs. Web Development

Image credits: Adham Dannaway

Many people confuse web design and web development. The differences are as follows:

1. Web design focuses on the feel and look of a website while web development focuses on creating the back end of a website.
2. Web designers use JavaScript, CSS and html as their main tools while web developers use ruby, C, Python, PHP and .NET as their main tools.
3. A web designer is more artistic in his skills while a developer is more technical or a linear thinker.
4. As a web designer, you have to be competent at color scheming, information flow and graphic design but as a developer, you should have mainly hands on programming skills.
5. Web designers are more about creating a user experience that is appealing to web surfers while web developers are more involved in creating the user interface.

The above distinctions should be able to clear any confusion as to what the differences are and direct you towards your desired goal.

2. Learning Resources Used by Web Designers

If you want to learn web designing, there are several resources that you could use to help you get up to speed with the required skills. The main online and offline resources that you will find to be great include:

• Several websites, both paid and free, including CodeAcademy, W3Schools and many more
• Videos, including free YouTube channels or paid versions of video tutorials
• EBooks in pdf, epub and mobi formats
• Webinars and one-on-one training online from professional web designers
• If you have a friend or family member who knows web design and can teach you, this may be the fastest path to becoming a web designer

Once you have identified the resource that you will use to learn web design, schedule time to be able to learn and to practice.

Depending on how busy your day is and what resource you will use, you could also accelerate the learning process depending on how quickly you understand the concepts taught.

Depending on the tutorials that you choose to learn from, the main software’s you will use could be either free versions or paid for versions.

Do not let the paid-for software’s that you have heard of limit your quest to learn web design. You will find that there are many free software’s out there that are as good, if not better than some software’s that cost hundreds of dollars.

3. What to Study

1. HTML should be where you begin your path (of course after getting through this information). You will need to master the language including the use of tags, inputs, IDs, classes and so on.
2. Cascading style sheets, commonly known as CSS, usually go hand in hand with HTML. To use an analogy, if HTML is the cake, CSS is the icing. CSS makes the website colorful and more appealing aesthetically.
3. jQuery and JavaScript will be useful if you want to add widgets to your site such as a calendar or a calculator.
4. If you find that you have time for a little bit more learning, you can get yourself acquainted with some web design skills such as PHP, Python, Ruby and MySQL. These skills will be essential if you want to build a large interactive website.

Remember to pace your learning. You don’t want to turn your excitement and enthusiasm for web design into a mundane and boring task. Burn out can happen if you don’t rest enough and pack in too much knowledge too fast.

4. How You Can Apply Your New Skills

Once you have learned the skills, there is no better way to internalize your new talent than to actually put it to practice. To do so, embark on a project. Below are the logical steps in the progression of projects you should take up in order to learn web design and be able to practically use it.

1. Make that website you always wanted to make. You know…the site that got you so excited about what you could do with web design skills. See if your current skillset can get you close enough to your vision and go back to your tutorials to better understand how to implement your skills to create your vision.
2. See if your family and friends need a website and help them create their vision and put it online. This is quite helpful because it will help you think about timelines and put enough pressure on you to start taking projects seriously as you learn.
3. After you are successful with your family/friends website, the next logical step is to find someone that will pay you to design a website for them. There are several online platforms that bring together people who want websites designed and web designers. They will actually pay you to do this work for them.

After you do each project, put together the code that you used and turn it into a favorite’s collection. This will help you do the work faster every time you have to implement the same code. You may also be able to put together a library, good enough that other people will want to purchase it.

You are now ready to put together a professional website.

5. Designing a Professional Website

If by this point in time you find that you are intimidated by the process of creating a website or the work is too important for you to do on your own, consider getting professional help.

A great place to start is online from a site like BigDropinc.com. They provide expertise in web design, branding, marketing and animated videos in order to give your website a personal experience to your customers.

If you feel confident enough to take up the challenge of designing a professionally done website, or if you are not intimidated enough to try put your skills to a real test, then read on.

Step 1: Decide on your design path

You could either use the library of favorites that you began collecting earlier or you could start by using a premade template, the choice is yours.

Pre-made template sites or codes could be purchased online. Choose from a portfolio that you find appealing enough for current and future tasks.

Choose from a vendor that provides good support for their pre-made templates and codes. This is important because you will edit or implement the pre-made code and design for your own needs, and if anything goes wrong, you will want to have help close at hand.

Step 2: Design Considerations

Whether you choose to use your own code or someone else’s code or templates, remember that you want:

• 1. A streamlined web page: Your site should be very fast to load and easy to use. Depending on the purpose of your website, you want to avoid having a website that takes too long to load. People are usually not patient to wait for a site to load if it’s taking too long.

  The site should also be easy to navigate with a clear intuitive menu and as few choices as possible for the web users.

  Use images with small optimized file sizes to keep a good balance between speed and quality of images.

• 2. Website elements should be well placed: The websites text, title, logos, sidebar and graphics should be placed in the same place on each page of the website to avoid confusion and enhance intuitive navigation.

  Logically organize your page elements so that there is a flow in the content from the most important information to the least important information.

  You should also avoid elements such as tables because the content in tables is not easily accessible to visually impaired people who need to use on-screen reading software.

• 3. Be consistent in your style: Thematic harmony is important for your website. Use a maximum of three colors and make sure that they blend well. Here is where the CSS skills that you learned earlier will come in to help you manage the style of your website across all pages on your website from a single pages code.

• 4. Make your text easy to read: If you have very long paragraphs or text with a very small font, most readers will ignore what you have written.

  People gravitate towards what looks easy to absorb and this usually means text that is large enough to read and information broken down into bite sized chunks that can be easily digested and absorbed.

  Use sub-headings, bullets and numbers to itemize data that is listed or to differentiate information that you want to highlight.

• 5. Browser compatible: Your audience will use different web browsers to access your website. You should ensure design elements are accessible in the same way using the different browsers.

  This means that if you have to avoid plugins, features and other code that is not universal to all browsers then do so.

  After designing your site with the above considerations in mind, test it. Ask a member of your websites target audience to go to the site and give you feedback. Use the feedback to improve, change or remove what you have to.

Step 3: Designing with mobile Devices in mind

These days most people consume content though mobile devices and tablets. With this in mind, you should design your website so that it can easily and intuitively adjust between desktop versions and mobile versions, or create two different sites for the different users.

The following are considerations for web design for mobile devices:

1. Have a look at how other web designers have implemented mobile content and use a model that will suit your needs and those of your audience.
2. Keep your site simple and avoid complex structures including tables and flashing graphics.
3. Use a design that easily morphs intuitively from a desktop version to a mobile version and from a larger screen to a smaller screen.
4. Avoid web design features that are not supported on mobile devices unless you will have a separate mobile and desktop version for your site. Flash, Pop-ups, java or frames will make your content impossible to view on a mobile device.
5. Sometimes you may find that a mobile app will suit your needs better than a mobile website. Consider your options to better suite your needs and those of your audience.

Most importantly, when borrowing from other designers work, or if you need to use content such as images, videos and articles from other content creators, be sure to observe copyright laws. Be ethical and stay on the right side of the law when putting out content that other people will view online.

There are several websites that you can access content from for free and these sites have requirements and conditions that they will need you to meet to use their content. Other sites are paid for sites that give you access to their content for a fee. They will also give you guidelines under which you can use their content.

Alternatively, you could use content that you create by yourself. This often is the best option for content creators who want to offer information that is personalized to what they require.