A Web Design Walk-Through
Before we dive right in, let’s know the difference between website development & website design.
>> Web Development: Focuses on the actual core structure of the site, functionalities & live features. Implemented with actual code.
>> Web Design: Caters to the aesthetics, visual layouts, user-focused features of the website.
As far as I know, every client has a different need for their product. Web designers are able to capture the essence of their requirements and convert these ideas into a design template. This site template is then handed over to web developers, who code it into a fully functional website. The design then springs to life.
A designer and a developer are a power duo, honestly. But instead of their skills being mutually exclusive…wouldn’t it be better to have the best of both worlds? I believe technology + design go hand in hand, and both fields are equally creative and challenging. In these modern times, We’re in need of both tech-savvy designers & artistic developers.
After all, good design is the key to providing good user experiences!
Before getting started directly with coding, a developer should be able to visualize the site in their head. Or at least on paper, because not all of us are professionals when it comes to constructing blueprints mentally.
UI/UX Design
User Interface Design (UI) focuses on visual design and micro-details in layouts. UI designers try to make patterns creative enough for an enjoyable user experience.
User Experience Design (UX) focuses on tasks, navigation, good user experiences in terms of usage of the application, etc.
You can read more about UI/UX in this article.
An easy way to understand UI & UX :
An easier way to understand UI & UX :
What is good design & how do we work towards that?
Minimalistic Design
Minimalism isn’t just a way of life, it’s the way of keeping designs as classy as possible. If you’re aiming for elegance, always remember less is more. Negative Space works great to highlight the important features & text.
In the example given below, a good amount of spacing using padding & margins, leaves the area looking decluttered. Visual Hierarchy ensures that the user reads the heading before the sub-heading.
Typography
Text should be readable, legible & be able to get the message across to the user. Font Combinations are available all over the internet, choose any one that fits your theme! Using 2–3 fonts at most is recommended. A mixture of fonts may seem unprofessional & chaotic.
Also use appropriate occasion-specific fonts.
School Report Cards don’t use funky fonts. But if you’re making birthday party invitations, go for it! :D
Color Palettes
Meaningful colors are used to set the perfect mood for your creation. Once again, a color palette should contain at most 4–5 colors. Color-coding small details & too many splashes of colors everywhere might turn your website into a rainbow, so be careful. Don’t think too much, just use color theme generators & ready-made gradients for eye-catching compositions.
Theme
What’s the aim of your site? Every site has a different goal and it’s necessary to recognize this. You see, an e-commerce platform will be different from a social media one.
What emotion should the site convey? Is it a fun recipe-sharing site? A professional corporate site? A news dashboard? Create a ‘brand’ with the audience in mind.
Data Inputs & Outputs
Know which component or alert works best for certain purposes.
Ask questions about your site requirements:
Q: Is there a form required on our site? If so, what type of inputs are we taking?
A: For multiple options, we can use checkboxes otherwise we can opt for radio buttons. We’ll use text fields too.
Q: In case of failure in form submission, what should we do?
A: Alert the user using a popup and reset all the form fields!
etc.
Navigation
Easy navigation means less friction. Keep design patterns familiar & simple, so the user does not lose his way while going through the website.
For example, these are some tips to keep in mind:
- The primary navbar’s structure changes in a desktop application & in a mobile application.
- When using handheld devices, content is structured such that it is easily reachable on that device.
- Buttons will be larger on smaller devices. Even font size & spacing will be readjusted accordingly.
- Applications have to be convenient for the visually impaired or differently-abled people.
- There’s always more brevity & conciseness in designing mobile applications than desktop ones.
Wireframing
A wireframe is a basic skeleton of our website. Low fidelity prototypes consist of sticky notes and sketches, which can be done easily on paper. For further brainstorming with team members, one may work on collaborative online tools like Figma, Anima etc. Mid-fidelity prototypes are called wireframes.
Wireframes are used to answer common questions like :
- How does one panel link to another?
- Where does a button lead to?
- How interdependent or connected are all the components used?
Prototyping
Prototypes are more finished versions of rough wireframes. They are categorized as medium-to-high fidelity in nature, as they are mockups that can be shown to developers. Prototypes generally have colors, content, events, animations, and actual interactions. This is as close as you can get to the final design of an application!
Codify your design.
Converting a design template into code is easier said than done.
It’s important to know about some tools for website development that would help you transfer your ideas of design straight into code, without causing you extreme distress.
>> HTML
Hypertext Markup Language ( HTML ) is used as the foundation of every webpage. A typical layout of a page has various sections and HTML is used to define these sections on the web.
>> CSS
Basic design skills mean understanding Cascading Style Sheets, commonly known as CSS. To keep websites simple yet elegant, I prefer to use Bootstrap CSS.
But if you have more time and are focusing on creating never-seen-before designs, use pure CSS to add your own touch and customize that beautiful site of yours.
Bootstrap + Custom CSS is one of the ways I prefer to style features.
>> CSS Grid & Flexbox
Almost all websites are structured, and somewhat symmetrical. Every layout needs geometrical balance. It’s what keeps elements confined in well-defined spaces. How do we achieve this? For this, learn more about Flexbox & CSS Grid. Once you understand it, you will be able to view designs in terms of boxes stacked on top of each other / overlapping with one another / merely aligned in different directions. And then it’ll be easier to create grids of your own and re-create those designs!
>> Media Queries
Responsive Media Queries are a feature of CSS used to make your website compatible for different devices. People may want to access your design from their phone, laptop or tablet. To make sure elements are resized accordingly, read about responsive media queries! Once again, Bootstrap is ideal for responsive design with their pre-defined CSS classes, but it’s always good to know the working behind it.
You can continue to learn more about animations, transitions and many other creative concepts that enhance sites and make design dynamic in nature. JavaScript, jQuery and many other languages provide different ways to add motion and functional features to elements.
There are tons of existing site templates available online. Analyzing their source code & adding your own twists to them is one of the best ways to get started with designing.
Learning from code snippets and coding along is the practical way to go.
- Canva + Figma are my favorite duo to set up a design online. Canva works well for inspiration and quick layouts. Figma is convenient for more detailed prototyping & wireframing of pages. Mapping out elements and the way they will interact with one another is essential. These software applications help me achieve this. There are way more tools out there like Adobe XD ( for advanced prototyping ), but I tend to stick to these for now…because they’re easy-to-use. And because they’re free, haha!
- If you’re working on a React Application, then Material UI provides a lot of professional icons and components that can be imported easily on your application. Other useful libraries are the Font Awesome library for icons, the AOS library for swift animations, etc.
Lots of useful libraries, modules & tools are scattered all over the internet, it’s just a click away for you to find!
At the end of the day, you’ll come up with your own methods to conjure up cool designs and convert them into code. I hope you find this blog somewhat helpful, and I also hope you find your own way of designing :)
Till then, keep exploring + experimenting + creating!
