However, the brain makes use of patterns and natural observances to make inferences about an object. Optical illusions take advantage of this, by tricking the brain into making an inference about the scene that is not true.

Prepare to be amazed, puzzled, and possibly even confused by these awesome examples of optical illusion photography.

I have taken three of my favorite font foundries and showcased 29 of the most beautiful fonts from their collections, the quality of these fonts is pretty amazing, some are more suited to print work and others for use on the web as they support the @font-face property. Take a look and add them to your collection.

Lost Type Co-op

Lost Type Co-op is an indispensable one of a kind type foundry, founded by Riley Cran and Tyler Galpin. Lost Type distributes high quality fonts from designers all over the world with a unique twist allowing you to pay anything you like for the fonts you download.

You can download the fonts for free if you want but, if you have a heart then you can specify the amount you wish to send to the type designer.

Ribbon

Franchise

Airplane

HomeStead

Oil Can

Ranger

Airship

Vevey

Aldine

Quaver

Mensch

Duke

Ministry

Governor

Tommaso

Muncie

Highlands

Deming

The League of Moveable Type

The League of Moveable Type features only the highest quality fonts all of which are free and open-source, the featured fonts also are @font-face ready so you can safely use them for the web.

Ostrich Sans

Fanwood

Linden Hill

Raleway

Prociono

Goudy Bookletter 1911

Sorts Mill Goudy

Junction

Exljbris

Exljbris font foundry is the type home of Jos Buivenga, here he showcases his stunning type collection and allows you to download some of fonts for free.

Anivers

Calluna

Museo Sans

You may also like:

18 Free Stylish Sans-Serif Fonts For Your Collection

20 Minimalist & Typographic Brochure Designs

20 Free Fonts For Beautiful Headline Typography

Your website has to be user friendly. If your website usability is poor and your site is hard to use, customers are more likely to bounce off the site, reducing your chances for success. This means that it is important to make sure that your website usability is tested with easy to navigate and to use architecture, after all you want an intuitive website. The good news is that there are online web design tools that can help you figure out how others see your website which will help improve your websites usability.

Evaluating User Experience

One of the best things you can do is make sure your user is getting the experience he or she expects – and wants. You can do this with the help of the tools on this list:

Feedback Army

Allows you to ask users open-ended questions. Their responses can give you a feel for their experience.UserVoice: Manage feedback from your web visitors. It’s even possible to publicly display information so that your community members can vote on suggestions.

Page Speed Online

Load time is huge. If your visitors become frustrated with slow load times, it’s game over for you. Use this tool to help you determine how to speed things up.

Pingdom Tools

A great, basic speed test for your website.

Check My Colours

How often have you visited a website, only to find that the contrast was insufficient, and it was difficult to read? This usability tool will test the colors used, and help you tweak your design to provide better readability.

Readability Test from Juicy Studio

Can people actually read your website? Find out if you’re making things too complex for visitors.

WordsCount

Before you put something on your website, test out with this usability tool. It will help you figure out how many words you have – and how many might be too big. Also evaluates how easy your text is to read.

W3C Markup Validation Service

Ensure that your website is properly accessible. This web usability tool will help you double check your xHTML markup.

Browsershots

With so many options available for browsers, you need to make sure your website visitors can properly view your pages. Use this tool to see how your website looks in different browsers, and let it guide you to make appropriate tweaks.

Vischeck

How does your site look to someone with color blindness? Find out, and fix weaknesses in color selection so that more people have a better experience.

WebAnywhere

More and more people are using assistive technology to help them experience the web. This tool helps you find issues with your site when someone who uses assistive technology for the blind, or other assistive software, accesses your site.

How Are People Using Your Site?

Another important part of user experience is how people actually use your website. How are they getting around? Are they able to complete their desired tasks? The following website usability tools can be quite instructive:

Navflow

Use this tool to watch how users move on your website. Provides path analysis that can help you tweak your navigation.

WriteMaps

Create a site map that can better guide your web visitors.

OptimalSort

Use this tool to help you sort cards, and help you tweak the navigation on your site.

Websort.net

Another card sorting tool, you can use this one remotely, helping you improve your website’s ease of use from anywhere.

Treejack

Test your trees to make sure that the information on your site is intuitively organized.

PlainFrame

After you have used other navigational tools to tweak your site, this site will test its efficiency and usability in real time.

Intuition HQ

Record how quickly web visitors complete tasks, and then make changes that can help them see better results.

Loop11

Make use of this remote test to set up different task analysis reports. Perfect for pinpointing problem areas.

Usabilla

Target specific tasks with this website usability tool, figuring out which might be most frustrating for visitors – and how to fix them.

FiveSecondTest

Quickly assess which interface elements on your website are easy to use.

