Patternry Blog

Simplifying Workspaces and Focusing on Collaboration

Sun, 12 May 2013 21:24:47 +0300

Patternry is essentially a service for teams and companies who need a shared front-end resource for UI design & development. In addition to teams we have also supported individual designers and developers with Personal Workspaces which were for private use and testing purposes. However, Personal Workspaces have been of little use and caused some confusion among users. Therefore, starting from today we decided to discontinue Personal Workspaces to simplify the Workspace-concept and to be able to focus entirely on team collaboration.

What’s happening to my Patternry account?

You can no longer access your Personal Workspace and need to create a Shared Workspace to continue using Patternry (in case you don’t already have one). If you want to have the content in your Personal Workspace moved to a Shared Workspace, just drop us a note and we’ll move your patterns for you. If you are already using primarily the Shared Workspace this change will just make things simpler as you don’t need to choose a workspace when you sign in.

Questions or comments regarding the change? Don’t hesitate to contact us.

-Patternry Team

Few tips on how to organize your patterns in Patternry

Sun, 05 May 2013 12:59:00 +0300

Here are a few tips on how to organize your patterns. In Patternry patterns are organized into libraries. For example, you can have a library for a specific project, product, or interaction type, whatever works best for you.

There are basically three different ways to organize your patterns.

Put all your patterns into one library and use tags to categorize them. This works as a great starting point when the number of patterns is limited. You can use tags like navigation, forms, social, etc. to make it better organized.
Organize your patterns into libraries based on the type. When the number of patterns grows, you can create more libraries and reorganize your patterns. For example, you could have a library for navigation patterns and use tags to create sub-groups inside a library.
Organize your patterns into libraries based on the project or product. This allows you to create more specific patterns making them more useful for the task at hand. Good code examples, color schemes, wireframes etc. helps your team to get things done fast and in sync. In this case it’s also worthwhile to build a company-wide pattern library, so that you can use them as starting point for the patterns you need in different projects.

The most important thing is to find a way to use Patternry so that it fits your organization’s process and the objectives you have.

-Johannes from Patternry

Introducing Dashboard - Keep track of what your team is doing

Wed, 27 Mar 2013 22:31:55 +0200

From now on when entering your workspace on Patternry you will see a dashboard. The dashboard shows the latest activity in your workspace, for example new comments, patterns, and links.

The dashboard also lists the latest posts from our blog to keep you up to date on recent improvements in Patternry.

As always we’d appreciate your feedback, comments and suggestions!

Sharing Tacit Knowledge and Boosting Creativity with UI Design Patterns

Fri, 15 Mar 2013 11:51:00 +0200

I had a discussion with a potential customer about the benefits of Patternry. He told they don’t need Patternry because he thinks that the benefits of UI design patterns comes from copying and repeating the same solutions over and over again. According to him a lot of the value they create for their own customers comes from building the software specifically for the customer in mind and not by reusing the same solutions. From that point of view the conclusion was that UI design patterns would destroy the unique value they have created and no improvement in efficiency and productivity would be enough to compensate for that loss.

In my opinion a front-end resource helps productivity and efficiency while it also helps to focus the design efforts to create customer focused software and creative solutions. Christian Crumlish, former curator of Yahoo! Design Pattern Library, said it well when he argued “to my mind, patterns focus innovation and creativity on the leading edge of the problem: the unsolved part.” I agree with Christian. Design patterns free time and energy to concentrate on the most important and difficult things instead of all the mundane details of perfectly working solutions as Progress bar or Accordion. Organizations can also use design patterns in a different specification level. A coded component like the Progress bar has a lot less room for creativity than a Drag and Drop Modules, for example.

Another important point in my mind is the effects design patterns have on organizational creativity and innovation. I believe a UI design pattern library is a great way to turn tacit knowledge into explicit information that can be shared through the organization and stored even if key personnel leaves the organization. Think about a senior UX designer who has huge experience and always comes up with great innovative solutions to different design problems. For him many of the solutions might be routine solutions that he has in the ‘toolbox’ inside his head. With design patterns these solutions could be shared to the other less experienced UX designers in the organization. Now as the younger designers can use these patterns as basis of their work they can concentrate their efforts in finding new truly creative solutions instead of spending time to come to the same solutions as their more experienced colleague has already invented.

I truly believe that UI design pattern libraries help organizations to collect and share their tacit knowledge and boost creativity while building even a more open and communication driven working atmosphere.

Johannes Hocksell, CEO of Patternry

Export patterns as PDFs

Mon, 04 Feb 2013 20:18:00 +0200

Patternry can now export your patterns to PDF and provide you an alternative way to share patterns and export your data from Patternry. Single pattern can be exported as pdf in the “pattern view” and all patterns in a library can be exported by clicking on the PDF-icon in the “Manage libraries” view.

JavaScript Support and Other Improvements

Sun, 02 Dec 2012 19:46:21 +0200

