Learning Web Design

In this article we will discuss:

Table Of Content

Getting Started and Learn Web Design

The web has been around for the past 25 years now, there is one thing that is certain and that is the staying power of the web. It will always remain as the sole communication and commercial medium. Learn web designs is essential in the modern business world.

In fact, the web has even found its way and penetrated right into the smartphone, televisions, tablets and more. This is the absolute time to learn how to put your web design knowledge into good use.

I have been teaching web designs and developments for the past 5 years giving courses for web design, workshops. This all gave me the opportunity to meet new people of different background that want to learn how to design web pages.

This article will let you learn more about the different roles now available in web design and development.

If you are the kind of person who just want a simple site, you don’t necessarily need to become a web designer or web developer to be able to do that. There are in fact tons of website hosting services that allow you to drag and drop to create an outstanding website without any coding knowledge.

Here are a few of the more popular ones such as:

  • WordPress (www.wordpress.com)
  • Squarespace (squarespace.com)
  • Wix (Wix.com)
  • Site builder (sitebuilder.com)
  • Weebly (weebly.com)

The website is more than just code and pictures. They often start off with a business plan or other predefined missions. Before the website is started, the content has to be first created and organized.

In this article, I will share with you the various disciplines that are needed to contribute to the various disciplines of the website including roles such as content, design, and code. You may end up specializing in one area of expertise working as part of a specialist team or you will be wearing many hats.

Website design is wide, just like upkeeping the day to day household of your house. Your household will require you to have a part-time chef, house cleaner, accountant, diplomat, gardener, construction worker to handle the stuff of your house.

As a designer, you will be handling many web-related disciplines and this just stuffs you need to do to make a website.

Content Marketing

Anyone who calls themselves “web designers” needs to be aware that everything they do is helping supports the process of getting content, message or functionality seamlessly to users. Always keep this in mind from creating button labels to messages.

Good writers and editors are an important part of the team that helps to call this attention in the modern web development world, they are mainly the information architect and the content strategists. They are the people who are in charge of creating the content, organizing and maintaining the content.

Information Architect

Information architects also better known as information designers are a group of professionals that organize the information for readability, logical and findability.

They are responsible for site diagrams, search functionality, and are very well researched on how the content fits together on one web page, how the data are organized on the server.

The concept is intertwined with UX and UI designs as well as content management.

This job in an information architecture might be for you if you like taxonomies or are good at organizing.

Content Strategist

Content needs to be right for the site to be fully effective. Content strategy makes sure all text on the site from long explanatory, labels on buttons, supports the brand, identity and marketing goals of the organization.

The role includes consistent and ongoing data modeling, planning for content reuse, schedule planning and maintaining the voice of the brand through social media.

Website Design

Design websites are divided into many specializations I have gathered a few of the job descriptions that are related to these disciplines.

The roles and descriptions, however, overlap each other most of the time, the “designers” are usually responsible for more than one or all of these responsibilities.

UX, IxD and UI Designs

Whenever we think of designs we will think about how some things look. But on the business of web design, it is more about getting how the site works fixed.

It is important to know how users use the website, how visitors move through the website before deciding the fonts and colors, etc.

All these tasks will be managed by the user experience (UX) team, Interaction Design (IxD) team and the user interface team (UI) team. They usually work together and it is not uncommon to have an experienced designer handling all three together.

UX designer team will take the whole holistic view of the whole design process ensuring the entire experience of the site is desirable to use.

In the product sense, UX means all aspects of the interactions of the users and the products such as how customers perceive, use and learn the products.

When it comes to websites or applications, it means the overall site design, quality of the content, message and use interface as a whole. The overall experiences of the site should be in line with the company’s branding and business goals for the website to be successful.

Interaction designers are in charge of all the clicking and linking functions. It should be well-linked and provide the easiest, most efficient and delightful ways of interactions of the website to the user as much as possible.

User interface is closely related to interaction design but more specific to the tools used by the web pages such as the buttons, navigations menus, links and etc that users used to navigate around the web pages and accomplish the tasks they plan to do with the website.

Testing reports and user research

Website designs and applications usually start off with interviews and observations to find out problems and come out with new solutions that the website can solve for users.

The approach of designing the website centered around the user’s needs is also known as UCD or called user-centered design. Experienced designers will do a round of testing and design process to ensure the usability of the design.

The success of web design and a web application depends heavily on how the designers understand the needs, desires, and limitations of users.

Drawing Wireframes

A wireframe diagram helps to illustrate the web page structures in lines and diagrams outlining each content type and widget. The purpose of the wireframe diagram is to help developers understand how the website should be built per web page.

The purpose of the wireframe diagram is to help illustrate how web content assets are placed on the website.

The screen real estate will be divided, functionality and content like navigation, search boxes, form elements, images, text are organized accordingly on the page and placed as it should be.

Colors, visual identity and fonts are omitted so as reduce the distraction from showing the structure of each individual web page.

Wireframe diagrams are elucidated with more instructions on how things should work so that the web developers know very clearly what to build.

Site diagrams

Site diagrams illustrate the whole flow and structures of the whole websites. They help to illustrate the relations of each web page. Some website has many webpages like e-commerce and their site diagram are usually very wide, even a big wall cannot contain it.

Storyboards and user flow charts

Storyboards help to understand personas’ interactions with the website or application. It usually includes a script and scenes with many screen views, shows a clearer view of how individual personas interact with the screen.

Flow chart is another method to help show how each web page in a site or the application is connected. The focus, however, is more on the technical details as compared to storyboards that are telling the story.

Visual Designs and Graphics

Everything on the web depends on a good visual presentation and information to create the first best impression. The website is like a visual medium, and the first impression is everything for a website to catch the attention of the users.

