#pattern libraries

New item has been added on ThemeKeeper.com https://themekeeper.com/web-design/ux-in-60-seconds-using-component-libraries

Having taken a break from my full time job I’ve been really enjoying getting my nose into lot of books and articles that I just hadn’t had the time to read. I’m also getting my head around various ways of working to truly understand the differences and when each are are best used. It’s easy to get stuck in that way of thinking when you’re working full time in a single company which uses the the same processes across projects. Taking a step back has really helped me realise the pros and cons to the ways of working I’m previously used to.

Option A - Building a website with a CMS and an off-the-shelf CMS theme

For example, Wordpress.

Useful for marketing or e-commerce website with a common/simple structure.

Cost: Low

Speed: Quick

Quality: Medium

Pros

Themes usually allow for colour and minor style changes, sometimes allowing custom CSS. This is good for articulating a brand identity

Modern themes usually have responsiveness baked in

Cons

Maintenance is required. You’ll have to keep things up-to-date and secure as updates are released. This includes the CMS installation (e.g. Wordpress), your theme, any plug-ins, even the underlying software on the hosting server

Website can become bloated with superfluous features offered by the theme

UX Contribution

A UX consultant can help their client to understand the needs and functional requirements of the website, help pick out the most suitable theme, define the pages and where content sits.

VD Contribution

Most of the visual design is pre-defined by off-the-shelf themes. However, visual designers can make decisions around any custom styling (if available) and how this needs to be updated to reflect the brand identity.

Option B - Creating a bespoke website using a UI framework

For example, Bootstrap or Semantic UI

Useful for anyone who needs a custom website/application with specific functionality. Smaller companies that can’t afford to invest in a custom pattern library and who know the functionality of their website/app will increase over time through iterative releases.

Cost: Medium

Speed: Medium

Quality: Medium

Pros

Can integrate your preferred CMS (e.g. Perch)

The styling can be customised to reflect the brand identity through

Much faster than building your own custom UI framework and so you can quickly get an MVP website up and running

Flexible

Frameworks have responsiveness baked in

Cons

Code can be quite bloated as there will be a lot of the UI framework which is unused

Components are restricted to what is offered by the framework, though components can be grouped together to create additional features

UX Contribution

A very collaborative approach with visual designers and developers that will see the UX designer through several stages: Define the Information Architecture, User Journeys, Content Strategy/Analysis, Lo-fidelity wireframes (blocks on pages), choose components from the UI framework to use in the hi-fidelity wireframes maybe making a few tweaks as needed, design page templates.

VD Contribution

Decisions around the custom styling and how this needs to be updated to reflect the brand identity

Option C - Building a website with a custom UI framework/pattern library

For example, atomic design.

Useful for anyone who needs a custom website/application with specific functionality and components, who doesn’t want the bloat of using an already existing UI framework and who wants their website to look unique.

Cost: High

Speed: Low (not as low as other less lean and agile methods of similar vein)

Quality: High

Pros

Can integrate your preferred CMS (e.g. Perch)

Having a living pattern library means you can have a more consistent interface design and experience

You can set up your pattern library as a living source code which when updated will update on production website (Lonely Planet managed to do this by building a custom API called Rizzo). This means an efficient workflow and no conflicts from design to code

Allows you to add/change pages on a regular basis by utilising page templates and living components.

Useful when designing websites that have lots of pages using the same page template (in these cases the page needs to ‘work’ regardless of the exact content of the page and this is achieved using atomic design because you design without content initially)

Cons

Longer set up time and more testing required, as there are no predefined considerations (such as responsiveness, accessibility, etc.)

UX Contribution

A very collaborative approach with visual designers and developers that will see the UX designer through several stages: Define the Information Architecture, User Journeys, Content Strategy/Analysis, Lo-fidelity wireframes (blocks on pages) and Design hi-fidelity atoms, molecules, organisms, page templates

VD Contribution

Style tiles of overall styling and design of components (organisms) which will be translated into code, some full page mock ups to validate the design of components and overall styling

Notes:

UX research can be done as part of all of these projects

There are many more pattern libraries out there I just put a few of them for now and will be updating as I came across:

http://ux.mailchimp.com/patterns/forms

http://www.starbucks.com/static/reference/styleguide/