As we’ve developed Patternry, we have listened carefully to your feedback and worked hard to improve Patternry to make it fit your needs better. Here’s what we have done recently:

Javascript support. To make your patterns more useful and interactive we added Javascript support to HTML patterns. So far you have been able to create only static patterns and components using HTML & CSS, but adding JavaScript makes them alive. JavaScript allows you to make patterns that provide dynamic functionality, for example you can use transitions and other effects in your patterns, make pattern elements draggable, add different states to your buttons or other components etc. We also added jQuery support to HTML patterns, so you can easily use it together with your custom JavaScript. Take a look at our example pattern “Accordion” to see how it works.

Adding patterns to libraries. The goal of Patternry is to make you more productive. To help you to be even more productive, we made adding patterns to libraries easier. So, now you can choose the library/libraries where you want to add the pattern using the pattern library list in the “Edit pattern” view.

Making it easier to add images to patterns. We removed one extra step from the process to make adding images a smoother experience. Also, you can now edit the image name and description.

We hope you will find these changes useful and don’t forget to give your feedback either here in the comments or drop us a mail at support@patternry.com.

Are you a non-profit organization looking to make the world a better place? We want to help, get your free Patternry Builder License now!

Thu, 15 Nov 2012 18:52:21 +0200

Patternry Builder, a tool for building front-end resources, is free for non-profit organizations and charities.

So, if your organization’s purpose is to make the world a better place, just sign up if you haven’t yet, and create a Shared Workspace from the choose workspace-page. After you’re done just drop us an email with a short description about your organization. If your organization is non-profit, non-government, non-academic, non-political, or you’re working on an Open Source project, we’ll set your account to free in few days. But you don’t need to wait for us to activate your free account - All our plans comes with a 14-day free trial (no credit card required) and you can start using Patternry Builder right now.

The number of non-profits using Patternry is growing steadily, and the latest free license was given to INCCRRA (Illinois Network of Child Care Resource & Referral Agencies). Welcome on board!

And for everyone else, take a look at our plans & pricing.

(P.S. If you’re a digital agency looking to create a front-end resource for your customers contact us for special pricing).

Scheduled maintenance notice

Tue, 06 Nov 2012 00:21:00 +0200

Patternry will move to a new server on Wednesday, November 7, between 09:00 and 12:00 UTC. Therefore, patternry.com may not be available during this time.

Thanks for your patience during the move.

Introducing Custom Pattern Templates for Shared Workspaces

Thu, 13 Sep 2012 15:02:00 +0300

The wait is finally over! From now on you can create patterns with custom templates on Patternry. This means that you can decide what fields and titles your patterns should contain.

The screenshot below illustrates how it works. First give a name for your new template, add as many text fields as needed and give them good describing names. Finally mark the HTML & CSS checkbox if you want to include markup and styles in your patterns. Note that each pattern will contain the summary field in the top of the pattern.

You can also use one of the ready-made templates: Full Pattern, Mini Pattern & HTML Pattern. Listed below is what each template type contains.

Custom pattern templates are available only in Shared Workspace, so now is the perfect time to upgrade your Personal Workspace to a Shared one and start working with you colleagues.

Changes to how patterns are created

There are two options for creating patterns. All the different template options are listed in the Manage patterns view. Just select the desired template and start creating a new pattern.

The other option is to click on the “Create new pattern” in the “Manage” menu. This will take you directly to the page for writing a new pattern. The default pattern template is Mini Pattern, but you can change it in the Pattern templates view. The template can be also changed in the New Pattern form. This applies also for old patterns, so that you can switch them to use a different template. Just note that if you change the template for pattern all content in the text fields as well as in HTML and CSS fields will be deleted. Only the topmost summary field, images, links, code examples and comments will be retained.

Go to Patternry.

Starting your 14-day free trial just got easier - No credit card required anymore

Thu, 09 Aug 2012 22:55:15 +0300

No credit card or other payment method is required for the free 14-day trial for Patternry Shared Workspace. So if you don’t have a Shared Workspace yet, create one for your team to see how Patternry can help you to build a front-end resource that fits your company’s specific needs.

Creating a Shared Workspace is simple and takes only a minute. Sign in or sign up and choose “Create a Shared Workspace” from the Workspaces-page. All you need to do is to fill in the few required fields, and you’re ready to start building style guides, design pattern libraries, complete front-end resources or anything in between - together with your team.

Build a Front-End Resource for your team!

Mon, 02 Jul 2012 09:55:20 +0300

With Patternry you can now easily build a Front-End Resource that can be anything from a simple online styleguide to a comprehensive front-end resource that contains design patterns, HTML & CSS needed in projects, wireframes and mockups, images, code snippets and links.

Patternry makes it easy to collect all your resources online in one place where everyone in your team can find them. Use the same design solutions again to make your apps consistent, recycle your code and HTML & CSS pairings to make developing apps faster. With the recently launched new features Patternry has became more and more useful for everyone involved in the software design process, not just designers & UX people. See our plans and pricing and sign up for free to get started building your own Front-End Resource!

