Beautiful Images Create Beautiful Websites

Why is it important to have beautiful images on your website?

Simple! Humans are first and foremost visually stimulated, so we tend to study images before reading the text on any page.  Images register quicker in our minds, they are also stored in our long-term memory whereas text is stored in our short-term memory banks.

Beautiful Images
The text is imperative to convey the desired message or proposition to the consumer and ultimately dictates the site’s position on keyword searches, but images have the ability to impact on the user instantly. According to Tribute Media, your site has only seven seconds to grab your visitors attention, images undoubtedly play a key factor in this.

Beautiful Images

These beautiful images are used by a leading commercial construction specialist based in the North East. The full-width images on their website convey more than a simple headline or byline ever could, encouraging the user to investigate further and spend more time on the page.

Beautiful Images

 

Key points to remember when working with images –

  • Image Quality – make sure the image is of the highest quality and doesn’t appear grainy.
  • Don’t Stretch – never stretch an image to fit a space.
  • Cropping – cropping can help your image fit a space and focus the eye to a key area of interest.
  • Stock Images – can help you get a feel for a design before you have your own images, and or, help you complete your site with great images. Check Pexels for ideas.

 

 

 

Creating a brand

When designing a website, it’s important to have in mind how you want people to view your business. That’s where branding comes in.

Having a website can be a great branding tool and help your business to increase brand awareness. It can be used as a platform to showcase your brand’s personality and a way of connecting with potential customers.

Insolvency Practitioners, Connect Insolvency’s website, is professional, sleek yet has a modern edge to it. Based in Newcastle Upon Tyne, the company needed a website that would not only promote their services but also their brand.  As you can see on the homepage, the colours, blue, green and pink are used throughout which correlate with the Practitioner’s logo. The minimal design coupled with the colour scheme is effective in portraying a contemporary feel. The look of the website gives visitors an impression of the company. Here, it’s the feeling that they are up-to-date, tech-savy and approachable.

Connect Insolvency website homepage

Using Icons in Web Design

When you’re creating a website there is one very important thing to remember – you need to ensure that in a very short space of time you have attracted visitors and driven them to your call to action.

You can have the best content in the world but if the site isn’t visually pleasing then you’re unlikely to see any conversions.

One way to hook visitors and drive them through to other areas of the site is through the use of icons. They are a very visual way for visitors to understand and identify with what you’re trying to tell them. We all see icons and symbols constantly in daily life, so our brain instantly identifies them. It makes sense therefore to use them on your website.

Lets take a look at some websites that have used icons.

Sleeky Web Design

Newcastle web design agencyThis Newcastle web design agency has used custom icons to clearly illustrate their range of services. The use of colour further differentiates the services.

Inspect Air

Inspect AirThis company which offers arial photography has used custom icons to show the different sectors they offer their services to. The instantly recognisable icons appeal to individuals who may not realise that they work in their sector.

J3 Building Solutions

J3 Building SolutionsThis website for one of the leading construction companies in Newcastle has icons to demonstrate their four services in a very visual way. Any visitor to the site will identify the symbols and what they relate to. Anyone looking for Newcastle builders will instantly be able to access the information they require.

So you use custom icons on your website? It’s a great way to get your mesage across and appeal to visitors, as shown above. Let us know what you think!

Enquires Done Right

If your website is there to drive business enquiries rather than selling products or services directly, it’s essential that calls to action drive website viewers to a contact form which is easy to use, gets the user to think about what they’re looking for and makes it as easy and interesting as possible.

Contact forms are one of the most essential aspects of your businesses website. A poorly designed form will result in missed opportunities, when someone with money to spend on what you offer is baffled by a confusing form with 100 fields, or a tiny form hidden in the footer of your site.

Here are five examples of contact forms done well.

Detox.com

seo blog 1 image 3A website offering vital recovery services for addicts of various chemical and physical indulgences needs to be clinical, approachable and easy-to-use. The contact form on Detox.com makes it easy for the user to select the precise treatment they need. This not only ensures the user selects the correct information but also qualifies the sales lead to the clinic, quickly identifying which service they need to sell.

Blue Sky Resumes

seo blog 1 image 2A service offering professional CV writing solutions provides a friendly, visually enjoyable contact form which gathers a substantial amount of information in small, manageable chunks. This is vital when a form plays a larger part in an organisation’s activities, as a difficult to fill in forms can result in poor quality leads and needless additional admin time.

