Coding My First Website
Should designers learn web development?
Talks about learning to code have been widely circulating, among friends and colleagues and across industries. As a graphic designer with a print design background, I’ve had to relentlessly adapt my skills in the past seven years, as I was experiencing the digital shift, from print to screen, and witnessing its impact on visual communications. But never have I taken the idea of coding seriously. The main reason was my ignorance and consequent fear of this cryptic field that only a select group of ‘uncreative techies’ understand.
But once I challenged that fear, many dots connected.
First of all, any unfamiliar language seems enigmatic and scary at first. Learning a new language is no mean feat. But as soon as we start understanding its syntax and semantics, it doesn’t seem so daunting anymore.
Second, creativity is at the core of coding. I only realised that when I tried it myself. Both designers and developers devise solutions to problems, a process which requires creativity; it’s just that one is more visually palpable than the other.
By the time I graduated from university in 2010, I had never designed a website. I have worked extensively on publications, books and magazines, designing layouts, typesetting text and creating custom lettering. This experience led me to font design halfway through my career. Around that time, web fonts were starting to gain momentum, expanding the realm of web typography beyond Times New Roman, Arial, and the like. Every font I worked on had to now be optimised for the screen.
It dawned on me then that I don’t fully understand the medium I was designing for, especially when I can’t answer the question “why are there five web font formats?”. Since an unanswered question haunts me, I found myself embarking on my first front-end web development journey to unravel the secrets of the world wide web.
Having enjoyed that journey, I decided to share how fulfilling it was in the hope of motivating designers to follow suit.
/***** UI & FRONT-END *****/
What follows is a brief description UI design and front-end development. Feel free to skip this section if you’re familiar with the terms.
There are two teams that work closely to create a website: designers and developers. The former envisions the optimal user experience while the latter brings this experience to life by delivering it online to a wide range of devices and technologies. The design team would usually consist of UX researchers and designers as well as UI designers, while front-end and back-end developers make up the development team.
UI Design
UX designers can be seen as the link between UX researchers and UI designers. Their role is to map out the smoothest journey possible for users, while UX researchers highlight all the bumps that the user might encounter along the way. Finally, UI designers visualise that journey.
If graphic design consists of creating visual elements, UI design treats them as interactive and mobile, taking into consideration the more volatile medium in which they’re displayed.
Front-end web development
Front-end development is a technology that delivers the design to the user. It is called ‘front-end’ because it communicates with the browser — as opposed to the server which is at the ‘back-end’ — describing what the content looks like using specific languages: HTML and CSS.
HTML is a markup language that structures the content, while CSS is a style sheet language that visualises it. What HTML and CSS do is simply present the content to the user in any browser.
Let’s take a blue square for example.
A designer, using a vector graphics software, would add a square shape from the tools panel and colour it in blue from the fill box.
A front-end developer, on the other hand, would write the following lines:
div.square {
width: 100px;
height: 100px;
background-color: blue;
}
HTML and CSS are not programming languages as programming involves an automated set of instructions triggered by input; that’s where back-end web development comes in.
Javascript, on the other hand, is a programming language that’s recently become an integral part of front-end web development as it allows the design to be more dynamic and interactive. Think of how a ‘Read more’ expands when clicked to show more text; that’s Javascript.
/***** MY UI/FRONT-END EXPERIENCE *****/
I enrolled in General Assembly’s Front-End Web Development part-time course in September 2017. I had a basic knowledge of coding from online exercises I had completed on platforms such as W3Schools and Codecademy.
During the 10-week course, I set out to create a product page for a book I had designed the previous year. I thought if I succeeded in building a website then it would be a portfolio item that shows both my print and digital design skills. The client’s objective, on the other hand, would be to create an online presence for their product and to have an appealing and user-friendly site that summarises the book and previews some of its content. I submitted my final project proposal in week four, giving myself six weeks to develop a website from scratch.
FIRST STEP: DESIGN
UX design and wireframes
I was already familiar with the product as I had worked on the printed book, so I had an idea who the target audience is (user research). I also looked at similar websites to identify strengths and weaknesses. I then created a sitemap based on which I built the wireframes, using Balsamiq.
UI design mockups
I learned Sketch and used it to design an interface consistent with the book’s visual identity, but adapted for the web.
User-testing and feedback
I asked many people for feedback, even the CEO of a creative agency (he qualified as a target audience). I can’t tell you how helpful this was! We are designing for people, not for ourselves, so it’s crucial to test and assess their experience and listen to their feedback. There’s no one-size-fits-all model for designing a website; it changes based on the relation between the content and its users, which is unique to each site.
SECOND STEP: FRONT-END
HTML: content
Once I was happy with the interface I started creating my HTML file. I admit, the design was not final, but I needed to start thinking of the overall layout as a group of interactive elements on a webpage.
CSS: style
First, I created a typographic hierarchy (I am a typographer after all) and defined the headings from h1 to h6, as well as the smaller text (the <p> tag). I followed a mobile-first approach to writing the code and laying out all the elements. I was very reluctant at first, but I’ve tremendously appreciated having done that later on; thinking ‘responsive’ pushes you to think of your layout as a dynamic one.
Javascript: interactivity
Now comes the challenging bit: programming.
As explained earlier, Javascript gives a dynamic edge to sites. Understanding the potentials of Javascript propels designers to optimise their design for interactivity.
Is Javascript hard to learn?
Earlier in January, I started learning Python, which was my first exposure to programming. It took me about a month to fully grasp the logic behind it. I prefer to tackle a new subject theoretically first before moving on to the practical bit. So, I took my time reading different resources. Everyone has their learning habits, but I would say give it all the time it needs to grow on you.
My exposure to Python helped me tremendously later on in class as I was able to quickly follow up on Javascript. I managed to do basic interactivity, but I struggled with more advanced coding, like animating the hamburger menu on click to become an ‘x’. Such seamlessly simple details, I discovered, are not simple! Javascript will always be my brain-tickling exercising every now and then.
Testing: browser compatibility
A few tears were shed when I started testing the website, especially on Internet Explorer! But, with a bit of Googling and further testing, I managed to fix many compatibility issues.
Metadata: an SEO booster
During the process, I learned a lot about metadata and how to structure my content in a way that boosts a site’s SEO. One way was by adding Schema markup to my html, as well as Facebook Open Graph and Twitter Cards markups.
The result: www.arabicfordesigners.com
I sought feedback from different web developers to comment on the quality and clarity of my code, which was very helpful and heartening. I highly appreciated their support, and how they encouraged me to persevere with front-end, assuring me I have what it takes to make a website work! Finally, the client was so delighted with the result that they published the website online, landing me my first web development job.
/*** SHOULD DESIGNERS LEARN FRONT-END? ***/
There is an ongoing debate about the need for designers to learn front-end web development and I was surprised when I came across articles that discourage such cross-disciplinary practices. Based on my experience, the answer is a definite yes, and here are my reasons why.
1. Learning something new is never a disadvantage
Counter-argument: Combining both skills is a waste of time and compromise on quality.
Why is learning a new language lauded while learning the language of the internet, which allows people from around the world to communicate with each other, discouraged?
HTML and CSS, like every language, have their specific structure, syntax and semantics, and they’re not that hard to learn.
Here are the benefits for designers to learn front-end:
1. Understand the medium you’re designing for, and hence create better designs.
2. Explore another facet of creativity. As explained earlier, designers and developers exercise creativity in a different way. Getting in the developer’s shoes will change the way you look at an interactive visual element.
3. Enhance communication with developers. Many designers often feel frustrated after handing their design files to the development team because the layout didn’t turn out as expected. One way to avoid this is to understand the web development process and to learn to express your specifications in their language.
4. Choose the right front-end developer for your project. If you know HTML and CSS but prefer not to do it yourself, you could at least assess the competence of a web developer.
5. Show off your technical skills. Front-end is a CV booster; it shows you’re a curious and adaptive learner.
2. Expanding your skill set complements your expertise
Counter-argument: Specialisation always begets the best results, so let designers design and developers develop.
When you’re collaborating closely with small teams from different disciplines, having a diverse skill set will prove to be beneficial to your peers and project managers. This is ideal for freelancers, small agencies and startups working with a limited budget.
A UI designer with competent front-end skills will not only be cost-efficient but will also have more control over the design implementation. This doesn’t mean to eliminate front-end developers but to seek their expertise at a more advanced stage. Developers much appreciate a designer with front-end skills who could supply them with HTML and CSS files. Even within a front-end team tasks are split: some would focus on HTML and CSS, while others on Javascript.
Finally, if you’re a designer with an entrepreneurial spirit, front-end will open up many doors on your career path: from creating your online portfolio or launching your product, to optimising your online visibility or opening your company. The gig economy is changing our workflow, and we should use that to our advantage.
3. Telling designers to avoid front-end is asking them to be passive users of technology.
Counter-argument: Front-end is becoming unnecessary with the proliferation of prototyping tools. Why code when you can prototype?
Some predict that front-end web development will become extinct as prototyping tools are becoming more sophisticated. But I am not here to argue whether this is true or not. When I advise designers to learn to code I’m encouraging them to understand the medium they’re designing for. A good knowledge of front-end equips designers with more confidence and better command of any prototyping tool they would use.
Design school wasn’t about learning a specific software or specific design tools. Designers graduate with a set of transferable skills powered by a critical and an adaptive mindset. Graphic design is a field that is continuously redefined by technology, so it’s crucial to encourage designers to familiarise themselves with their medium and tools as they are evolving.
/********** LOOKING BACK *********/
As I’m writing this, I can vividly remember the first time I was reading about HTML and CSS, and the difference between ids and classes, feeling stupid and absolutely clueless. But that agonising frustration turned into a pleasurable eureka-moment a month later in class, listening to the instructor and coding along. I remember more vividly thinking then “OMG that makes sense!”.
All the exercises we’ve done during the course (and which you can check on GitHub) prepared us to tackle web development with confidence. Now I have no trouble structuring and styling any content on the web, and I appreciate the control it gives me over the design implementation. I still have more work to do with Javascript, but at least I’m no longer afraid of it. As a matter of fact, I already started working on my next project!
So, fellow designers, what are you still waiting for?
/*********** FINAL TIPS **********/
1. Patience: Your brain needs time to absorb new information, so have patience and confidence in your cognitive skills.
2. Purpose: I wanted this website to come to life no matter what, mostly because I was involved in the design of the product itself. Pick something you feel strongly about and that will motivate you to overcome any obstacles you stumble upon on the way.
3. Discipline: Writing code is not only about the technical know-how. You will soon realise how much unorganised and unclear code could get you in trouble.
4. Listen to developers: From my instructors to my flatmate (who’s also a developer), listening to them as they’re thinking out loud has informed the way I think as a designer.
5. Read other developers’ code: The DOM Inspector in browsers is your best friend, it allows you to see the structure behind every website. Google, which will often lead you to Stack Overflow, will also prove to be a very good friend.
6. Never shy away from asking questions: I appreciate the open-source mentality and how developers share their code and solutions to problems they’ve encountered, so don’t be shy and always ask for help when you’re stuck.
