Five Essential Skills for Modern Web Design

Share

5 pillars of web designI teach computer related courses at Aims Community College, including introductory and advanced courses in web design and programming. I also do consulting in web applications, which usually involves PHP programming, e-commerce, and Content Management Systems (CMS) like Magento, ZenCart and WordPress. Periodically, people ask me what they need to know to be a web designer these days. Some of them may have had a passing familiarity with HTML from some web pages they created a decade ago, but web design has changed a lot since then and they want to wrap their minds around what it requires today to work in web technology. To be an effective web designer today, it is necessary to master what I call the 5 pillars of modern web design.

1. HTML5

When the world wide web was introduced back in the early 1990s, it was based on HyperText Markup Language (HTML), and it was simple. I recall back then you could learn web design by using the ‘show source’ feature of the browser to see how a page was constructed. Everything you needed to know was right there in a single page. HTML is the first pillar of web design, you must understand HTML to do anything with web pages, preferably the latest version which is HTML5. However, if HTML is all you know, the pages you create will look like they’re straight out of the 1990s.

2. CSS

Shortly after HTML was invented, a styling language known as CSS (Cascading Styling Sheets) was developed which took the appearance of the page and separated it from the content. Although having a separate styling language complicated things, it was for the best because you could change the way a page appeared simply by changing a few values in the CSS. However, unlike HTML, CSS isn’t so easy to learn by inspection. In fact, there are things about the way CSS works that can make it exasperating to learn. I consider CSS to be the second pillar of web design.

3. JavaScript

The third pillar of web design was introduced with client side scripting when Netscape invented LiveScript. A scripting language that runs inside the browser allows you to add dynamic effects to web pages, along with a useful functionality like checking forms are filled out properly before submitting them. LiveScript didn’t take off at first, but in an agreement with Sun, Netscape changed its name to JavaScript, and thanks to significant hype surrounding the Java language at the time, it began to gain traction. Today, JavaScript is the only language that works inside all browsers without needing a plugin thus making it a standard, and with the many JavaScript libraries that have been introduced, browsers are now able to render pages that have the look and feel of applications as opposed to static documents.

4. Server Side Scripting

The fourth pillar of web design is server side scripting. Over the years, many languages have been used for server side scripting, such as Perl, PHP, Ruby, Python, and ASP. These languages are intermingled with HTML and JavaScript but they are executed on the server side, thus rendering pages that have dynamic content. Consider the construction of an HTML table that forms a shopping cart. The server needs to keep track of the cart’s contents and generate the HTML to build the table on the fly when the user selects a button to show cart contents. These days, just about all the elements of a page can be rendered dynamically from a database using a scripting language, including much of the content on a page. In fact, the page you’re reading right now and all the associated content around it is stored in a database. That’s the way WordPress, the content management system that is displaying this page, works its magic. To edit the page, it’s a simple matter of working through some web forms, instead of hand coding the HTML/CSS and JavaScript you’d find if you looked at this page’s source code.

5. Database

The fifth pillar of web design is the database. Just about all advanced websites today have migrated to some form of a database-backed content management system (CMS). There are many CMSs to choose from, but what they all have in common is that they rely on dynamic calls to the database to get the data they need to render the pages. This means the web designer needs to understand how to interact with databases and have a good understanding of SQL (Structured Query Language).

Even if you master these five essential skills, you’ll need a few more skills to put together attractive websites. For example, you still need to know about graphics design and how to edit images so that they look good and load fast on a web page. Knowing about typography, color schemes, and other artistic concerns are also very important so that your website doesn’t scare people away and for graphics skills, you may need to rely on an expert in that field since it’s a rare person who can write code and produce beautiful artwork.

Now I know there are some who might argue that with modern Content Management Systems such as WordPress, much of the work is done for you and you can be a web designer without having to know anything about databases, scripting languages, CSS or HTML. That may be the case for simple websites, but if you don’t know the basics, you’ll eventually run into problems you won’t be able to fix. A client might ask for a simple modification to a theme or some file buried inside the CMS and if you don’t have the 5 essential skills mentioned here, you won’t be able to do it.