Code a website
from scratch
as UX Designer
āDesigners that understand enough
code can make better design
decisions, and also communicate
better with the developers.ā
Type
Self-driven upskilling project
Timeline
December 2021 - January 2022
Tools
My Role
Frontend Development: I coded the website by putting my newfound skills in HTML5, CSS3, and JavaScript into good use. I also did code listing (to make sure that my code is of good quality), and also cross-browser testing (to verify that the website is responsive across all platforms).
UX/UI Design: I did usability testing, iterate, and check the accessibility to improve the interaction on my website.
Context
During my career as a Product Designer, I often heard that having coding skills can help designers come up with much better designs. Thus this had always been one of the skills in my checklist that I was so eager to tick. I wanted to understand the possibilities and limitations of the system I'm working with by being familiar with front-end development. Additionally, having this skill will enable me to efficiently discuss my designs with the development team.
For these reasons, combined with my love of learning something new, I began to study frontend development (HTML, CSS, and JavaScript) at CareerFoundry, the University of Michigan through Coursera, and Uxcel. While studying, I also started coding my own portfolio website. Once I began to master the foundational aspects of frontend code, I added more unique flairs to improve the user experience of my websiteās visitors.
Goals
Create a responsive website from scratch, where it works properly across all devices (mobile, tablet, desktop), modern browsers, and operating systems.
Overview
CONTENT LIST
Set up the foundation with HTML
Since I already have a live online portfolio that I created on Squarespace, I'm using more or less the same UI elements like the one I use on my online portfolio. Naturally, the direction I'm headed is to recreate the portfolio while studying frontend development in parallel, and I also wanted to add some personal twists that weren't possible with templates from website builders like Squarespace.
To help me have a structured layout, I began by creating a rough sitemap before I start writing lines of code.
The initial sitemap for my website
Once I have this sitemap as a guide, I started to compile all the copies, files and images I need for the website. I created three versions for each image: one for the very large viewport with 2400px width, one for the large viewport with 1200px width, and the other one for the smaller viewport with 600px width. All these images are then being compressed so they become smaller in size and help to decrease the loading time for my portfolio website.
Example of different size versions of the images
To provide me with some inspiration, I researched and visited other portfolios as I created a preliminary version of my site. I wrote my code on Atom and after each edit, I committed the changes to GitHub.
Decorate and animate with CSS
I created an external style sheet to define and edit the color and typography of each page, and also to create some animation. The color palette that I used is basically the same as my existing portfolio. But the typeface that I use on my existing portfolio (i.e., Bagatela from Adobe Fonts) is not available on Google Fonts, therefore I searched for something similar and found Noto Serif from Google Fonts as a substitute.
Buttons are one of the UI elements that the visitor will often interact with on the page, therefore I created a style for its various states i.e., hover, active, and also visited states. Defining separate styles for these states is important because the visitor needs to get feedback to know whether the action they do on the page is successful or not.
Since I have several contents that are placed side by side on the same row, I developed columns using a CSS grid layout. This column layout is set to be responsive: the browser will display the two columns side by side on tablet and desktop, but all are stacked on the mobile viewport.
I also adjusted the width of the columns based on the type of content placed in the column. For example, I usually want to have an image take more space when itās placed next to a block of text, therefore I would set a wider column for the image and have the text column smaller.
The CSS grid layout that I use on my website.
As I want the visitors to be able to have good experience in navigating my website across all devices, I utilized media queries and created several layouts with breakpoints as follows:
Extra small screens (under 400px)
Small screens (smaller than 640px)
Medium screens (640px or larger)
Large screen sizes (1024px and up)
Extra large screens (more than 1440px)
CSS Animation
In order to be more advanced in CSS, I tried to learn CSS animation and transition. Then I practiced on a scalable vector graphic (SVG). I picked an SVG online and then copy the HTML code onto my index file. Using CSS keyframes, I animated the clouds on the illustration so it moves to the right and left (reversed). I also created color-changing animation on the sun into three different colors (yellow to orange to red and then alternate).
The CSS animation that I made
Add interaction with JavaScript
To add interactivity to my website, I studied JavaScript. It took me a while to grasp JavaScript, and I have to admit I still need to study further to really get the hang of it.
For this project, I mainly used JavaScript to create specific interactivity on the hamburger menu which I set to only appear on the smaller viewports (640px and smaller), and also to make it possible for the visitors to copy my email address to their clipboard (by clicking on the email icon on the footer).
Interactivity using the burger menu for the smaller viewports
Interactivity on the email icon to copy my email address
Color check for accessibility
Providing accessibility to my visitors is important to me, thus one of the accessibility measurements that I implemented was a contrast checking on the color variations that I use on my website design.
I found out that the result for the normal state of the primary button was not so good, so I changed the background color for the primary button from #E8742C to #DD3800. (click to zoom in)
Usability Testing
In order to ensure that my website is easily accessible and that my target users can find the most important information quickly, I did usability testing. I decided on the characteristics of my target user and started to recruit people who fulfilled the following characteristics:
Then I tested my site on 5 different users to identify any issues with the usability in the design, running them through a different scenario with three different tasks to complete:
Find my projects: You want to have a look at my past projects. Where do you think you can find this information?
Download my resume: After seeing my projects, you get interested and want to check my resume further. Where would you go to do this? What would you do if you want to save my resume?
Contact me: You think I might be a good fit at your company, so you want to reach out to me. What would you do then?
Based on these tasks, I defined success criteria for easier comparison:
How long did the user take to complete the task?
Did the user need help to complete the task?
How many tries did the user need to complete the task?
Were there murmurings of discontent?
Were there inaccurate assumptions about interface elements such as navigation, header, or footer?
The participants provided me with invaluable feedback. Generally, my portfolio got positive feedback, the users particularly appreciated the clean layout, the smooth interaction, and also the animations. Once all testings were done, I documented the data and discovered a few repeated usability errors that needed to be fixed. I used Jakob Nielsenās Error Severity Rating Scale to rate the severity of the errors, and then I improved my design accordingly.
Jakob Nielsenās Error Severity Rating Scale
0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem: need not be fixed unless extra time is available on the project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before the product can be released
Code Quality & Cross-Browser Testing
At this stage, I moved into checking the quality of my code and testing the website across various browsers. I used Atom Beautify to create readable code and to always be consistent with my code formatting. I also did code linting to make sure that my code is of good quality and doesnāt produce any errors by installing several packages in Atom for different code files:
For HTML, I used W3C Validator.
For CSS, I used linter-stylelint.
For JavaScript, I used linter-js-standard.
I managed to fix all errors in my HTML files, although there are some remaining errors on my CSS files. There are a bunch of warnings on my CSS file, for example:
āProperty āfillā doesnāt exist.ā >>> I found the use of "fill" to be valid, so I left it as it is.
āRedefinition of ā¦ā >>> I did some research and found out that these issues were happening because I'm redefining what I already defined for the padding. As this is what I intended, I left these as it is as well.
The remaining errors in CSS
To verify that the website was fully functional and responsive across all platforms, I used BrowserStack to test my website. The result was no issues are found when I check my website on modern browsers (Safari, Chrome, Edge, and Firefox) and popular operating systems (iOS and Android OS).
Final Result
Click here to see how my responsive website looks! š
Homepage
About Page
Project Page
Why I did what I did
Get to know more about the thought process behind my design in the conversation between me and my frontend mentor in the video below. š
(Time: 30 mins)
Wrap Up
While I still have a lot to learn to make my website better, Iām proud of my effort in learning how to code and put together a responsive website. This project showcases the array of my coding abilities, with a well thought- out navigation, subtle animations, and three breakpoints for every page. I will continue to sharpen my skills in responsive web design in my spare time.
Lesson learned
Understand the logic behind the code. I learn that coding is not just about memorizing the code, but it is also about understanding the logic behind it. Once I understand the concept and the algorithm behind it, then it will be easier to find a solution to the problem Iām trying to solve with my coding.
This project taught me the value of mobile-first web development. I began my code as a large viewport first. Once I learned how to inspect my website on various sizes of the viewport, I realized how important it is for a website to be responsive in order to create a better user experience. Since most of us are mobile and often rely on our mobile phones to access online information, it becomes all the more imperative for me to remember to implement a mobile-first approach on my web design.
You may also like:
-
Delivering style inspiration and guidance to the customer through user-generated content.
-
Placing employee wellbeing as the main priority through a mental health app.
-
Helping dreams to come true for young adults through simplifying their finances.