A web design walkthrough. Before we dive into that, let’s find out از میرا وڈھر | December, 2021

Data inputs and outputs

Find out which component or alert works best for certain purposes.

Ask questions about your site needs:

Question: Do we need a form on our site? If so, what kind of input are we taking?

A: For various options, we can use the checkbox, otherwise we can choose the radio button. We will also use text fields.

Q: In case of failure to submit the form, what should we do?

A: Alert the user using a popup and rearrange all the fields of the form!



Easy navigation means less friction. Keep the design patterns familiar and simple, so that the user does not lose his way while visiting the website.

For example, here are some tips to keep in mind:

  • The basic navbar structure changes into a desktop application and a mobile application.
  • When using handheld devices, the content is structured in such a way that it is easily accessible on the device.
  • Buttons will be larger on smaller devices. Even the font size and distance will be adjusted accordingly.
  • Applications should be easy for the blind or variously disabled.
  • Designing mobile applications is always more concise and comprehensive than the desktop.
Source: https://ux.stackexchange.com/questions/88496/how-do-we-go-about-designing-for-touch-based-desktops-normal-desktops

Wire framing

Wireframe is the basic structure of our website. Low-fidelity patterns consist of sticky notes and sketches, which can be easily done on paper. To further engage with team members, anyone can work on collaborative online tools such as Fagma, Anima, etc. The mid-fidelity prototype is called a wireframe.

Wire frames are used to answer common questions such as:

  • How does one panel connect to another?
  • Where does a button go?
  • How are all the components interdependent or interconnected?


Prototypes are more advanced versions of rough wire frames. They are classified as moderate to high loyalty by nature, as they are mock-ups that can be shown to developers. Prototypes usually consist of colors, materials, events, animations, and real interactions. It’s as close as you can to the final design of an application!

Source: https://www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/

Converting a design template to code is much easier than a task.

It is important to know some of the tools for website development that will help you move your design ideas straight to the code without having to worry too much.


Hypertext Markup Language (HTML) is used as the basis of every web page. A typical layout of a page has different sections and HTML is used to describe those sections on the web.

>> CSS

Basic design skills mean understanding Cascading Style Sheets, commonly called CSS. To keep websites simple and beautiful, I prefer to use Bootstrap CSS.

But if you have a lot of time and you are focused on creating designs that have never been seen before, use pure CSS to add your touch and customize your beautiful site. ۔

Bootstrap + custom CSS is one of the ways I prefer styling features.

>> CSS Grid and Flex Box

Almost all websites are built and somewhat smooth. Each layout requires geometric balance. This is what keeps the elements confined to well-defined spaces. How do we get it? For that, learn more about Flexbox and CSS Grid. Once you understand this, you will be able to see the design in terms of the piles placed on top of each other / overlapping with each other / simply connected in different directions. And then it will be easy to create your own grid and recreate these designs!

Source: https://dri.es/redesigning-a-website-using-css-grid-and-flexbox

>> Media questions

Responsive media queries are a feature of CSS that is used to make your website compatible with different devices. People want access to your design from their phones, laptops or tablets. To make sure the elements are resized accordingly, read on for answers from the media! Again, Bootstrap is ideal for responsive design with their default CSS classes, but it’s always nice to know the people behind it.

You can continue to learn more about animations, transitions and many other creative concepts that improve and design sites. Dynamic In nature. JavaScript, jQuery and many other languages ​​provide different ways to add dynamic and functional features to elements.

Many existing site templates are available online. Analyzing their source code and incorporating your twists into it is one of the best ways to get started with designing.

To learn from Code snippets And coding is a practical way.

  • Canva + Figma are my favorite pair for online design setting. Canvas works well for inspiration and quick layout. Easy for more detailed prototyping and wire framing of Figma pages. It is important to map the elements and the way they will interact with each other. These software applications help me get there. There are other tools like Adobe XD (for modern prototyping), but I stick to them right now … because they are easy to use. And because they are free, hahaha!
  • If you are working on a React application, Material UI provides a lot of professional icons and components that can be easily imported at your request. Other useful libraries include Font Osm Library for Icons, AOS Library for Swift Animations, etc.

Lots of useful libraries, modules and tools are scattered all over the internet, just a click away to find you!

At the end of the day, you will come up with your own ways to combine cool designs and convert them into code. I hope you find this blog somewhat helpful, and I hope you find your own way of designing 🙂

Keep it up till then Discovering + Experiencing + Creating!

Write a Comment