Create attractive customised social media buttons

Adding social media buttons to your blog pages helps generate more likes and shares if they post your shareable on their walls.
- UX
- Easy
How do you design a website? An interactive infographic of 68 easy-to-action website design tips for your inspiration. Create the best web design possible!
Adding social media buttons to your blog pages helps generate more likes and shares if they post your shareable on their walls.
As Flash doesn't work on Apple mobiles and needs a plug-in to play, it's no longer popular. Best avoid!
Before adding links out to your Facebook or Twitter profiles, ask yourself "Do you want people to use them?" Only link to them if they're updated regularly and add value and if you don't mind people leaving your site to visit their own social media!
Choose colours with symbolism in mind. Red means stop/danger to most western people, so shouldn't be over-used, but when used sparingly it can say Important or add gravitas. Green means go for it and symbolizes health.
Create a simple outline of your site using rectangles to decide where everything goes before starting work on the final web design.
For branding it's best to use a consistent style of image throughout your site and particularly on a single page. Don't use cartoons, life-like illustrations and photos all on the same page.
Google's manual analysis guidelines recommend including a 'Contact' page that shows a phone number, email address and physical address. This also helps user-experience.
Have you noticed fonts speak volumes? Fat fonts say fun and kids. Classic Sans Serif or Modern Serif say classy and clean. Serif and Courier are classic and newsy.
If there are too many popups or adverts visitors are more likely to click 'back' and simply ignore your whole site. Take a long term perspective and show you value your visitors, not just that you want them to click an ad. Google also penalise sites that are "Top Heavy" with adverts.
If you are new to design and working in layers, a good tip is to name your layers for ease of editing.
If you're redesigning your website or logo, then a modernisation or simplification is often better than a complete redo. An important element of redesign is that visitors can still recognise that it's the same brand.
In Google's Rater Guidelines they recommend including an 'About Us' page. This also helps user-experience.
It can be tempting to add all your menu items in various drop-down menus, but this can confuse your visitor or cover other content. Instead carefully select which menu items are most important and only use drop-downs if you need to.
It's important that hyperlinks are a different colour to the rest of your text, but using the default blue underline dates your website considerably.
Make sure the colour of your site matches your product or service. Fiery red is not indicative for health or wellbeing, blue denotes community. Google uses multiple colours to indicate you can find everything with their search engine. Unless you want to indicate something similar, choose one or two dominant colours for your site instead.
Many people expect to be taken to the home page if they click the logo or header and this is an easy web design element to implement to make your site more user-friendly.
Modern classic design uses plenty of white space - the padding or margins between different blocks of text is 'white space', regardless of the colour of the background.
Mystery meat' is a term coined to describe confusing navigation options, where you use nondescript images or rarely used symbols for navigation. This makes it hard to navigate the site and is bad for SEO.
Never use a splash page (a page that simply says 'Enter site'). It's terrible for SEO and studies show that 25% of people will simply click 'back', before even arriving at your website.
Over 90% of people aged 50 and up need glasses or other visual aids and it's important that your font size is large enough to read easily. We recommend 16px-18px.
Photographs really pop on a plain white, black or chrome background. If you are designing for a gallery let the art or photos take the limelight.
Quoting expert sources, or linking to sites that provide extra information helps add authority to your message. As Marlene Deitrich said: “I love quotations because it is a joy to find thoughts one might have, beautifully expressed with much authority by someone recognized wiser than oneself.”
There are great open source CMS systems out there like WordPress and Drupal that allow you to adapt existing templates. Use them, rather than starting from scratch.
There is a colour combination on website design that needs its own category. I call it bras or cars, it is the colour of bachelor pads - red, black and chrome (grey). These colours turn up on the web everywhere but should really not be used to sell anything but cars and bras.
Use KISS - Keep It Simple Stupid! Remove any clutter, extraneous activity or animations and use a clean design that allows visitors to focus on the important points.
Using one font for your headings and another for the main body text is all the variety your core content needs. If you do use a third font, use it outside of the main body (e.g. for your logo, menus or footer text), more than this just creates confusion.
Visitors need to be able to easily read text and may not have your eyesight. Make sure that there's sufficient contrast between your text and the background. Studies show it's actually easiest to read a dark hue on a light or white background, rather than black on white.
Your main body of text should be a maximum of 75 characters wide to make it as easy to read as possible, otherwise readers may skip a line.
A good looking site is a pleasure to use and gaining user feedback will help you improve user experience (UX) considerably. Complete this in 3 stages - Stage 1 - Ask open questions to a few friends / family / employees to identify the areas that need the most work and fix the worst mistakes. Stage 2 - Use the initial feedback to create a multi-choice questionnaire to identify what the other priorities are and ask as many users or others in your target audience for feedback. Stage 3 - Implement the changes.
Add a block to your home page to automatically show new content, e.g. the latest products, blog items, users, etc. This keeps it fresh.
Aim to create a clean classic design. Don’t be distracted by short-term trends, Google colours, bright turquoise and lime green, grey, grey and grey….
Approximately 10% of males are red-green colour-blind. If you have charts, availability calendars or other content on your site that use green and red, add a secondary differentiator (e.g. light / dark or stripes / no stripes) and a key showing which is which.
Ask yourself if everything on your site needs to be there. Particularly suspect are tag boxes, long text boxes that are duplicated on every page and lengthy menus. If it doesn't add something, delete it.
Babies and cats are said to sell anything, but truly good design leaves a lasting impression with your visitors and conjures an emotion within them. Use original images that inspire, are symbolic and communicate your message.
Break up long sections of text with illustrations or photos and create harmony between text and images.
Certain industries have a common style and if you spot all your competitors using one style, it's best to either copy it, or create your own style which illustrates your unique differences. You can also take inspiration from completely unrelated websites.
Choose a template or theme with a responsive design. This means that your site will adapt to any size browser and look good whether visitors are on a mobile device, tablet or desktop computer. This will let you reach the widest audience possible and give you an SEO boost.
Do not add curtains to your site, excessive text or other clutter in the sidebars. Too much information (including long lists of links) in the sidebar reduces reader's concentration and can cause information overload. Consider replacing sidebars with taller footers or longer pages.
Flat vs 3D, Classic vs Modern or CGI vs simple iconic. There's no best website design choice, but it's important you're consistent, so choose a style, then apply it consistently throughout your website.
Identify what your priorities are in terms of design, functionality and SEO, then put together a checklist to be sure that you achieve them all.
Keep text and images in harmony. Don't over explain, instead add the emphasis, meaning or clarity with a good, clear illustration.
Light and dark, depth of field, whether shapes are flat or embossed and your visuals all create an overall impression. If your website was a movie, ask yourself what genre would it be? Is this what your clients are looking for?
Make your design style relevant to your subject, cartoons in bold colours for kids, gentle relaxing images for wellbeing, precise and efficient for money and well-co-ordinated for a shop.
On large sites breadcrumbs (links back to the parent categories) help the user-experience.
Studies have shown that adding a call to action (e.g. "sign up for our newsletter" or "get in touch") at the top of your home page will significantly improve your conversion rate.
Target the right audience. Are you targeting business executives or sports enthusiasts? Are you targeting children, or their parents? Keep your target audience in mind when designing the site and writing the content, don't try and please everyone.
Tell visitors what your unique selling points are - why is your brand better than others? If possible also SHOW them why you're best. The best way to do this is with client success stories or testimonials.
The human body and face are symmetrical and people find symmetry inherently beautiful. As far as possible, use a symmetrical design.
Use a short tagline near the top of the page that summarises your unique selling point in a few words
Use designers to design, developers to develop, copywriters to write and SEO experts to optimize. This may seem obvious, but each person in a team will bring their own strengths to a project. Web design is a creative process and the outcome is best when each expert works on their own area as part of a co-ordinated team.
Using inspirational illustrations from a professional graphic designer will go a long way towards making an inspirational website design.
Using large images on your site can help it stand out, however it's important that you only upload them the maximum size they'll ever be displayed (e.g. if your site's 1000px wide, don't upload 3000px wide images). You can also compress them using Google's tool (shown below), then clicking "Download optimized image, JavaScript, and CSS resources for this page".
Write a blog that is relevant to your product or service and educates your reader, but don't over-sell on it. It should build trust and demonstrate your expertise.
You may love your website design, but do your customers? Keep an open mind as there is always room for improvement.
A 404 page is the error message visitors receive when they arrive at a page that isn't there. 301 redirect visitors to an alternative page when you delete something and configure a custom 404 page that looks good, includes a dash of humour and e.g. a search form or links to your home page, contact page and blog.
A lot of people search for the current year when doing searches and it's also a way of telling visitors your site's up-to-date. To add a copyright message where the year is automatically updated e.g. © 2017, use the following code:
© <?php echo date("Y") ?>
Depending where you're based, it's often a legal requirement to show a cookie policy. This is best shown as a pop-up at the footer of the page and should include a message like "To give you the best possible experience we use cookies..." This should link to your Privacy Policy
Features tell, benefits sell. Apple didn't sell their first iPod by saying "1GB storage", they said "1,000 songs in your pocket".
Google Webmaster Tools tells you which pages and keywords are ranking well in Google and Analytics tells you how long people are spending on a page, click through rates, etc. Prioritize pages with high traffic but low ratings.
Grab visitors' attention immediately with original images, bold colours and snappy titles.
If you edit out the background from an image, you're safest making it a transparent .png, rather than replacing the background with the colour of your site. This means if you change your site's colour in the future, all your images will still look good.
If you're on a mobile device it can be frustrating when you're trying to click a link, but click the wrong one. This is caused by having too small a 'size tap' and it helps users and your SEO to have an appropriately large size tap on each link.
It can be tempting to incorporate text into an image when you want fancy fonts or writing over a background image, however this makes it harder for Google to read the text and should be done sparingly. Instead add text over images using CSS or add the font to your website using a tool like Drupal's Font Your Face module.
It may be impossible to design a site for 3D glasses, hologramatic projectors, or to know what technology or code will be invented, but there are things you can do to future-proof your website. Design it with a responsive theme, choose hosting that lets you easily upgrade and focus on creating great content and a beautiful design rather than obsessing about specific trends or Google algorithms.
Personalise sign-up messages, thank you messages and even error messages to give your website a personality. Using humour, particularly visual humour works well too.
SEO (appearing high with search engines) is essential for every website. We've written 200 SEO tips in the same format as this infographic to help explain SEO to designers.
Showing a page is loading helps encourage visitors to wait, rather than pressing the 'back' button, a webmaster's worst enemy. The language site Duolingo uses a great example of one, showing the O at the end of their logo rotating.
When designing a responsive website it's easy to forget that other format - print, however some people prefer to print pages to digest information at their leisure, so you may wish to add a style sheet designed for printing.
Indigoextra Ltd © 2006 - 2023
UK Tel: +44 (0) 208 1234 618
France Tel: +33 (0) 602 222 354