Website development guide
Tips and Tricks resources for designing a stunning website.
TIPS FOR DESIGNING A REMARKABLE WEBSITES
Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.
That’s why we researched the best WordPress fonts that pair better when designing websites according to science! We also give you some WordPress font examples from some beautifully-designed sites, so you can pick and choose what fits your site’s brand.
But first… why should you even care?
As you can see, there are five major categories of font types:
- Serif (The traditional typeface – not good for reading on the web, better for headings than body copy)
- Sans Serif (A clean, modern font – high readability, great for body copy, the most popular choice for WordPress sites)
- Modern (A progressive, stylish font – good readability, can be used for body text or headings)
- Display (The personality choice – alright readability, better for headers than as the main font)
- Script (The fancy font – lowest readability, please don’t use this in your body, and use sparingly for headings, better for logos)
TIP NO. 1
CHOOSE 1 FONT
Each font has its own personality and feeling, so choose one that most represents your brand. By using Whatfont (Google Chrome extension) you can see what other sites use.
Montseratt
Lato
Open Sans
Roboto
Raleway
Simple, Clean and Modern. Most websites use this typeface.
HOW TO USE?
If you are starting out, you can’t go wrong with one of the above fonts. Use font size & font weight to differientate.
Playfair Display
Merriweather
Pt Serif
Crimson Text
Crimson Pro
Traditional, Elegant & Handcrafted Look. Also good for long reading, such as blogs.
HOW TO USE?
Use it for Headings or Logo’s Body Text/Main Navigation use a San Serif
OTHER FREE SANS SERIF AND SERIF TO USE
Top 15 Most Rare Sans Serif fonts
- Acumin
- Glacial Indifference
- Poppins
- HK Grotesk
- Space Grotesk
- D-Din
- Renner
- Alegreya Sans
- Cabin
- Barlow Condensed
- Source Sans Pro
- Gothic A1
- Basier Mono
- Heebo
- Quicksand
Top 15 Most Rare Serif fonts
- Inknut Antiqua
- EB Garamond
- Adobe Garamond
- Source Serif
- Adobe Caslon
- Reforma
- Young Serif
- Butler
- Libre Baskerville
- Quattrocento
- Crimson Text
- Cormorant
- PT Serif
- Caudex
- Spectral
TIP NO. 2
Body Font Size
I would suggest to keep your body font size between 14 px – 18 px for paragraphs
12 px
Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.
16 px
Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.
18 px
Building or updating a WordPress site can be a lot of fun. You get to put your personality into it and build something you can be proud of. One of the most important elements of your site is the font pairing you choose. There are hundreds of WordPress fonts out there, but they certainly don’t all pair well.
TIP NO. 3
Line Length
Use 45-90 characters per line for an easy read. (especially if you have a lot of texts)
NOT RECOMMENDED (BAD)
CLIMATE CHANGE is an economic, public health, and environmental issue that we have a moral responsibility to address. We incorporate climate change awareness in all our investment and development activities in the Middle East and we cooperate to do our best and to be a part of the global effort of healing our earth.
RECOMMENDED (GOOD)
CLIMATE CHANGE is an economic, public health, and environmental issue that we have a moral responsibility to address. We incorporate climate change awareness in all our investment and development activities in the Middle East and we cooperate to do our best and to be a part of the global effort of healing our earth.
CLIMATE CHANGE is an economic, public health, and environmental issue that we have a moral responsibility to address. We incorporate climate change awareness in all our investment and development activities in the Middle East and we cooperate to do our best and to be a part of the global effort of healing our earth.
TIP NO. 4
Text Hierarchy
Define hierarchy by reducing the font size, font weight, or color.
Before
Create an Amazing Headline
Design an “app like” mobile responsive website.
After
Create an Amazing Headline
Design an “app like” mobile responsive website.
Design
A better user experience for you
You can add a top heading like the one above.
DESIGN
A better user experience for you
Reduced font weight, add colour & increase letter spacing.
Marketing
Develop an effective search engine strategy
You can desaturate & capitalize the text like this.
MARKETING
Develop an effective search engine strategy
You can desaturate & capitalise the text like this.
TIP NO. 5
Limit to 1 accent color only
Keep it simple and choose only one color, but use shades of the same color.
The following is a monochromatic color scheme and is an easy way for web designers and web developers to use in ensuring that the website will always looks good!
Pick a colour here: https://www.materialui.co/colors
TIP NO. 6
Use Neutral Colours
Can be used to separate content, header, footer & anywhere you don’t know which color to use.
#FFFFFF
#FFFFFF
#f6f6f6
#cccccc
#999999
#4d4d4d
#222222
TIP NO. 7
Button Styles & Colours
Quick Tip
Try keep your button style consistent. Choose between square or rounded. Normally rounded makes your website a little more friendlier. Square gives it a more designer and professional feel.
Step 1
Pick your main colour
Step 2
Go to 0to255.com
Step 3
Put in your #hexcode and pick colour e.g. #333333
Step 4
Choose a colour that is -/+ 2 shades the original e.g. #222222
Apply main colour to background and the darker/lighter as hover.
Or hover it with one of your accent colours.
TIP NO. 8
Picking the Right Image
Using the right image can make or break a website.
Step 1
Choose an image to support your text.
Step 2
Does the image reflect the style of your website? i.e. Minimal? Expensive? Happy?
Step 3
How to create a 3D Book Cover. See guidelines here.
Step 4
Is your image large enough? see size guidelines below. If not, improve quality here.
TIP NO. 9
How to Add Text Over Images
Always ensure your text is readable by using several techniques shown below.
It is the climbing of the mountain that makes the view from the top so breathtaking
It is the climbing of the mountain that makes the view from the top so breathtaking
Normal image with text overlay
Added background overlay (50%) color to make the text visible
MAKE YOUR LIFE EXTRAORDINARY
MAKE YOUR LIFE EXTRAORDINARY
Normal image with text overlay
Added background color to make the text visible
Note
Not every image is perfect so it need some adjusting. You can add text background, blur the background, or even put a solid gradiant color to a text to make it more visible.
TIP NO. 10
product images
All uploaded sizes should be around be 800 x 800 px
keep the images proportional
key takeaways
must-have resources key tools
My Favourite: You can use a chrome extension called Full Screen Capture to screenshot entire webpages for inspiration.
Use it to also screenshot your own webpage to see if everything is consistent.
TIP NO. 11
HOW TO CREATE GRADIENT TEXT IN ELEMENTOR PRO
All uploaded sizes should be around be 800 x 800 px
Custom CSS for Heading Text
Custom CSS for Paragraph Text
selector .elementor-heading-title{
background-image: linear-gradient(to right top, #ffffff, #cafcff, #00ffff, #00ffdc, #34fc42);
background-clip: text;
-webkit-background-clip: text;
} selector .elementor-text-editor{
background-image: linear-gradient(to right top, #ffffff, #cafcff, #00ffff, #00ffdc, #34fc42);
background-clip: text;
-webkit-background-clip: text;
} How to Generate a CSS Color Gradient
https://mycolor.space/gradient3
Please click here for the tutorial, click on the following link: (Credit to Jim Fahad Digital)…
TIP NO. 12
Alignment, Spacing & Separation
1. Try to align things where possible.
2. Ensure spacing is even. And using white space can make your website appear more simple and clean.
3. Use neutral colors, background images, and divider lines to separate content.
TIP NO. 13
Keep your website simple and consistent all throughout
There are many tools, plugins, themes with all sorts of features but 80% of the time we don’t need to use them.
Just focus on the basic elements such as the text, images, and colors.
Follow the guidelines above and you should have a great website.
Don’t need to be fancy, focus on readability, and also on creating useful content.
You Can Use Image Triggers Instead of Using Buttons!
Our Services
we love what we do.
Creative thinking
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Sales Strategy
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Problem solving
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.