Content image
Hi, I'm Hugo
30-something years old
From GSIS, Matina
Working independently as Web Engineer
Trying to be a farmer
Content image

Photoshop designs are a perfect way of showing your client what their website will never look like.

Stephen Hay

Design is about solving problems

Good article about this topic

A pattern library is a collection of reusable components, tools and techniques that allow you to quickly build what you need, without reinventing the wheel.

Patterns are agreements. A shared vocabulary to help all stakeholders to speak the same language.

At the core of A Pattern Language is the philosophy that in designing their environments people always rely on certain 'languages', which, like the languages we speak, allow them to articulate and communicate an infinite variety of designs within a formal system which gives them coherence.

This book provides a language of this kind. It will enable making a design for almost any kind of building, or any part of the built environment. Patterns, the units of this language, are answers to design problems: how high should a window sill be? How many stories should a building have? How much space in a neighborhood should be devoted to grass and trees?

More than 250 of the patterns in this language are outlined, each consisting of a problem statement, a discussion of the problem with an illustration, and a solution. As the authors say in their introduction, many of the patterns are archetypal, so deeply rooted in the nature of things that it seems likely that they will be a part of human nature and human action as much in five hundred years as they are today.

source

Atomic Design

by Brad Frost

Content image
Atomic Design book

Tiny Bootstraps for every client

Dave Rupert

Pattern libraries are not just for front-end

Tone of voice

Behavioral

Farming (Permaculture)

  • Highest use
  • Plant guilds
  • Working with heat and water

Tips for creating a pattern library

Yeah. Don't do it!

But if you must:

  • Get everyone involved first
  • Define a set of guiding principles
  • Stick to widely accepted conventions
  • Think about mobile from the start
  • Design for highest use
  • Write down all your decisions
  • Finish what you start

More resources

Learn from the many existing libraries out there:

If you don't really know where to begin, just start with PatternLab.

Learning how to look for patterns

Look for similarities. Once you have a set of similarities, apply them to other objects.
Visualize similarities by connecting these dots with lines.
Look at nature also. Biomimicry. Swarms of birds vs drones. Romanescos.
Learn about the Golden Ratio and Fibonacci range.
Observe daily traffic. Enough to see here in PH ;)
Machine learning can reveal interesting insights. Example: AI program that was programmed to detect curtains in pictures.

By now you might be thinking: dude, get to the point!

There is no point.

Patterns are infinite.

Roger Penrose

Why use a pattern library?

It's important to note that most of these effects are only valid in the long run.

Time saving

  • Faster prototyping and development
  • Less fiddling with CSS
  • Less testing (cross-browser in particular)
  • Less maintenance

Predictable

  • Better testing (unit tests, visual regression tests)
  • Maintain an entire platform from a relatively small core
  • Lower load on support
  • Higher consistency throughout your product / brand

Higher return on investment

  • Reuse as much as you like, at the same cost
  • Scale in ways that would not have been possible otherwise

Thanks