Arslan Khalid Profile picture
Jun 26, 2020 12 tweets 4 min read Read on X
- 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: Image
- 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. ImageImageImageImage
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: ImageImage
- 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?

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Arslan Khalid

Arslan Khalid Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @thearslankhalid

Oct 2, 2020
CSS Animations:

Usage and Performance and Tips

🧵A thread 🧵
Usage:

Only two properties are required for a CSS animation.

1. animation-name
2. animation-duration

All other properties are optional.
@ keyframes is the timeline for an animation:

You can use it in the following two ways. ImageImage
Read 8 tweets
Oct 1, 2020
CSS Easing Functions:
Easing is a word used to describe the acceleration and deceleration of a transition or an animation along a timeline.

We can plot this a graph.

The graph for a linear easing is a straight line. Image
Animation timing function property in CSS allows to specify the easing.

We have 5 easing functions already baked into CSS. Image
Read 7 tweets
Sep 25, 2020
CSS Transitions:

Usage and Performance

🧵A thread 🧵
Usage:

Only two properties are required for a CSS transition.

1. transition-property
2. transition-duration

The other two properties are optional ( transition-delay and transition timing function )
There are two ways to use transitions.

A. You could break everything.
B. Shorthand.
Read 9 tweets
Sep 24, 2020
Getting😎with JSON:

( 🧵A mini-thread🧵 )

JSON is used to exchange data with server.

Consider you are a developer for a car showroom and you need to add new cars to your database.

For example the new cars JavaScript Object is:

#javascript #100DaysOfCode
Servers receive data in string format.

So you have to convert to your new cars JavaScript object to a string.

JSON.stringify() function can help you do that.

Here's how:
When getting data from server, the data is always a string.

You can use JSON.parse() function to convert the received cars data into JavaScript object.

For example:
Read 4 tweets
Sep 20, 2020
🔥Git Good Practices

1. Make clean commits:

Don't do too much on one commit.

Fix one bug, commit, fix second bug, commit and so on.

Break features into steps and repeat the clean commit process.
2. Good commit messages:

Capitalized, meaningful names in the present tense is the best commit message practice.

Example:

Added responsiveness to the website
3. Commit often:

Create small commits for any meaningful update that you make.

For example, when you add a new section or code a new component.
Read 5 tweets
Sep 18, 2020
CSS Property ( will-change )

The will-change property hints the browsers what properties are going to change.

Therefore, helping the browser set up optimizations before an element is actually changed.

This is great for optimizing animations / transitions.

Here's how it's done Image
Although it seems cool to use will-change as much as you can to optimize the performance of the page.

It's recommended to use on elements that are sure to change like sliders, modals.
Moreover, will-change property should only be used to tackle performance issues not anticipate them.

Optimizations use machine resources to accelerate the rendering process and it can become a lot labor intensive for browser to optimize unnecessary elements.
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(