Articles & research papers

Creative design

Subtle Patterns

Subtle Patterns is a free to use tileable textured patterns that can be used by designers and developers for website backgrounds.

Subtle Patterns

Look Composed- How Visuals Can Draw and Drive Attention

As we move toward persuasion engineering we must attend carefully to how our user’s attention is shaped, as well as their emotional reactions. This is important in a simple advertisement. But this is also important, and more complicated, in the interactive world of online media.

We have long modeled and shaped our user’s interaction to ensure good performance. Today that requirement is a given. Now we have to shape the user’s attention to see the things we want seen, and we need to shape the user’s emotional reaction so that we reach our persuasion objectives.

Look Composed- How Visuals Can Draw and Drive Attention

78 Cool Photoshop Brushes For Your Next Project

Photoshop brush sets can be a great time saver for the designers because these allow the designers to easily and quickly create fantastic artwork without the need to draw all the individual design elements.

Good Photoshop brushes have always been in demand, which is why every designer should have a great collection of Photoshop brushes in their tool boxes. It is not hard to find Photoshop sets but finding those with the highest quality can frustrate any web designer on the lookout.

78 Cool Photoshop Brushes For Your Next Project

How to Measure Visual Appeal

Is a beautiful website more usable? Psychological literature has discussed, for some time, the "what is beautiful is good" phenomenon. That is, we ascribe positive attributes to things that are more attractive.

This applies to people and likely to products and websites, as well. But does that positive halo also carry over to our impressions of website usability? It’s a bit of an open research question, but first, it needs to be considered: how reliable are impressions of website beauty?

In reviewing the literature on rating aesthetics, beauty and visual appeal, researchers often generate their own set of questions and scales to measure these somewhat fuzzy and overlapping constructs. There’s nothing wrong with creating new scales, but without any validation, there’s a risk that the way the items are worded may generate misleading or less accurate results than those from scales which have been subjected to psychometric validation.

How to Measure Visual Appeal

The BBCi Redesign Process- Understanding, Concept & Build

In setting out to redesign the BBCi homepage, the team knew they were tackling a hard task. Many people use and love their homepage, so they knew that any changes we make will evoke a strong reaction. They needed to balance the needs of these users with the needs of their own business. They needed to satisfy a large number of people with a range of different objectives, both inside and outside the BBC. Any solution required them to make decisions, but they believed that they had at least made informed choices to ensure a sensitive evolution of the page.

They wanted to make a clear step change with the design of the page without alienating the users. To begin with they looked at the way people use the current page using click-throughs and the way they feel about it through emotional response testing. They looked at how people build up relationships with the services and objects they use on a daily basis. This helped them address the issues they saw in all elements of the homepage, including the main story.Throughout the process, they benefited from continual user testing and internal feedback.

They believe that the resulting page will feel familiar to their existing users, but through digital patina, balanced design and excellent functionality, they also believed they gave it soul. The Glass Wall which gave them the title of this book was the center of the project. Most of their discussions were visualized on the wall and its location at the entrance to the studio ensured everyone could see what was going on and contribute. This book aims to give some background on the process they followed and covers the redesign from its early stages in May 2002 up until launch in November 2002.


The BBCi Redesign Process- Understanding, Concept & Build (PDF, 8mb)

Users Love Simple & Familiar Designs – Why Websites Need to Make a Great First Impression

We form first impressions of the people and things we encounter in our daily lives in an extraordinarily short timeframe. We know the first impression a website’s design creates is crucial in capturing users’ interest. In less than 50 milliseconds, users build an initial “gut feeling” that helps them decide whether they’ll stay or leave. This first impression depends on many factors: structure, colors, spacing, symmetry, amount of text, fonts, and more.

In our study we investigated how users’ first impressions of websites are influenced by two design factors:

  • Visual complexity — how complex the visual design of a website looks
  • Prototypicality — how representative a design looks for a certain category of websites

Users Love Simple & Familiar Designs – Why Websites Need to Make a Great First Impression

The Sketchnotes Channel at Core77

The Sketchnotes channel allows one to learn more about sketchnotes, including a great overview of a new kind of visual thinking and some basics to get started off.

The Core77 Sketchnotes channel

The Space of Design

Models of the process of design are relatively common. Each describes a sequence of steps required to design something—or at least the steps that designers report or recommend taking. Models of the process of design are common because designers often need to explain what they do (or want to do) so that clients, colleagues, and students can understand.

Less common are models of the domain of design—models describing the scope or nature of practice, research, or teaching. Such models may be useful for locating individual processes, projects, or approaches and comparing them to others. Such models also help clients, colleagues, and students understand alternatives and agree on where they are (or want to be) within a space of possibilities.