Graphic designers will design the look, feel of the website including the logos, graphics, types, colors, layout, etc. Every designated elements should be in sync to make sure it conveys the brand and messages of the companies, organizations it represents. Professional designers always know how to make it all look consistent.

Designers usually choose to present visual designs to clients using mockups and sketches done via photoshop or similar tools.

Front-End Development

HTML (Authoring/markup language)

HTML is a markup language used for authoring the website to prepare for the delivery of content to the website. They are used in the creation of web pages documents.

HTML is a markup language and not a programming language. It is used to describe headings, sub-headings, lists, paragraphs to indicate the document’s underlying structure.

It communicates with the computer to instruct them of the outline of the web pages. The best way to learn HTML is patience and try writing out pages by hand.

CSS (Styling)

Style sheets are used to give the styles and edify the looks of the whole website. Unlike HTML, which is only used for describing the content on the web pages, CSS helps to make the web pages look better.

CSS is used to control the fonts, spacings, images, colors, page layout, and more. It makes the website looks better and more professional, a mandatory skill for all designers alike.

It is usually referred to as style sheets in the web development spaces, proficiency in style sheets is essential when you are designing professional websites. Website designed by HTML alone will be dull, simple and default by the browsers.


Javascript is a scripting language that allows the website to have interactions and behaviors to web pages. Javascript is used to save time with automation, improve user experience and enticing customers with captivating features.

Here are some of the things done by Javascript:

  • Slider menu
  • Check form entries for valid and invalid ones.
  • Payment gateway systems
  • Scrolling feeds updates with more content automatically

DOM Scripting, AJAX, Javascript frameworks like React, Boostrap, Angular are all the things linked to Javascript. You will often hear these terms when it comes to doing any web development associated with Javascript.

DOM stands for the document object model, which is an independent language interface that makes and treats each XML or HTML document as a tree structure. This standardized list of web pages can be assessed and manipulated by Javascript or other scripting languages.

AJAX stands for Asynchronous Javascript and XML, it allows the web pages to load smoothly in the background without reloading.

Web developers who want to make a living, Javascript skills are the basic requirements.

Web designers need to have knowledge of what Javascript can do without learning to write it. Learning it helps you design better more realistic web pages, functions, etc for your web development teams.

Back-End Development

Backend developers are in charge of the data stored at the back of the sites. Content includes product inventories, templates, user accounts and more. Some of the common database languages include MySQL, Oracle, and SQL server.

Backend development is all about the things that need to be taken care of on the server level. Functionality like shopping carts, mailing lists, and prepackaged solutions can be done through hosting companies without having to code if from scratch.

Soft skills web designers need?

Technical skills are especially important in building the website, however, soft skills are also critical to the success of the web designers.

Communication skills

Your job revolves around communicating with clients, team members, and superiors. You can either communicate in person, via email, text messaging tools, and video calls. Brush up on these essentials, learn how to communicate your ideas effectively and listen proactively.

Always make sure you understand the issues asked, ask for clarification if you don’t, communicate solutions and get the stuff implemented on time.

Good communication is not just about you expressing your ideas clearly, it also involves being a good listener.


Staying adaptable is the key to survival as web designers and web developers. You might one day come in the office with your clients changing direction, canceling the project entirely or be asked to learn new skills and shift positions in your team.

Good judgment and critical thinking

You need to always come out with solutions as web designers. Think, work out your clients’ website with critical thinking skills and always employ your common sense at work.

Good attitude

Learn to have a good attitude helps you go far in life. The way you approach your work is contagious, be positive to clients and team members even if you do your work staying home most of the time. It is good to stay friendly at all times.

Read and learn everything

Start to read as much as you can. Like bloggers or any other working field. Reading helps to gain the knowledge and skills needed to make you an expert in the field you chose.

Other Roles

SEO specialists

SEO stands for search engine optimization and specialists in this field are in charge of getting the website found through search engines like Google, Bing, Yahoo, etc.

SEO involves the art of understanding the on-page, off-page and technical factors that get your website rank highly in the search engine result page.

The number one factor in doing SEO well is simply writing good content and optimized with savvy HTML markups.

Multimedia producer

The website allows us to put all multimedia elements into our web pages including sound, video and animation, and interactive games. The people filling up this role are usually technicians and artists. However, there might be times when the web team is also involved with larger sites.

Project manager

The project manager is the overall project management person. He coordinates designers, developers, copywriters, and anyone who is working on the site. They put time management, set timelines, deliverables, deadlines and so on.

They work with the business owner as well as the product manager to make sure everything gets done on time.

Product manager

Product managers are the people who guide the design and the development of the website. They are the people who have a thorough understanding of the target market and the processes involved in the making of the website.

They determine the launch date and website development and usually look at the whole strategy of the website from a marketing perspective.

Web Designer Tools

Have you heard your web designers’ friends sharing with you about the tools they use for web designs? As web designers, you utilize many tools from hardware to software tools to make the website project easier to implement.

Web Development Environment

  • Computer that is up-to-date
  • Large monitor
  • Mobile devices for testing
  • Camera or scanner
  • Second computer for testing (Mac & PC)

Web Production Software

Tools for Coding

  • Sublime Text
  • Atom
  • Brackets
  • Coda
  • Microsoft Visual Studio

User interface and layout tools

  • Affinity designer
  • Adobe XD
  • Figma
  • UXPin
  • Sketchapp

I hope this article has given you the overview of the many roles and responsibilities needed for web designs. Take it one step at a time, consistency is key when it comes to learning web design.

You can either focus on a niche or learn everything eventually all up to you. The key is always to take action and get things started!

0 0 votes
Article Rating
Share this entry
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x