The Noob Guide to Web Design

Web design is so much anchored on technology to a point that it is difficult for beginners to catch up, and if they even try to, it would be very difficult.

For someone who has zero idea on web design, this can be pretty frustrating.

You want to learn something new so you decided to try out web design. Because of this, you immediately looked for tutorials.

To your surprise, there are a lot of tutorials out there. However, browsing through each of those tutorials, you realize that these lessons are actually directed towards people who have designed websites before.

Your vibe dies and, eventually, you’ll just shrug your shoulders and admit to yourself, “Meh. I didn’t like web design in the first place.”

But would everything change if some article showed you the way? If just some tutorial kindled that small matchstick in your creativity, would you stop designing?

Of course, the answer to these questions depends on a case-to-case basis. However, things might have gone differently if you just saw great newbie guides to web design.

For non-web designers to want to try out web design, a noob guide would be great.

And yes, I’m going to give you one. So, keep your eyes glued in this article and let’s all start learning!

Learning Web Design

Since the Web has soared into popularity, interest in learning web design has also increased exponentially. Right now, there are a lot of people from different corners of the world who dream of building their own websites, and in the near future, earning from such activity.

This exponential growth dominoed into the increase of platforms and courses that guarantee you web design knowledge. There are blogs, forums and courses right here and there for your choosing. You just have to know which is the best one for you.

Here are a few avenues that may lead you to learning web design.

Web Design Schools

School-based learning is an alien term in the world of web design. Because schools have been traditional and often can’t keep up with the fast evolution of the industry, some think that they are already ineffective.

However, some people just find going to schools helpful.

This may play out to your advantage if you want to learn web design. With the popularity of the subject, you will always find a university that offers web design classes.

Going back to school might prove to be an effective method because it is more formal and systematized. It also teaches in a pace you can keep up with. However, if you are on a very tight budget, this is not recommendedbecause going back to college is not as easy as it sounds.

Reading

Of course, aside from sitting in a classroom, listening to some guy blabber about web design, you can learn while staring at the letters flashing through your computer monitor.

Reading is one of the many ways you can learn web design. Now that design blogs have become a profitable niche in blogging, web design resources, tutorials and inspirations have become easier to access.

The timeliness of reading as a way to learning something will always remain. As we live in a time where most people can read, it should always be the go-to method in self-instruction.

Although, some view it as a lesser interactive and entertaining way of acquiring new knowledge, some people find it the most effective one.

Some Resources to Check Out:

• HTML & CSS Book
• HTML5 Rocks
• 1stwebdesigner Blog

Video Tutorials

The prevalence of videos directed towards learning has been notable since the inception of video cameras. For such a long time, videos have become effective ways to teach and learn.

In the world of web design, video-based instruction is very popular. However, there are only a handful of tutorials that offer in depth and high quality teaching. The reason is, it takes too much effort, time, knowledge and resources to create instructional materials with the depth that everyone is looking for.

That may be the reason why some courses are pricy. There are some learning centers that also offer subscription-based learning where you pay a fee for a month to be granted access to a library of web design knowledge.

Resources to Check Out

• Lynda
• Tuts+ Premium

Web Design Jargon

A jargon is a special word or expression used in a particular profession or group and are difficult for others to understand.All professions in the world have their own jargons; web design has its own language too.

Here are a few web design terms and their meanings:

• Anchor Text

An anchor text is the text a link uses to direct to your website. Anchor texts play a big role in increasing and optimizing your website for search engines.

• Back End

A website’s back end is a facet of the website not visible to regular visitors. It includes information, structure, applications and Content Management Systems that controls everything within the website.

• Backlink

A backlink is a link attached to any element within another websites page that links to your own site. Also known as track backs, these links play a great role in increasing your site’s web search engine ranking.

• Bandwidth

Bandwidth refers either to the rate the data can be delivered or the total amount of data transferable from a web host on a given time. Measured in bits-per-sec, kilobits-per-sec and other metric measurements, bandwidth can affect how fast your website loads.

• Bounce Rate

Bounce rate refers to the number of people who browse your website without clicking any other page. This percentage commonly reflects the beauty of your website navigation and content. When your bounce rate goes high, it would only spell something wrong.

• Breadcrumbs