Typically models of a domain are of three types:

  1. Timelines
    • Lists of events from the domain’s history
    • Links between events suggesting influences
  2. Taxonomies
    • Lists of sub-domains
    • Trees branching into categories and sub-categories and so on
  3. Spaces
    • Venn diagrams indicating overlapping categories
    • Matrices defining the dimensions of a space of possibilities or area of potential

The Space of Design

Repeat-x repeat-y – a seamless pattern resource

Repeat-x repeat-y is a collection of seamless patterns from a plethora of designers, illustrators and artists that you can use for background images in web design.

Repeat-x repeat-y

The Ultimate List of Style Guides and UI Guidelines

If you are a graphic designer or an interaction designer and have ever been tasked with creating a style guide or UI guidelines document (both are different and I’ve had the pleasure to work on both of them creating templates and the actual documents for brands and products), this list should help you out as a consolidated list of references.

This list is going to be constantly updated (and will ultimately be a monster list, it’s quite modest for now) of publicly accessible style guides and UI guideline documents on the web. If you find any links not working or would like to suggest one that is not on the list, feel free to comment and let me know.

  1. Google material design
  2. 3M logo standards (website, partial public access)
    3m logo standards
  3. ABB Brand Identity (website, partial public access)
  4. ACDSee Brand Style Guide (PDF download)
  5. Air Products Identity Standards (website, partial public access)
    air products logo guidelines
  6. Ameritech Graphical User Interface Standards and Design Guidelines (PDF, 1370 kb)
    ameritech ui guidelines
  7. AMAIA Residence Brand Manual (PDF, 816 kb)
    AIMA residence brand manual
  8. Android User Interface Guidelines (website)
    Android User Interface Guidelines
  9. Apple OSX Human Interface Guidelines (website)
    Apple OSX human interface guidelines
  10. Apple iOS Human Interface Guidelines (website)
    Apple iOS Human Interface Guidelines
  11. Barbican Visual Identity (website with PDF download)
    Barbican visual identity
  12. BBC Future Media Standards & Guidelines (website)
    bbc future media standards and guidelines
  13. BBC Global Experience Language (GEL) (website)
    BBC gel
  14. Belfast Zoo Brand guidelines
  15. Blackberry and RIM wireless handheld UI Developers Guide (PDF, 1.3 mb)
  16. BlackBerry Branding Guidelines (PDF, 300 kb)
  17. Brick brand guidelines
  18. Cargill Identity Style Guide
    Cargil brand identity guidelines
  19. Cambridge University Brand Guidelines
    cambridge brand guidelines
  20. Cunard Brand Guidelines
  21. ELMER 2– User Interface Guidelines for Government Web Forms (PDF, 1.2 mb)
  22. Easy Group Brand Manual (PDF, 2 mb)
  23. Eclipse User Interface Guidelines
  24. Federal Identity Program (Canada)
  25. GOOD Technology Brand Identity Guide
  26. Gnome Human Interface Guidelines
  27. Heineken Visual Guidelines
  28. Java Look and Feel Design Guidelines
    java look and feel guidelines
  29. KDE User Interface Guidelines
  30. Kew’s Brand Guidelines (PDF, 5 mb)
  31. Microsoft Inductive User Interface Guidelines
  32. Microsoft Surface User Experience Guidelines
  33. MITRE- Guidelines for designing user interface software
  34. NASA style guide
  35. Novozymes’ brand guide (private access)
  36. The New School Visual Identity Manual (PDF, 6.5 mb)
  37. The New School Web Style Guide
  38. Oracle Alta Mobile UI Guidelines 
  39. Oracle Alta UI Guidelines
  40. Oracle Fusion Help User Interface Guidelines
  41. Oracle Applications User Interface Standards for Forms (PDF)
  42. Oracle Browser Look and Feel (BLAF) Guidelines
  43. Oracle Fusion Applications User Experience Patterns and Guidelines
  44. Oracle Rich Client User Interface (RCUI) Guidelines
  45. Palm OS User Interface Guidelines
  46. RSA Brand Guide
  47. SAP Design Guidelines and Resources
    SAP design guidelines and resources
  48. Silicon Graphics Indigo Magic User Interface Guidelines
  49. Skype Brand Identity Guidelines
  50. Spelman College Visual Identity Guidelines (PDF, 1.3 mb)
  51. Reuters Brand Center
  52. Taligent Human Interface Guidelines
    Talegent human interface guidelines
  53. University of Northern Colorado Identity Style Guide (PDF, 2.3 mb)
  54. WebEx brand style guide
  55. Windows User Experience
  56. Windows User Experience Guidelines
  57. Windows User Experience Interaction Guidelines
  58. Windows XP Visual Guidelines (There’s a download section to the right to download WindowsXP DesignGuidelines)
  59. Yale Web Style Guide
    Yale web style guide
  60. Yale’s Visual Identity
    Yale visual identity