Pharmacy Seekers

seo blog 1 image 4This business, offering property selling opportunities and business support to individuals and companies with a pharmacy for sale, has a simple, well laid out contact form on every page – maximising the sales opportunities from it’s visitors. The form is laid out horizontally as to not break the layout of the site and is clear and concise in it’s execution.

Achieve 3000

seo blog 1 image 3An accelerated learning organisation will receive many types of enquiry due to the nature of the business hierachy. The contact form on their website immediately qualifies which department to route the query – be it a software demo, a sales enquiry or standard customer support.

Denise Chandler

seo blog 1 image 5A form doesn’t need to just work well – a visually appealing form will be more engaging for hovering customers who need an extra push. Denise Chandler, a web designer, has a beautifully simple and engaging form which manages to gain valuable project and budget information from the customer without feeling too corporate or pressuring.

5 Beautiful Free Serif Fonts 2016

Modern typography isn’t all about sleek san-serifs. There is still a place for the more classically shaped serif fonts – and don’t think because they hark back to times of old that they can’t be fresh. Here are five of our favourite serif fonts available for free.

libre baskervilleLibre Baskerville is a free alternative to the famous Baskerville typeface, with modern curves and subtle serifs.

gandhi serifGandhi Serif is great for body text, it is slightly narrower than the other fonts on this list and as such is very distinctive.

ashbury lightAn elegant font suitable for headings and body text, Ashbury is equally at home on the website for a masseuse as it is on the pages of a novel.

anglecia proA great font for headings, as seen on this website for Prestwick Care Homes North East. Elegant and classy with a sweet modern edge.

cinzelCinzel is an updated version of popular typeface Trajan Pro. It shares many characteristics but has a highly unique Q which you need to see – please note this font has no lowercase characters so is suitable only for headings and logos.

Ten Hot Free Web Fonts

Whether you use Google Fonts, Adobe Typekit or any of the other free or paid for web font tools available, there are so many great fonts now available that look great across all browsers and operating systems. Here are ten of our favourites, along with a link to show them in action and where to download for free.

1. Montserrat
montserratGreat for: Headings & Body Text
Similar to: Proxima Nova
See it in action
Download it

2. Bariol
Great for: Body Text
Similar to: Arial Rounded
See it in action
Download it

3. League Spartan
Great for: Headings
Similar to: Futura Bold
See it in action
Download it

4. Gandhi Sans
Great for: Body Text
Similar to: FF Nexus
See it in action
Download it

5. Nexa Rust Slab
Great for: Headings & Logos
Similar to: Rockwell Bold
See it in action
Download it

6. Tex Gyre Adventor
Great for: Headings & Body Text
Similar to: ITC Avant Garde
See it in action
Download it

7. Galana Grotesque
Great for: Headings & Body Text
Similar to: Futura PT Bold
See it in action
Download it

8. Lato
Great for: Body Text
Similar to: Proxima Nova
See it in action
Download it

9. Roboto
Great for: Headings & Body Text
Similar to: Bebas
See it in action
Download it

10. Museo Sans
Great for: Headings & Body Text
Similar to: Myriad Pro
See it in action
Download it

Icons: PNG or SVG?

In these days of responsive design there is much more for a designer to consider than ever before. With the advent of retina and 4K displays we are presented with further questions – how do we design for such a high resolution? JPGs lose quality when scaled up and the file size is such an issue that we can almost discount them completely unless we’re talking photos. When it comes to logos, icons and other modern visual standards, our best two options are PNGs and SVGs.

PNG
Portable Network Graphics (PNG) is the most lossless image compression format currently used online. Designed as a higher quality replacement for the antiquated GIF format, PNG is designed for transferring images on the internet rather than professional quality print graphics and therefore works in the RGB colour space.

Advantages of using PNG for your web graphics:

  • Full browser support
  • Most people have PNG editor software available
  • Works with photos or other difficult to vectorize images

PNG graphics are used here.

SVG
Scalable Vector Graphics (SVG) is a vector based image format for 2D graphics, which supports interactivity and animation. SVG files are defined by text based XML files, meaning they can be searched, indexed, scripted and compressed. Vector graphics can be scaled up – or down – without any loss in quality and clarity.

Advantages of using SVG for your web graphics:

  • Seamlessly supports browsers of any size
  • Scalable up and down on event, such as a hover effect
  • Stylable with CSS (changing colors, outlines, etc.)
  • Capable of being generated dynamically, either on the client or server side.

