There is a great debate among graphic designers about whether it is OK or not for graphic designers to use ready made website templates in their work and also whether all graphic designers working professionally need to have at least the basic skills in reading and writing code or if writing code is simply something that can be left to full-time web professionals.
In this article, I will show why at least a basic understanding of how to read and write code is essential for all but a small part of graphic design professionals. I will also discuss the usage of website templates, different types of templates and what every designer should consider before using one. Finally, I will present the result of a functional study of 20 different websites collected by IDI-students, most them based on commercial templates. The results of this study clearly will illustrate many of the problems I talk about in this article.
What is a great website
A great website can be defined as “a website that fulfills all stated goals for which it was created.”
For an e-commerce merchant, the main goal, of course, is a website that will enable them to sell as many products as possible. A government agency, on the other hand, might state their main goal as to lower incoming phone calls to the administration by making sure that web-site visitors easily can find vital information, while the single freelancer might need a site to present his or her creative skills to attract new clients.
In most projects, these higher goals are well defined and outlined in contracts and project definitions or, as in the case of a single freelancer planning for a personal portfolio website, visualised in his or her mind and imagination.
What usually is not as well defined is the basic requirements all websites need to perform before one even start considering business goals which include:
- That the site is functional and does not break in any major browser, including versions of these browsers that are a few years old.
- That the site works properly not only on iPhone and one or two versions of Android, but also on smartphones that are a few years old.
- That the site loads quickly, both on desktop and mobile.
- That the information architecture is well outlined.
- That the code structure follows standard code conventions.
One would believe that all professional projects have these base requirements stated but as every government site where important information is impossible to find, every webshop where the buttons doesn’t seem to work when trying to order using an iPad or smartphone, or when it takes ages to load your best friends new Behance website from your iPhone and you finally give up, all are evidence that they are not.
When talking about ‘templates’, it is important to understand that there are different kinds of templates that all have their place in the web ecosystem.
The first category of templates is website builder themes. A website builder is a platform which enables anyone with minimal computer skills to publish a website. Some of the most popular platforms include WIX , Squarespace and Adobe Adobe Portfolio.
The next category of templates is fully developed websites developed by professionally developers and designers sold through places like ThemeForest. After buying one, you simply install it on your server and tweak colours, typefaces, imagery and copy as you prefer. Using web-site templates demands at least some skills in reading code and understanding how to publish files to a web server.
The third template category is starter templates like html5bones, Blank and Initializr. These templates are basically skeletons without design implemented where grids, font-sizes and the basic structure comes ready packaged. Most web designers and developers use some kind of starter template in their work, either developed by themselves or by others, as starter templates save many hours of work when initiating a new project. I won’t talk more about starter templates in this paper as they are not really ‘templates’ but more a way of structuring work.
Website builder themes
In regards to website builders like WIX and Squarespace, these are mainly used by graphic designers without coding skills not working with the web. If you are one of those and planning to use a website builder for your portfolio, you should first ask yourself what your main goal is with your website and how you want to be perceived by people visiting it.
If you, like most designers, want your visitors to perceive you as a gifted creative with unique ideas, then you really should think twice if using a website builder is a smart move. All website builder services offer a limited number of designs, and an even smaller number of really good designs. In my work as a creative director evaluating freelancers and agencies as part of my job, it is not uncommon that two or more different designers send me links to their almost identical portfolios on Behance or Squarespace.
The problem with great website builder themes is that thousands of other designers also find them amazing. When you are applying for a new job or pitching on your next project; there is always a chance that another designer pitching for the same project is using the same template as you are for his or her portfolio.
So what (?), you might think. Your design work is unique, and it is your work that your potential client will look at, not the design of your website. This might be true for any other line of business but for designers it is not. When evaluating designers, what you are looking for are those very rare unicorns who think outside the box. Designers who make the boring into something beautiful and who solves difficult design problems in unique and inspiring ways. The problem when you send a link to your portfolio website identical in its design as the portfolios of thousands of other designers, is that you don’t stand out, and as in any recruitment process, if you do not stand out, the HR person or your future client most certainly won’t take the time to click through to your work.
If you don’t know how to code, a much better solution than using a website builder is to publish a simple HTML page with just your contact info and a link to a PDF portfolio presentation than using a template with the exact same design as thousands of other designers.
Website templates – or not
Is it ok for graphic designers to use website templates in client work? The short answer is: it depends.
If you are offering any kind of web related design or development services, either through an agency or as a freelancer, and are planning to develop your new company website/portfolio, then the definite answer is no. If you do not have the skills or creativity to design and develop your own website, why should any client trust you to develop theirs? As a web professional, your personal website should illustrate your skills and by using a ready-made template to present what you do is basically showing someone else’s work pretending it is yours.
Website templates in client work, however, have their place. Working with client projects with minimal budgets or short time frames they sometimes are a necessity, and a good web developer using a well-coded template also can tweak design and structure to fit client brand guidelines and turn a template into a unique piece of design.
The problem is that many developers and designers using templates as a base for client work lacks the skills to evaluate the quality of template code, the skills to properly re-design a template to fit client brand guidelines and also do not have the skills to locate and fix problems if the site crash a month or two after launch.
Most designers using templates in client work also take for granted that the templates they buy or the website builders they are using are well tested and functional. As the result of the IDI study clearly shows, this, however, is not always the case.
Of the 20 websites analysed in this study the following was found:
- None of the websites based on templates passed a Google Performance test having implications not only on the user experience, but also on SEO.
- All sites built on templates had serious validation errors.
There is also another point one need to consider before deciding if it is right or not to use templates for client projects and work.
All design projects, big or small, for the web or print, should start with clearly outlining business goals and base-requirements, in addition to budget- and time allocation. It also should be defined how it will be verified and followed up that these goals and requirements are fulfilled.
If one takes this into consideration, it is quite obvious that using website templates, from the client’s business perspective, do have some fundamental flaws. When you base a client project on a finished template, you are not developing features and the structure as a result of client’s needs, but instead adapting your clients needs to the structure of the template.
Most templates also come with tonnes of features as template developers want to make them as generic as possible, maximising their sales. This always means that you will end up using only a fraction of all the fancy features and plugins included. The problem with this is not so much that you simply can choose not to use them, but that the code they are built upon still will be included in the codebase resulting in a slower site that also will be harder to maintain. By using a template, even though you might totally re-design it, you still are not delivering an optimal product to your client.
I want to emphasise that I am not against using website templates in smaller client projects with limited budgets – if you are a good developer who knows how to read and write code and you inform your client of the implications in using one. However, if the client project you work on has a ‘normal’ budget, then there is no excuse for basing it on a template!
Back to the main question, do graphic designers need to know how to code?
If you as a graphic designer are using website templates in client work or planning to do so, the answer is yes. Without having the skills to read code, you won’t be able to evaluate if a template is good or not, and you will be in a very bad situation if something goes wrong not knowing how to fix the problem.
But even if you plan to never do any web-related work, and even though you might have a great team of fantastic developers who can take your Photoshop comps and turn them into code; without knowing how to read the code they deliver you won’t be in a position to evaluate if it is valid or not. What you also should consider before deciding whether learning how to code is for you or not, is the fact that there are very few projects these days that do not have any element of coding involved. As a designer not knowing at least the basics in how to read HTML, you put yourself in a very bad position when applying for jobs or approaching new clients.
Learning how to code as a designer is the same thing as learning Photoshop, Illustrator or InDesign. You don’t have to, and you can take the decision as a graphic designer not to even use a computer in your work. But again, why wouldn’t you? Knowing how to write code is just another tool to express your art, like InDesign or Photoshop, although a very important one if you want to survive commercially as a designer.
But in the end, the question you must ask yourself is not whether you ‘should’ learn how to code, but why not. Learning the basics in how to program for the web only takes a few weeks and you then have the skills for the rest of your career, which for graduating graphic design students means about half a century.