New logo, new names

As you might already have noticed, we have redesiged our logo. Also, as we clarified the message on our front page we changed some names: Patternry Open UI Pattern library is now Patternry Open and the Pattern Library Builder is Patternry Builder.

Introducing Workspace-Wide CSS Templates

Wed, 13 Jun 2012 21:16:43 +0300

CSS templates are workspace-wide templates that allow you to share CSS between libraries and patterns. Instead of typing the same boilerplate code on each pattern, you can create a CSS template and use it in your HTML patterns where you need it. This makes writing new HTML patterns fast and easy as you don’t need to write the same CSS code again and again when building your pattern library. Also, maintaining the library is a lot faster as you only need to make changes to the CSS template instead of individual patterns.

To get started, select “CSS templates” from the Manage drop-down list in your workspace. Create a CSS template and give it a name. You can use the CSS you use in your company or in the project you are working with. After you’ve created a template, it will available in all your HTML patterns in Patternry.

Meet us at DjangoCon Europe!

Sun, 03 Jun 2012 21:12:03 +0300

Our Lead Developer, Matti, is attending DjangoCon Europe in Zurich next week (June 4-8, 2012). DjangoCon is the main conference for development of and with the Django Framework in Europe.

So, if you’re there too, keep an eye out for Matti, he’s happy to talk with you about Django and how it has helped us build Patternry.

Patternry Library Builder Intro Video

Tue, 15 May 2012 19:55:00 +0300

We made a video to showcase Patternry Library Builder. Now everyone can see how Patternry works without signing up.

It is the first video we made. Let us know what you think.

Twitter Bootstrap for Patternry + 3 new HTML patterns

Wed, 18 Apr 2012 21:46:00 +0300

Twitter Bootstrap is a toolkit to develop Web apps and sites faster than ever. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Today we added an option to import Twitter Bootstrap styles to your HTML patterns. When you tick the “Import Twitter Bootstrap styles” in the HTML pattern form, Twitter Bootstrap CSS applies to your HTML elements. This means that you can mockup great pattern examples faster than ever! This is especially useful if you use Twitter Bootstrap CSS in your Web app/site.

To get the idea, check out the three new HTML patterns we added using Twitter Bootstrap styles.

P.S. Note that the CSS styles from Twitter Bootstrap are licensed under Apache License, Version 2.0.

New Tour Pages

Mon, 16 Apr 2012 22:18:16 +0300

Not sure how Patternry can help you? Take a look at our updated Tour-pages!

Introducing HTML & CSS patterns

Sun, 25 Mar 2012 20:58:00 +0300

Now you can create, share and reuse HTML + CSS patterns. Using our live editor it’s also easy to test, experiment and mockup with the markup and styles.

We at Patternry often hear the question “I like your patterns, but how can I use them in my Web app?”. The new HTML pattern makes it easy to use the patterns in daily work: just copy & paste the markup and styles to your Web app and you are ready to go!

HTML patterns allow you to create your own interface component and interaction library for HTML & CSS. This will help Web developers and designers to effectively share, communicate and reuse their solutions. Besides of copying & pasting you can play with the code in our live editor to quickly test your snippets.

This is how the new HTML pattern looks like.

To get the idea better take a look at the new HTML patterns we created using the open source code provided by Twitter bootstrap. We’ll add more patterns soon.

How to create a HTML pattern?

It’s easy. Just select “New HTML pattern” from the “Manage” drop down menu. Give a name to your pattern and write a short description for the pattern if needed. Write the HTML & CSS code from scratch, or just paste the code from your existing projects. As you type the code, you’ll see the result live so it is easy to tweak the HTML&CSS further.

Excited about the news? Help us spread the word by sharing it with your friends and followers.

Patternry reviewed on AppVita

Tue, 06 Mar 2012 20:09:38 +0200

Patternry reviewed on AppVita:

Patternry just got reviewed on AppVita, a technology blog focused on Web applications with great user experiences. Read the article here.

Displaying full name instead of username

Tue, 06 Mar 2012 19:48:00 +0200

Did you sign up on Patternry using a username you didn’t want to be showed to others? Changing your display name is now easy! Just add your real name in the “My Info” and it will be shown to others instead of your username in comments and patterns.

We have also fixed some bugs and made a number of other small improvements in the last couple of weeks. Currently we are working with a new pattern type that we believe will be a huge success. More news to come soon!

Scheduled maintenance notice

Mon, 13 Feb 2012 13:01:00 +0200

Patternry will move to a new, more powerful server on Monday, February 13, between 14:00 and 18:00 UTC. Therefore, patternry.com will be offline for a while during the server move.

This will improve the performance and reliability of our service significantly. Thanks for your patience during the move.

UPDATE: We’re back online! I hope you’re happy with the significantly improved performance of the site.