On the downside, SVG support in browsers is still at the growth stage, so it will be a while until SVGs can completely replace PNG.

SVG graphics are used here.

Text or Icons?

When designing websites or software interfaces, one of the main decisions to be made is whether to use text buttons or icons. Or even both. The answer, of course, depends on the situation, but here we’ll look at the main points of difference between the two.

Text

  • Some concepts aren’t as easily represented by visuals, in which case text is the best option. Text is recognisable by all users.
  • Text is recognised by screen readers so help to improve a site’s accessibility.
  • Text can be styled to be visually appealing and to stand out where needed.
  • Text can be translated easily if required, e.g. multi-language sites.
  • Words are already there – designing icons requires extra thought and work.

Icons

  • Icons are instant whereas words need to be read. One icon can do the work of 20 words and takes 1/20 of the time to process.
  • Icons are memorable and unique.
  • Icons take up less space on screen than sentences of descriptive text.
  • Icons can communicate the ‘personality’ of a brand, and help create a cohesive visual style throughout a website – e.g. edwardscleaningltd.com

Top Ten Productivity Apps

Smartphones and tablets have firmly established themselves as essential tools in (and out of) the modern workplace. With the right combination of device, connectivity and apps it’s possible to work from wherever you are – be it on a train, in a restaurant or sat in front of the footy on a Sunday afternoon. Here’s ten great apps that will help you vastly increase your mobile productivity.

1. Mailbox (Android, iOS)

A fully featured email tool which links with Gmail and iCloud and gives you the power to run through your packed inbox with a minimum of fuss – swiping sends your mail to the archive or trashcan, enabling you to quickly get down to the nitty gritty of your important emails. This app actually learns from your actions, for instance meaning conversations with friends automatically ’snooze’ until evening time. You do need to be using Gmail or iCloud to enjoy the features of this app – but with a little bit of setup you can route your emails directly to your relevant account.

2. Trello (Android, iOS)

This bulletin board app allows you to drop anything from notes and pictures to tasks and saved messages onto organised sections which you can share with colleagues. It’s a great tool for planning out projects, combining ideas and focussing aspects of your workflow. Whether you want to create an inspiration board or co-ordinate a team Trello is flexible and dynamic enough to cover all bases.

3. Lastpass (Android, iOS)

LastPass is an excellent tool for saving that most precious of commodities – time. LastPass is a secure password vault, automatic password generator and web browser all in one. Never fill in another login form again and get straight to the task in hand.

4. Evernote (Android, iOS)

The best known note-taking app out there today, Evernote allows users to upload notes, pictures, video and audio and then arrange them in the cloud to share with collaborators and colleagues. A range of advanced features makes Evernote a powerhouse for organising, formatting and sharing.

5. Pocket (Android, iOS)

Save interesting reading material for later with Pocket – a ‘read later’ service which saves your articles to your device allowing you to read them later when time is available. A great feature of Pocket means you can read the articles without using a data connection – ideal for on the tube or in the bath.

6. Dropbox (Android, iOS)

The most popular cloud storage platform out there, Dropbox allows users to store files online and access them from anywhere. Perfect for home working or keeping up to date with project progress on the move, Dropbox’s free plan allows you up to 2GB of storage space, with more space available to premium members.

7. Quip (Android, iOS)

Quip is a fully featured mobile office app – with added functionality that allows you to message and collaborate with colleagues. Create, import and share task lists, documents and notes and then share with your colleagues who can add their own edits and input. Importing documents from Dropbox, Google Drive and Evernote is a breeze and you can output files in Office or PDF format.

8. Sunrise (Android, iOS)

A free calendar app that allows easy organisation of your time. The app syncs with your existing calendars and brings them all into one easy to use planner. Background syncing, quick events, reminders and multiple timezone support help boost the usefulness of this neatly designed app.

9. IFTTT (Android, iOS)

IFTTT (if this, then that) allows you to ‘bake’ your own processes, saving you time on repetitive internet tasks. For example, if you go into a meeting set IFTTT to automatically tweet your colleagues to let them know. The possibilities are endless.

10. Microsoft Office Mobile (Android, iOS)

Create and edit Office documents on the go, with support for charts, graphics, formatting and sharing. A subscription is required for some of the higher end features but with the new ‘free for home use’ structure you can enjoy some of the functionality for free.

1 2 3 4