I always think to myself that I started my web design and development journey just at the right time where the web has reached a certain maturity. Just to name a few:
- Designing and developing consistent components are much easier now with design tools like Figma and development framework like React (or even HTML templating engines),
- Good web fonts are available on Google Font and FontShare,
- Image optimisations are taken care by CMS and frameworks,
- Web hosting and deployments are made super easy,
The list goes on. I still remember when I started studying graphic design at 2015, it was a norm for designers to slice images on Adobe Photoshop, create multiple button states and CSS sprites on Adobe Fireworks and use float to create layout. Look how far we’ve come!
Looking back at my self-taught journey, there are a few lessons that helped me become better at web design and development. Thus, this guide is written for the aspiring (graphic) designers who wish to learn about web design and development, and make a career out of it. Not in chronological manner:
1. Copy enough good design first, then only think about making it better.
Having worked as a UX researcher for a brief moment in my career, I’ve recognise the occurrence of good and bad design patterns. What I notice is that good design patterns are quite universal and transferrable from app to app, to the point where it can become predictable and repetitive. However, knowing good design patterns are essential for designing good web or interface layout that can increase its usability.
The best way to learn good design patterns prior to a UIUX/web related career is to create your variation of digital product but with a twist, e.g. a Facebook clone for manga community. It is even better if you can pursue the project from designing the branding, user flow, wireframe, prototype to actually coding it out. If you get stuck throughout the design process, find out how major social media platform would approach the issue, then copy it. I highly recommend to learn through copying because digital products that have high usage probably went through rigorously design changes and UX research. Once you’re more comfortable with the design patterns, you can start to come out with your own unique solution to the design problems.
Learning through copying is a technique that big companies use to adapt and evolve better design solutions. You’ve most probably heard successful companies like Samsung, Huawei and Apple are pulling each other’s features after years of not implementing them. Being the first is good, but being the best is better.
Other skills that you’ll learn better by copying: writing good calligraphy, learning martial arts.
From my observation, (really) good design patterns can usually be found in fintech and dating apps, basically apps that generate money through user data and money. You can also reference design systems like Material UI and Apple’s Human Interface Guideline Ant to understand more about the rationale behind the most commonly used design interfaces.
2. You don’t have to reinvent the wheel.
This lesson is similar to the previous one. As designers, we feel the urge to leave our legacy in the work because that’s how we make an impact and feel validated. Such personality is admirable, but it can be equally damaging to your early career as well, especially if your work is used by plenty of users.
Remember that you don’t have to go out of your way to make the design look astonishingly beautiful, if that means decreasing usability of the website or application. One way to overcome this is to make use of design critique session to spot that symptom.
3. Should designer learn to code?
If you’re pursuing a web or app related industry, I highly recommend you to learn how to code. Coding helps you recognise good design patterns, which puts you even closer with the users.
My advice from here onwards will be development-related. Shorter, but still important.
4. Learn whatever tech stack that makes the bread, then only start paying attention what is trending.
The question “what should I learn next” usually comes after you’ve learnt HTML, CSS and basicJavascript. So how do you decide which CSS or Javascript framework to learn? Bootstrap vs MUI? Tailwind vs CSS-in-JS? React vs Svelte?
IMHO, the most straightforward answer is learn whatever that gets you a job. For example, if you notice that most of the development stack requires you to learn React, then learn that first. You’ll also arrive to such decisions based on the nature of your work. For example, if you’re keen into developing bespoke web layouts, then you’ll probably learn Tailwind as your main CSS framework; if you’re keen into developing corporate tools and dashboard, you’ll probably pick Bootstrap and Material UI due to the availability of templates for rapid development and prototype out there.
If you’re still unsure which one to learn, learn the one that is most often talked about. In the end, either one, it will never go wrong.
5. Learn enough HTML, CSS and Javascript. Then, pick frameworks and run with it. Also pick a CMS
After working with multiple frameworks, you’ll become comfortable working with one particular tech stack. This is when you’ll start to have opinion about how to web should be built based on the best design and development practices you’ve acquired. This is where you can pick the frameworks you use most, and run with it. This is because you might not always learn the next hot stuff, unless it has a big advantage over the current tech stack you’re using.
6. Learn web hosting and start building in public.
Put your work out there and don’t be afraid of rejection, as critique is part of the growth. But before that, you’ll need to learn how to host your website. Host your code on git, and connect your repository to somewhere like Netlify, Vercel and GatsbyCloud. If you can resist the urge to not purchase a domain name for every project, you can deploy a website at no cost at all.
7. True magic happens when you bridge between no-code and low-code.
I wish people would realise that the choice between those no-code vs low-code has more to do with the project requirement, not our own preference.
For example, all the design courses that you can find on my side project Prepr.tv are curated on Airtable and data are sourced from it to the GatsbyJS site using Gatsby source plugins. However, if I fancy less, I can choose to embed the Airtable sheet directly on the website.
It’s about knowing what you can do with your tool that is more important. You do not have to utilise it fully, but make sure it is good enough to scale based on your requirement. Nothing is overkill if it is free to begin with.
8. Pay attention to accessibility at the start, because you’ll not if you start later
I say this because I got caught up with fancy design trends and complex tech stack when I first started out, because frankly, accessibility is boring to maintain.
But doing it isn’t hard, as you can find easily google for an accessibility cheat sheet. Be mindful about neurodiversity by using plain language for micro-copies. As a developer, the simplest way to go about accessibility is to use semantic tags and have good understanding of how to use aria-s correctly. You’ll also want to keep an eye on accessibility friendly frameworks, especially when it comes to components like form inputs, modal and dropdown.
If you have good resources to learn about accessibility design, do send them to me so I can include them on this post!