BP Imperial

A fun display font by George Triantafyllakos. Get it at http://www.backpacker.gr/font.asp?m=1&font=bp13

Blog redesigned - comments?

// I hadn't touched my blog's design for a bit over year, so I thought it was time for a refresh. Yes, In case you haven't noticed, I have a blog at which contains a full (an indexed) archive of all my Google+ posts. 

So over the last 20 months I have ended up writing about a big variety of topics and I realised people probably would not want to scroll through the entire article to get to the next one. So the content on the homepage and category pages needed to be "compressed". Also the big header was taking up to much space, pushing everything down. 

With that in mind, this redesign set out to achieve the following: 
- Provide a cleaner layout with emphasis on content (kind of obvious but still) 
- On the home page and category pages, give instant access to more content 
- Improve navigation options by replacing the drop-down menu with a list of categories
- Remove social media junk (there were all sorts of buttons) that had gathered over the years

You can see the before (left) and after (right) on the screenshot. Check out the site here http://bit.ly/giannopoulos 
What do you think?

(Masonry effect using Isotope by David DeSandro. Fonts used are Homenaje by Constanza Artigas Preller and Agustina Mingote and Roboto by Christian Robertson, you can find them on Google Web Fonts)

Finally, an awesome UX tutorial

// Answering the question "What are the best resources for learning bleeding-edge web, UI and UX design?" on Quora, Colm Tuite, UI/Visual Designer & Developer, decided to write one of this own. The result was an extensive post / #tutorial  with 10 steps to a decent (if not great) start in learning about #UX. To sum up: 

1. Discover the problem
2. Get to know your users
3. Learn to #wireframe properly
4. Communicate effectively
5. Guide your users
6. Encourage your users
7. Reward your users
8. Learn the basic fundamentals (HTML, CSS, JS, Ruby, Python etc.)
9. Learn visual #design
10. Study. Study. Study.

Read the full article here http://b.qr.ae/XNmOQH

Colours, Emotions, Brands

// This kind of chart has been going around the net for a while, but a reminder is always good :)

If you're looking for more #marketing -oriented #color   #infographics  see also How do colors affect purchases?
http://bit.ly/VG6O70

(Chart by The Logo Company http://bit.ly/VG6wwT)

The interface is (part of) your brand

// When it's pointed out it is kind of obvious but you might not consider it otherwise. Interface elements are indeed part of your brand. If you're not convinced take this quiz: can you recognise the origin of the buttons on the image below? 

Answers on the original article by +Marc Hemeon : http://bit.ly/11cxFK9 Marc has more guidance on designing your buttons. 
(via +Nassos K.) 

15 Years of Apple.com

// A collection of #Apple 's home page layouts since 1997!
http://www.slideshare.net/choehn/15-years-of-applecom-15990876

Reminder: People come to your site to consume content

// They do not come to see ads or others links to other pages to your site, or navigation links or social media buttons.

So it is a bit counter-productive if the first 800 (probably more) pixels of your page do not have a single line of text from your content. The example below is from NBCNews.com: in a 1440x900 resolution you always will need to scroll in order to start reading the article. Above the fold you just get the headline (which you already knew when you clicked the link to go to the article) and half of a photo.

Who designs (and who approves) these kind of layouts? 

Icons in a Font: Elusive & Font Awesome

// Elusive and Font Awesome are two open-source #fonts containing over 200 icons each. They are geared to be used with Twitter Bootstrap but you can use them in any kind of project. 

Check them out!
Elusive: http://bit.ly/VCtQ9B
Font Awesome: http://bit.ly/WatPZ5
If you need more #free  choices, here some more in font and PNG formats: http://bit.ly/UKIqxA

A Laconic History of the World

// Simplifying history is of course... simplistic, but still here's a #fun    #typographic   #map  designed by Martin Elmer of maphugger.com 

This map was produced by running all the various countries’ “History of ...” Wikipedia article through a word cloud, then writing out the most common word to fit into the country’s boundary. The result is thousands of years of human history oversimplified into 100-some words.

Reader's companion with more information http://bit.ly/12XGpC6
Zoom on it http://bit.ly/U95AjO

A Laconic History of the World

Google+: View post on Google+

Characteristics of a modern portfolio site

An extensive and excellent collection of portfolio sites, mainly for designers and developers. Still, food for inspiration...

Of all of the types of websites, the portfolio site has to overcome what might be some of the most difficult hurdles. Talk to almost any designer and they will agree, launching your own portfolio site is a painful process. Most frequently, this process includes numerous versions and, often times, a launch out of sheer frustration.

Full article : Characteristics of a modern portfolio site | Webdesigner Depot.

A CRAP way to improve usability

Here is an excellent introduction to core values of good design. Read it and check which apply to your site :)

Good visual design offers more than improving people’s attitudes to a design. Good visual design will actually make interfaces easier to use.
There are at least four key principles of visual design that have an important impact on usability. These four principles — contrast, repetition, alignment and proximity — were originally given the engaging acronym CRAP by Robin Williams (the visual designer, not the comedian). You can exploit these four principles to make user interfaces both more attractive and easier to use.

Full article: A CRAP way to improve usability | Userfocus.

Designing UX Exchange

An excellent case study of designing for the Web. Most often web designs start with a let's-make-something-pretty concept instead of first realizing what is the content, the desired features and which are the user actions we want to "provoke", and the developing a design to accommodate these elements.

UX Exchange is a Q&A site in the Stack Exchange SE family of websites, the most famous of which you probably know: Stack Overflow. Every SE site has its own look and feel, and as the UX site is getting close to graduating from beta, a new design was in order.

Full article: Designing UX Exchange.

How do colors affect purchases?

Source: How do colors affect purchases?