With a little help from the right usability tools, you can learn what problem areas might be frustrating your users, and find solutions that will ensure users have a good experience, and keep coming back.

Chameleon

Modest

Magnificent

Simple Press

Daily Notes

Minimal

Minimal Portfolio

inFocus

Classica

Dandelion

Minima

Clarity

Solo

Craft

Filtered

Pure

Elemin

ThemeMin

More and more websites are being created everyday. Lots of businesses decide to enter the web to make more clients and more money. As we all know you need to be different and stand out from the crowd to be successful on the web.

Appropriate use of mascots in web design plays very important role of branding and marketing of the website. If you use attractive, memorable mascot you will grab attention of your visitors very easily and this will help you to create strong authority in the market.

In this showcase you’ll find 30 beautiful examples of mascots implemented in website design.

Stickybeak

WebMunky

Themes Kingdom

Gadget-o

R U Hot Enuf?

Squared Eye

Fatburgr

MULTIWAYS

Mozilla Firefox

Designer’s Atelier

UpThemes

Spout Creative

Birthday Gorilla

Kinetic Shadows

Designzillas

Branded07

Silverback

Creative Spark

Solid Giant

MailChimp

Support Saint John School

theEvnt

CoachOasis

Foxtie

Forever Heavy

Plinio Tejeda

Veerle

Inspiredology

Greenhouse Energy

Maxlabs

Final Result Preview

This is the finished product of the tutorial. (View Large)

Tutorial Resources

TitilliumText font, @font-face Compatible.

Social Media Icons by Gedy Rivera.

Apple iOS Linen Texture by Orman Clark.

960.gs Grid System.

Set The Canvas

Before you begin designing and creating the structure of your portfolio, it is a good idea to work to set of grid lines, I like to use the 960.gs grid. Once you have downloaded this and unzipped the file contents, you will find the PhotoShop PSD grid in the folder named templates. For the purposes of this tutorial I will be using the 12 column grid template, I find it really useful to turn the ‘Guides’ on, – View -> Show -> Guides.

Open the downloaded grid PSD called ’960_grid_12_col.psd’ and re-size the canvas to width: 1021px and height:1400px. Image -> Canvas Size. Create a new layer and fill this with the color:# f5f2f2.

To add a some more depth to the background canvas I will use the Apple iOS Linen Texture, unzip this and open the PSD called ‘os-linen.psd’. Duplicate all the layers apart from the layer named base color to your PSD file. Select the top four layers and duplicate to your file – Layers ->Duplicate – > Your_PSD_Name.psd. Set the opacity of the two dark textures to 70% and the two lighter top layers to 20% opacity.

The final background texture we will use will look like so:

Creating The Header

Create a new ‘Group’ and name it ‘Header’, - Layer -> New -> Group, whilst inside this new group create a new layer called ‘header _line’, – Layer -> New -> Layer. With this new layer selected, draw the pink line to the dimensions of width:1021px and height: 6px. To create the shape, simply use the the ‘Rectangle Tool‘ and use the color:#ee6d72 for the line. You will be able to see the line dimensions by selecting - Window -> Info from the top menu.

Once you have created this top line you will need to duplicate it, name the new duplicated layer ‘header_line_white’. To duplicate the line select the layer called header _line and select – Layer -> Duplicate Layer. Make this new line half the height but use the same width and move it to the bottom of the layer called header _line, once in place, change the color of this layer to: #ffffff;

The resulting top line will look like so:

Next we will create the typography, earlier I gave you the font I used to create the welcome message and page headings, download TitilliumText and install it onto your PC/Mac.  Create a new group whilst still inside the Group you made earlier, call this new Group – ‘Strap Line’. Organizing and naming your layers and groups correctly makes it so much easier navigating around the PSD, it also makes it much easier when you come to code up your PSD into XHTML.

To create the header text, whilst inside inside the Group ‘Strap Line’ I created a new layer, selected the ‘Horizontal Type Tool’ and typed in my welcome message: “Hello, my name is David Martin.
A front end developer/designer from the UK.”. I set the font size to: 11pt and the color to: #000000.

Notice I place my welcome message to the right of the first three columns of the 12 bar grid, this leaves me room to place my logo in columns two and three as I will be leaving columns one and twelve blank. I do not want to create a cramped and confused design.

To help separate the welcome message from what will be the page body, I created a simple divider line, to do this, whilst still inside the ‘Header’ group, create a new group called ‘Line Separator’. Create a new layer called ‘Separator Line Top’ and using the ‘Rectangle Tool‘ draw a line which will cover a full ten columns on the grid. The line dimensions will be – width: 780px, height: 1px and the color of this top line will need to be set to #d5d5d5.

