I Designed a Website: An Inside Look at UX Principles
How to Design a Website from Scratch
This summer, as a fun side project, I designed a website for essay discovery named Shelfcare.club: A platform where you can read essays recommended by people you admire (curation as a service).
Another aim of the project was to learn more about web development and CSS/Javascript. I learnt that designing from scratch is harder than it looks, and I wanted to share my journey (with photo documentation)!
It took me weeks to understand the components of building a website. What is a div block? How does my design map onto these sections/containers so they align in the way I want them to? How do I link collection management pages to inputs from CSV (spreadsheet)?
I documented the impact of these slow learnings on my design decisions.
Versions 1 and 2: Waves
I was interested in implementing ‘gradient waves’ that I designed using Figma (a design software) but I realized that there would be centering issues when moved to a different page (a mobile form/an iPad). Due to this reason, the waves ended up looking very mangled and constrained no matter how much I tried to alter the dimensions. I scrapped the waves after a few alterations.
Version 3: Gradients and Wonky Styles
In version 3, I tried to stick to the basics. I overlay two different colors (yellow and purple) as a gradient. The problem here was that the gradient would overlap on certain parts due to where the gradient was attached to (the section or the body or the container). Still messy.
Version 4: CSS tutorials and shifting panels
I designed this shifting panel where the user scrolls up to see different words. I really liked it from a design perspective, but I realized it wasn’t a great experience to have the home page constantly a parallax.
Pretty User Design ≠ Usability + Success
V5 & 6: Elegance and Font Choice
In v5 and 6, the design shifted completely to a more elegant and simple format (my inspiration was Kinfolk Magazine). I changed the fonts from Inconsolata (a previously typewriter font) and Recolata (the heading font) to Fejoia Display (a magazine font) and Albra Regular (a beautiful, clean serif).
Now here I am at v6. The differences are stark, and I’m still not done. I will do a v2 after finalizing more versions. It’s still a work in progress.
However, I’m grateful that the many iterations gave me an understanding of consistency, screen layout, relationships and navigability. I summarized these findings in the lessons below.
The UX Lessons I Learnt Through Doing
- Pretty User Design ≠ Usability + Success
- Users Want Clarity and Simplicity
- Jakob’s Law: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
- Testing and Iterating on Feedback = Most Important Step
- Never be tied down by assumptions of what your design ‘should be’. Only look forward, and don’t be afraid to scrap everything.
Nicole
