How I created a wireframe for homepage of my website. Web design for dummies.
In this blog, I will create wireframes for my website. I want to create an educational website.
Wireframing tool
Figma is a popular tool to build wireframes. But, this is my first website. So, I would be less techy. I would rather prefer the pen and paper method or Canva!
By the way, I am going to create a low-fidelity wireframe. This means I will use the basic circles and squares to build the wireframes.
The other kind of wireframe is called high fidelity wireframe. We build this by using tools like Figma.
Let's begin.
Who is my target audience?
Well, my target audience is high school students, college students, and professionals.
How do my competitors choose their websites?
Let me take a look at the top educational websites.
The websites and their features I look at are:
The UI shows a large banner that features the company name.
At the top, there are many options. There is also an option to login at the top corner. It has a yellow highlight that stands out in the blue background.
On scrolling, we find many buttons.
Further down there is an option to like the page.
Well, I will not make my website in this exact fashion. Let me take a look at another website.
Wow! Amazing UI. An animated kid’s face is eye-catching. Then the moving birds in love. There is also a wheel. When I bring my cursor on any picture on the wheel, the middle of the wheel displays the show name.
At the top, there is an option to sign in to the weekly newsletter. An option for parents is also available.
Below is a list of games for kids.
There are also certain options over which I can bring my cursor to hear the name aloud.
Altogether, the most interactive UI.
If I have missed out on any feature of these websites then comment below.
So, my website is going to be for grown-ups. Hence, I can take some ideas from both of these websites.
Homepage
How to design a website homepage?
Layout: Don’t provide too much info or images on the website homepage. Keep it navigable.
Images: Use high-resolution images. Images should add meaning.
Color scheme: The color scheme and background should be compatible with each other. For this, I will use some color theory tips.
Buttons and CTAs: If the homepage contains buttons and CTAs then they lead the visitor to other pages. They should be crisp and visible.
I will take a look at the homepage examples to get some idea.
Every design element in the homepage should inform and draw customers towards your business to boost conversions.
Do not give too many options to your visitors. They will take too long to decide. The website UX will fall. So, organize your pages into subpages. But think simple.
For example, I have created a website using google sites. Notice how I have organized the site into many pages. I have added subpages.
Once a person decides that they want to read about computer science and not humanities, they can navigate to the web design subpage.
If I don’t clutter the homepage then there will be a lot of negative space. Because of this negative space, the users will not be confused. So, I have to add a lot of blank space between paragraphs and images.
I should add large images. Moreover, I should understand what steps I have to take to drive my customers to the other stage of the sales funnel.
Wireframe for desktop
On my website, I will provide video lectures and notes to the customers.
wireframe for mobile
Now that I have the wireframe for the homepage ready, I will consider the color palette and design.
I want to keep the color palette sophisticated. So, I will use blue, pink, and yellow colors.
Now, I will use the color palette, specify the font, etc.
I will keep embossed buttons.
First, I will design a logo. I am using two cool colors: blue and pink, and warm color, yellow.
Read more: Warm, cool, and neutral colors in color theory.
I will use Canva to design a logo.
It is a simple logo with a profound meaning. A pencil launches like a rocket in this logo.
‘Launch your dreams’ can be the name of my company.
Yellow and pink stand out in the blue background.
Note that I had not chosen black in my color palette. But black is a neutral color and we can use it with other colors.
Yellow and pink stand out in the blue background.
Note that I had not chosen black in my color palette. But black is a neutral color and we can use it with other colors.
Here is how I will use the color scheme.
Now, let me start building the webpage using HTML.
Conclusion
I have made plans for a single webpage. I will turn it into a real webpage using HTML, CSS, etc. Follow me to know how I did it.
For my complete web design blogs, click here.
Email me at subarnacreative@gmail.com.
Comments
Post a Comment