Thread by @thearslankhalid

- Landing page design

Step 1: Wireframing 101 with a Case Study

My first thread...😅

Wireframing is simply making the layout of the website using pen and paper or any web design tools.

#100DaysOfCode #DEVCommunity #Codenewbie #Webdesign #webdevelopment

Advantages:
- Focused approach in finding the content
- Easy to experiment
- Reduces a ton of designing effort
- Builds the foundation for the project
- Helps develop a storytelling experience

How to start:

- Define the purpose.

Is it to sell or inform or convert? Write in one plain line.

For example: The goal of the website was to generate leads.

- Define the tone according to the message.

For example: As the goal was to generate leads from business women therefore went a bold + modern layout/tone with the focus on using elements to assist the message.

- List number of sections.

For example: Brainstormed following sections based on the website goal:

Header
Reinforcement section
Features section
Call to action
Credibility section
Subscription section
Footer

The sections between header and footer can vary on your goal.

- Start with the header

For example: Started with the header and used the rectangle as the primary element.

The approach is to wireframe the header section and then build over it.

Here's the header wireframe for you:

- Pick one shape and carry

Here are the wireframes of the of the sections 2 - 5:

Look how rectangular buttons, rectangular images, and rectangular blocks have been used.

The tip is to have one shape. Be it rounded, be it rectangular, be it any polygon.

One shape approach is good for building simple and elegant wireframes.

If you feel like building an online experience, feel free to use shapes/SVGs that enhance the message and purpose.

Here are the wireframes of the sections 6 and 7:

- Experiment

Experiment a lot till you satisfy yourself and the wireframe flows with the message.

The goal is to have multiple sections targeting the goal.

Let's have a recall:

- Wireframe before web design
- Write the goal
- Decide the tone
- Decide the number of sections
- Start with header
- Pick one shape and carry
- Experiment a lot

Quick quedtion:

Would you read if I wrote a more detailed blog post?