best websites of the world

FRONT END DEVELOPER/
WEB DEVELOPER/
WEB DESIGNER/
LONDON/ SURREY/

Tag Archives: Web Design

Great google web font combinations – Part 2

A few months ago I wrote a blog post showing 10 good combinations of google web fonts. The feedback and views of the blog post were outstanding so I have decided to write a part 2 showing some other great google web font combinations. I hope you enjoy it and do let me know if you have any suggestions!

Dosis & Ubuntu

Dosis_Ubuntu

Bitter & Source Sans Pro

bitter_Source

Bree Serif & Open Sans

Bree_Open

Playfair Display & Muli

playfair_Muli

Sansita One & Kameron

Sansita_Kameron

Nixie One & Ledger

nixie_ledger

Molengo & Lekton

molengo_Lekton

Sintony & Libre Baskerville

sintony_Libre

Monda & offside

monda_offside

AbeeZee & Grand Hotel

abeezee_Grand

Search

Social

CSS em Units Explained

Most web designers and web developers have relied for years on pixel values. I for one didn’t really know allot about using em values. This article will hopefully try to explain what em units are and how you could use them in your projects.

What exactly is an em value?

Formal definition from of the unit

“Equal to the computed value of the ‘font-size’ property of the element on which it is used.”

So if we have set the font size of an h1 element to 20px and then we used the following code:

H1{
	font-size: 20px;
	line-height: 1.2em;
}

this would set the line height to 20% bigger than the font size set. So it would be 24px high.

But what if you don’t set the size of your font? Generally in your CSS tree you will have set font size’s at some point, I don’t really see how you cant! But if no font size has been set the size on an em unit will result to 16px.

The only way you can learn is by doing! So lets try one more.

Say we have a div with a font size set to 20px how would you go about setting the width and the height of the div to be the same as 100px? Well 100 / 20 = 5 so you would set the height and the width of the div to be 5em like so:

.div {  
    font-size: 20px;  
    width: 5em;  
    height: 5em;  
}

A little tip – comments

Recently I have completed some work in collaboration with some other web designers and developers. To be polite the codes comments were particularly light. Its not really that necessary to comment CSS code quite as much as if you were writing in PHP or C# however in the case of using em it is really helpful. For the example above I like to comment like the example below. This really helps after a while to get your head round em units and you will be grateful when you go back to look at your CSS file in a few months time!

.div {  
    font-size: 20px;  
    width: 5em; /* 100px / 20px = 5em */
    height: 5em; /* 100px / 20px = 5em */
}

Round up

I found it quite hard to get into the habit of using em units after using pixels for such a long time. However the new releases of the popular css frameworks, Foundation.Zurb and Bootstrap include the use of em units.

While current trends in web design make use of responsive layouts I believe the use of pixels and percentages are necessary for setting container sizes etc. However the use of em units become useful when setting sizes in relation to fonts.

Search

Social

Great Google Web Font Combinations

Google Web Fonts started out with a handful of fonts on offer to the public, these days there are over 600 to choose from. This large resource comes in handy when designing websites allowing a designer to include a new custom font with the copy and paste of a small snippet of code.

Whilst the large resource is hugely beneficial, sifting through over 600 fonts to find combinations that work can be time consuming and quite hard work. I have written this article on which fonts I think work well together and that I have used in past and current projects.

Lobster & Cabin

Lobster&cabin

Arvo & PT Sans

Avro&PTSans

Droid Serif & Droid Sans

DroidSans&Serifs

Volkorn & Ubuntu

Volkorn&ubuntu

Oswald & Lora

Oswald&Lora

Merriweather & News Cycle

Merriweather&NewsCycle

Sanchez & Quicksand

Sanchez&Quicksand

Avro & Open Sans

Arvo&OpenSans

Varela Round & Muli

VarelaRound&Muli

Droid Sans & Raleway

Droid&Raleway

Lobster 2 & Droid Sans

Lobster2&DroidSans

I hope this is somewhat helpful. Thanks for reading!

Search

Social

How To Gather Web Design Inspiration & Ideas

As a web designer and developer I find myself constantly needing some kind of inspiration, whether it’s for a new web page design or a new image slider that needs to be built. There is a fine line between using a website as inspiration and ‘stealing’ the ideas.  When I first started in the enormous industry of web design and development I purchased the book “The Web Designer’s Idea Book”. This put forward the idea that a good designer would take elements from existing work merge them together to create an entirely new design. Now sometimes, as I’m sure most designer have, I have a moment where I can just see everything in my mind of how it should work and look and that’s great, but sometimes I get a bit of a mental block and need some help. The following article lists some great websites and books that I have used and recommend to gain inspiration, and remember don’t steal!

Inspiration Websites

I could list hundreds of websites that I have used to gather inspiration; my bookmarks tab is full in chrome!

My favorite place to look for inspiration is on awards websites. This is because it lists a huge amount of websites that people have voted for and that have won awards. The general standard of design and usability of the websites listed is very high which provides a high standard to work too.

http://www.cssdesignawards.com/

I use this website when I need some fast inspiration, its great to browse hundreds of web designs in a few minuets.

http://www.thebestdesigns.com/

The Best Designs provides a well-categorized list of websites. For example if you the look and feel you are going for is “dark” you can filter the results they have by that category, which stops you from sifting through hundreds of irrelevant entries.

http://www.awwwards.com/

Awwwards is my favorite chosen website to work with when it comes to inspiration. There filter system for looking through entries works perfectly allowing a user to find relevant designs with ease. You can sort the entries by, Keywords, Tags, Colour etc… This website is a must for your web inspiration bookmarks tab!

A few others worth checking out:

http://www.designlicks.com/

http://americandesignawards.com/

http://www.webbyawards.com/

ThemeForest

As I’m sure you are aware ThemeForest is a website that designer can sell templates and themes for websites. Some of the designers on this website really are top class showing some great designs especially responsive web ones, which have really helped me in the past to get a feel off where elements will go when a page is responding.

Inspiration Books

I know that everything is available on the web for no cost, however I am still a fan of being able to pick up a book and look at print material to gain inspiration. I use 2 books regularly: The Web Designers idea book Vol 1 and 2. These are available from amazon and are cheap for what you get! I believe Vol 3 is coming out this year too.

Round Up

There are thousands of beautifully designed websites out there these days. Research into existing websites and gathering inspiration is key to the development of a website. However always keep in the back of your mind of how the website will work. Its all well and good to have an amazing web design but if the website doesn’t work and let a user achieve there goal it is pointless. Try to cross the design and usability.

Thanks for reading and any comment would be appreciated!

Search

Social