To create the illusion of a letterpress style on the line, select the layer ‘Separator Line Top’ and duplicate it, rename the new layer ‘Separator Line Bottom’ and move this new layer to the bottom of the layer ‘Separator Line Top’, set the color of ‘Separator Line Bottom’ to #ffffff.

Creating The Body Content

The left and right content areas will be created with a width equal to four grid lines each and will be separated by two grid columns.

Creating The Form

Create a new group and name it ‘Contact’, within this group, create a new layer for the heading text “Contact me”. Using the the same font as before ‘TitilliumText’ type the contact message into the grid lines, I aligned it so that the heading starts on grid column 8. The character settings used are – size: 8pt, weight: thin.

The form input fields are created using the ‘Rectangle Tool‘, I create the ‘name’ and ‘subject’ input fields so they start on grid column 8 and have the dimensions – width: 300px, height: 30px. The message textarea has the dimensions width: 300px, height: 130px. For each input field and the textarea I will add a very subtle Inner Shaddow. Select the input field layer and select – Layer -> Layer Style -> Blending Options -> Inner Shaddow. Set the Inner Shaddow settings to - Blend Mode: Multiply, Opacity: 75%, Angle: -90, Distance: 1px Choke:0px, Size: 0px, Color: #ebe9e9.

Keeping consistent with the grid guidelines, I will create the form button to sit between grid columns 10 and 11. Using the using the ‘Rectangle Tool‘ I create the button to the dimensions of – width: 140px, height: 30px.

For the form button I will add a Gradient and Stroke. Select the button layer and tick – Layer -> Layer Style -> Blending Options -> Stroke & Layer -> Layer Style -> Blending Options -> Gradient Overlay. The button color is set to #ebe9e9, the Stroke settings are -  Size: 1px, Color: #ebe9e9. The settings I used for the button gradient are – Blend Mode: Normal, Opacity: 100%, Style: Linear, Angle: 90. Set the left Stop Location color to #ebe9e9 and the right color to #f1f1f1,  set both the Stop Locations for the gradient sliders to 50%  like below -

Creating ‘About Me’

This is, as you can see pretty straight forward, the only thing to note is the font  in use which is Helvetica Neue 45 Light. Download and install this font and set the font settings to size: 2.5pt, Leading: 4pt, Tracking: 100, Color: #2a2828. Create a new Group and name it ‘About me’. Within this group create a new layer, using the ‘TitilliumText’ fonthis will create the ‘About me’ heading. The font settings for this font is -  size: 8pt, weight: thin. Below this I will create a new layer for the ‘About me’ text blurb. All the text is aligned to the start of the second grid column and will span no more than four columns in total.

Creating the ‘Project Feed’

The project feed will span an entire ten columns of the grid. I create a new group called ‘Project Feed’ and within this two new layers for the heading text and paragraph below. The heading text font is again – size: 8pt, weight: thin and the font settings for the paragraph below is – size: 2.5pt, Leading: 4pt.

I decided that I wanted to pull a feed of images into the page using the Dribbble API, in the future, when I expand on this design I will modify it to show more detailed information about project work. Within the ‘Project’ group I create a new sub group called ‘Feed’. For each feed image the total size will be exactly three grid columns, including the image padding and border.

Create a new layer and use the ‘Rectangle Tool‘ to create a box to the dimensions of – width: 220px, height: 144px. The box background color needs to be set to #ffffff and a 1px stroke will need to be added to this box. Select the layer and click Layer -> Layer Style -> Blending Options -> Stroke. Set the stroke to 1px and the stroke color to #dedbdb. The actual feed images will sit inside this white box, the image size will be - width: 200px, height: 124px.

Creating the ‘Footer’

Creating the footer is very straight forward due to the simplistic concept, firstly create a new group named ‘Footer and create a new layer. This will form part of the two dividing lines at the top and bottom of the footer. Select the new layer and using the ‘Line Tool’ draw a 1px line that spans across a whole ten grid columns. Set the color of this 1px line to #dedbdb and duplicate the layer – Layer -> Duplicate Layer. Change the color of the new duplicated layer to #ffffff and move it to the bottom of the grey line we just created, merge these two layers to create the dividing line so we can duplicate this to use again at the bottom of the footer.

The Twitter and Dribble Icons are courtesy of Gedy Rivera download the PSD ($5 – well spent) and duplicate the Twitter and Dribbble icons into the PSD. I re-sized each icon to 30px by 30px and set the icon color to #dedbdb.

The Final Result

This is the finished product of the tutorial. (View Large)

Coding the concept…

Subscribe to the RSS feed or follow DesignWoop on Twitter for part two of the tutorial, where I will code the concept from a PSD to a responsive HTML5 single page portfolio.