There is a great debate about whether or not it is OK for graphic designers to use website templates in their work, and also whether 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 post, 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 graphic designer should consider before using one. Finally; I will present the result of a functional study of 20 different websites collected by design students at Hertfordshire University, 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.
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 many times is not as well defined is the basic requirements which any website should fulfill:
- 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 functions—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 all content is accessible also with JavaScript turned off.
- That the code structure follows standard code conventions.
One would believe that all professional web-projects have these basic requirements stated, but as every government site where important information is impossible to find; every web shop where the buttons don’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.
Website templates
When talking about ‘templates’, it is important to understand that there are different types 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 site. Some of the most popular platforms include WIX , Squarespace and Adobe Adobe Portfolio.
The next category of templates is fully developed websites developed by professional developers and designers and which are sold on market-places like Blank and Initializr. These templates are skeletons without any design implemented but where grids, font-sizes, and the basic structure is pre-defined. Most web designers and developers use some kind of starter template in their work, 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 are more a method of structuring work.
Website builder themes
In regard to website builders like WIX and Squarespace, these are mainly used by graphic designers without coding skills and who do not work professionally with the web. If you are one of these designers 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 platforms 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 designers usually find them amazing, and when you are applying for a new job or pitching on your next project using a website builder theme, there always will be a chance that another designer pitching for the same project is using the same template as you are.
So what? Your portfolio is unique, and it is your work that potential clients 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 solve 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 generic 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 re-design templates 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.
- A majority of sites built on templates did not work with JavaScript turned off.
The most surprising and problematic findings also was the fact that none of the sites developed using website builders passed the performance test, and that a majority also were non-functional with JavaScript turned off. These findings are problematic as designers using these services should be able to trust that sites developed using them follow modern code-conventions, work properly for all kinds of users and devices, and not only on the latest mobile devices and modern browsers. What this study clearly showed is that you never should take for granted that a template, even though it might be developed by a multinational corporation, is guaranteed to function without errors and functional problems.
There is also another point one need to consider before deciding if it is right or not to use templates for client 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 generic template, you are not developing features and structure as a result of the client’s needs, but instead adapting your client’s 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 to maximize sales, which 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 all features, but that the code of all included features still will have to be downloaded by end-users even if you don’t use them which will make the site slower to download and the codebase harder to maintain. By using a template, even though you might totally re-design it, you simply 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 of 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 the code 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 graphic designer not knowing at least the basics of 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. A matter of fact, you even can take the decision not to even use a computer in your work. But again, why wouldn’t you? Knowing the tools of our trade, including how to write code, is imperative to efficiently express our art.
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 these skills for the rest of your career, which for graduating graphic design students means about half a century.