Breadcrumbs refer to the small elements found in the website’s navigation. They commonly appear near the top of the webpage and shows the pages, sub-pages and other directories the said page is placed. Example, in a website’s breadcrumbs, you see: Home>Blog>Web Design>Inspiration>Post.

• Cache

Cache are files that are saved, copied or downloaded from the website by your browser to increase the load time the site is visited, it will load faster.

• Content Management System

CMS as it is famously known, these are backend tools for managing a website’s content. It also separates the content from the design itself and the functions.

• DNS

A DNS or Domain Name Service’s main function is to convert your IP address into domain names. DNS servers are commonly provided with the IP of your website when you purchase a web host.

• e-Commerce

Electric commerce or e-Commerce refers to the usage of websites to buy or sell goods. Transactions in E-commerce websites can be physical services or products delivered using email or direct download.

• Em

An em is a unit used to measure fonts and other web elements within a webpage that relates to its parent. 1em is equal to the point size for the font defined within the parent element.

• Fold

The fold is the point on the webpage that is shown initially. Anything that you see below the fold are the elements you see when you scroll down.

• Front-end

A website’s front-end refers to the components of the website that the visitors see. These are pages, images, content and UI.

• Hexadecimal

Hexadecimals, also called “hex” numbers are a base-16 numbering system used to identify colors. These numbers include the numerals 0-9 and letters A-F. They are written in three set of hex pairs: the first pair defines the red hue, the second green and the third blue.

• .htaccess

The .htaccess file is a default configuration of the apache server. The configurations contained within the .htaccess determine which file is placed.

• HTML

HyperText Markup Language is the primary language understood by web pages. HTML is intended to provide the framework and content of website.

• HTTP

HyperText Transfer Protocol is a set of rules in order to transfer requests between browsers and servers.

• HTTPS

HyperText Transfer Protocol over SSL (Secure Socket Layer) are set of rules for transferring requests from a browser to the server (and vice versa) only that it uses a secure and encrypted connection.

• Landing Page

A landing page is the page the visitors see when they enter the website. Landing pages are specifically designed to call action from the new visitor.

• Meta Data

A meta data is a data contained in the header that shows the information about a web page the visitor is on.

• Permalink

A permalink or “permanent link” is used on blogs to define the permanent address of a given blog-post.

• Plugin

Plugins are any bit of third party codes that extend or increase the capabilities of the website. Plugins go with CMS or blogging platforms and make it easier for the developer to have functions added over time without re-coding the website.

• Really Simple Syndication

RSS or Really Simple Syndication is referred to as the standardized XML format that allows content to be syndicated between two or more websites.

• Resolution

Resolution is used to define the number of pixels displayed in the screen.

• Script

These are portions of code in an HTML page that adds dynamism and interactivity.

• Web Server

A web server is a computer software that allows a computer to host websites, web and web pages to make them available anywhere.

The Web Design Process

When web designers acquire clients, they follow a series of steps. These steps organize their work and allows them to monitor their own progress as each step is completed.

Here are the six steps in the web design process:

• Research

The first step in any web design project is to gather information that may help you in designing. Obviously, the information will allow you to understand the target audience, the possible content and design of the website, all of which are necessary to make the website successful in the future.

Here are a few things you need to consider:

1. Purpose
2. Goals
3. Target Audience
4. Projected Content

• Planning

Planning is one of the most important steps in this process because it’s in the step where the concept of the project is built. This also requires constant communication with the client to determine the details of the project that will be retained or removed.

• Design Proper

This is the step where you make ideas real. In this stage, web designers plot the ideas approved by the client into functional visual representations.

Here are a few sub-steps:

1. Wireframing
2. Mockup Creation
3. Designing
4. Re-designing
5. Slicing and Coding

• Development

In this stage, the web designer becomes more like a shadow as the developer takes over. Because it includes a lot of programming and content creation, this process can be very complicated and distressing. Codes need to be organized, commented and referred to the original concept.

Conclusion

As this article ends, I hope you learned a lot. For newbies, web design is very daunting. But it takes patience, skill and some hard work to become successful web designers. Remember, all web design experts started like you are right now – newbies. If they did it, why can’t you?

Good luck. If you have questions, feel free to ask at the comment section below.

By :1stwebdesigner