Why Startups Need a Styleguide

Even for a seasoned designer, creating a new styleguide for a given product is hard—there are a lot of possible design directions, and the process can quickly become overwhelming. Startup life is hectic, fast, and filled with clichés such as “perfect is the enemy of done,” “move fast and break things,” or “launch it now, fix it later.”
Coming up with a styleguide under such slogans and fluctuating priorities is challenging, but a must if a product’s design is to succeed in the long run.
BBC UX design system, styleguide, and component library
The Global Experience Language, (GEL) from the BBC 
explains the purpose of each component and how they 
should be used.

In recent years, we’ve heard a lot about design systems, styleguides, pattern libraries, and atomic design. While these tools are very useful, using them can seem like overkill when you only want to create a few screens for an MVP or to demo an app. However, having a styleguide will not only improve your design process in general, but will make your app more solid and consistent.
Let’s first talk about the main benefits of a styleguide, and then touch upon the challenging startup environment. Finally, we’ll discuss how a styleguide is always evolving as a living document.

Top Five Reasons Why a Styleguide Is a Good Idea

1. A Styleguide Makes Designs Concrete and Branding Clear

As a lone designer at a startup—which is often the case—there aren’t many opportunities to review and challenge design decisions made by others on the team. Although everyone might be working in collaboration, designs are not necessarily shared with others. This means there is only one person validating final designs.
A styleguide will provide a startup with guidance and documentation for reference. It will challenge some of the design choices made by the designer or the team because they’ll have to be validated in the global context of the app. Designing a UI component because it works well on one screen will not cut it. A well thought-out design should solve a single design problem in one situation, as well as a pervasive problem that is found on other screens of your app.
Repeated components in a UI deserve to be in a styleguide.

This app's UI design uses the "contact" tile repeatedly, a prime 
candidate to be included as a component in the styleguide. 
(by Ivan Bjelajac on Dribbble)
A styleguide makes the overall design style, brand guidelines, specifications, and rules available to everyone at your company. It’s only a click away. They can go to a URL to easily access an online styleguide or download a PDF. Design becomes everyone’s job—it is no longer the sole responsibility of the design team. It’s a prudent approach that will improve your product’s user interface.
IBM design language guide on the web

IBM hosts their "design language" guide online which makes it easy
for everyone, even the public, to view it.

2. A Styleguide Makes Your Design More Consistent

It provides a dictionary of sorts for your UI design language. You can use the same terminology when you want to communicate something you’ve already expressed. Imagine if we had slightly different words to express the same thing:
  1. “It’s raining; I need my umbrella.”
  2. “It’s raining, I need my umbrellol”
  3. “It’s raining, I need my umbrellala “
It may make a language poetic, but hard to understand. Fundamentally, it’s the same idea with the UI of a site or an app. For ease of use, you should only invent a new “word” when you’re really creating something new. This way, you’re bound by a strict rule that says, “Only components which solve a design problem repeatedly throughout the product are allowed into the product and subsequently the styleguide.”
Consistency makes your product more user-friendly; a highly usable product can translate into more engagement and sales.
App onboarding screens
Onboarding screens often use animations or visual effects that 
are not present in the rest of the application. It gives designers 
a good opportunity to create a new layout.
(by Murat Gursoy on Dribbble).

3. Reusing the Same System Components Makes Your App Easier to Use

As in the language example, consistency is key. Once each component is understood by the user, when used again in a different context, people will already be familiar with its behavior. When it comes to user interactions, this consistency improves the overall usability of the product.
Eventbrite's user interface reuses common components.
Eventbrite uses a three-icon layout in a lot of its sections. When a user comes across these components again, they are already familiar with their general behavior.

Working with a component-based design system saves money and also makes a product easier to update. If there’s a usability issue with a component in a certain situation, it can be fixed once and all the other potential issues with that component will also be updated.

4. A Styleguide Makes Your App Faster to Develop in the Long Run

When your team is developing a common component for a screen, they’re developing a solution that they will also be using elsewhere. This saves development time—a lot of it. When your company scales, this could mean saving as much as 10x the man hours required to build a new screen.

5. A Styleguide Facilitates Production Efficiencies and Innovation

Creating a styleguide makes designs more accessible and readily available to the rest of the company. Developers and designers can prototype an idea faster and more easily. Bootstrap is often praised for making it easy for developers to create a working prototype—your styleguide serves the same purpose. It provides a reference foundation for a new UI that will be built by developers, without the design team having to create the screen first (even though the design team should QA the final screens).
Shopify's design system styleguide
The Challenges of a Startup, a Styleguide in Flux
Creating a design system in a startup environment is not as linear as it might be at a more mature company where they’re used to a more streamlined process. At a more traditional company, the design team performs UX research, ideation, and experimentation, and then comes up with the final brand styleguide. This process does not suit all companies. Startups work in an environment where their vision and the requirements for the product are always in flux. They work with MVPs (minimum viable products), incomplete versions of their apps that are used to test their idea and show its potential to users.
When it comes to creating a styleguide, this can become an issue.
In an environment that’s always evolving, a designer is usually struggling to create a styleguide that’s supposed to be somewhat ‘fixed.’ A designer might not have the time to thoroughly think through all of the components being created, even though they might still end up in the next release of the app. Facebook famously swapped their hamburger menu for a tab navigation when they matured a bit. Do you think whoever put the hamburger menu there in the first place also added it to Facebook styleguide?
You might even consider that it’s not yet time to create a styleguide. You may realize that in the long term you’re going to need one, but right now it’s more important to crank out screens for the app’s usability testing. What’s more, you’ll also need some marketing pages to promote your app. Suddenly, your design needs to ramp up, and as you’re creating screens, you begin to see the value of having a styleguide that can keep your designs and the company brand consistent.
The problem is that you don’t know exactly when it’s the right time to trade flexibility for stability. You have to decide when you should start the styleguide and when you should just focus on creating screens. An optimal approach may be to produce a styleguide at the same time you’re delivering screens—this way you may be able to have the best of both worlds.

Start with Some UI Inspiration

A good way to start, especially if you’re not a designer, is to collect examples of design styles you like, or more importantly, what you think users will respond to. Collect as many examples as possible, and put them in a folder/InVision board/Niice board/etc. They can be used as reference and inspiration along with your design sensibility. You can build on them later to create a pattern library.
For instance, when I was working on a styleguide for a company promoting artists in the entertainment industry, we wondered whether light or dark backgrounds would have a greater impact on our users. I looked at hundreds of different websites in games/movies/visual production to see how they used dark and light backgrounds.
Star Wars Battlefront 2 game website color-scheme styleguide

The Star Wars Battlefront 2 game website uses darker colors while the EA website uses a lighter color scheme.
I made a reference sheet where I highlighted the most common patterns. One pattern I identified was that companies in that industry tended to use darker backgrounds when presenting their products, but used white backgrounds in their marketing efforts, eCommerce, and shops.
You don’t have to go as deep as that, but I found having visual references helps, not only in creating a styleguide, but also in remembering some of the use cases you might need to design for. Once you feel good about the references you collected, you can start working on the visual design.
Moodboard

Various mood boards that use different references.
(sources: Summer Teal Simpson HitchVivek VenkatramanAmber on Dribbble)

Design Solid UI Components

While working at startups, it’s harder to create components than it is to create pages—at least at the beginning. When you design a page, you often have an idea of how it’s going to be used. That’s not necessarily the case when you design a component. You’re trying to design for a specific use case, but you want it to be part of a universal design system, and you need to approach it that way. For instance, you may want to create a sub-navigation component with three buttons. You may also need it to work with four, five, or ten buttons, and it will need to work on mobile, tablet and desktop. You need to think ahead.
Styleguide for Operator, an eCommerce company
The Operator styleguide specifies how each of their components react based on navigation and visual hierarchy. (source: Kerem Suer on Dribbble)
You want a certain level of persistence or staying power in a component. Common components shouldn’t change often, and they must be reusable in many places throughout your product. For example, if you’re only interested in an iOS app, then you want to test your component based on the number of options or the length of the content, not necessarily the screen size. The idea is that if it’s viable in the UI in many places in your app, then you know it’s a component that has the potential to be part of your styleguide.
Salesforce design system with common components and their use

The Salesforce Lightning Design System indicates how flexible a component is and whether or not it can be adapted to a mobile interface.
A startup needs to start from practically nothing and then move quickly. Your boss might want a screen designed by the end of the day. That means you can’t really develop an entire styleguide and then come up with the screen. Even worse, you might be designing a styleguide with components that will never see the light of day because the vision of the company has changed. Like they say, it’s better to ship now.
Salesforce analytics UI kit component library

The Salesforce Analytics UI Kit is a library of common components that are supposed to be reused in each app. (source: Eli Sebastian Brumbaugh)
Creating a great styleguide takes time, and because it will become the foundation of your design system, you want to get it right. In a startup environment, you need to work on your styleguide with everything in tandem.

The Styleguide as a Living Document

You should think about your styleguide as a work in progress. Like a startup figuring out its strategy, you’re going to figure out your styleguide as you go along. You’ll edit it and adjust it over time until it becomes the foundation of your UI. One useful approach is to start the first mockup at the same time you start your styleguide. Open two files with your favorite software (in my case, Sketch); one called page name and the other one styleguide. As you’re working on your screen design, you can start seeding your styleguide with the elements that make up your design.
Working on a styleguide simultaneously in Sketch

A startup project example with two files opened. The styleguide on the left and the mobile screen on the right.
As you start doing more of these, you’ll notice early on that there some components are prime candidates for inclusion in the styleguide. For instance, if you’ve settled on an icon style, then all of your icons can go into the styleguide right from the start.
I usually create a section called ‘icons done so far.’ If at one point someone needs an icon, they first have to check through this section before creating a new one.
Icon libraries in styleguides and common component libraries


SalesforceYelp and Mapbox all have extensive icon libraries for their app. Your styleguide should also contain UI elements that are used throughout.

Other obvious items to consider are colors, buttons, selectors, titles, headers, body text, etc. If you’re using a style especially for marketing, you can consider putting it in your styleguide and labeling it appropriately. It’s okay if you’re not completely settled on a particular item. You can refine the UI elements in your design system later when the opportunity arises, and update the guide appropriately. Don’t forget, the styleguide is a living document, especially at a startup.
Web form elements in the styleguide
Eventually, when I start putting layouts in the guide, I know that I’m beginning to reach a point where all components should be close to their final state. This part marks the tipping point in the styleguide creation process—now you can celebrate! A good way to celebrate such a milestone is to create a logo or icon (consider naming it) for the 1.0 version of the styleguide.
Some people go as far as printing the logo/icon as a sticker so the team has a sort of trophy. That’s also the point where I usually go back to the more traditional way of working with the guide by opening that styleguide first, and then creating a new file for whatever interface needs to be done.

Conclusion

As a designer, by creating a styleguide as early as possible, you’re making sure that your startup adheres to a higher standard of quality. It may be challenging, but it’s well worth the effort. A solid, well-rounded styleguide is not only going to help you have a better product, it will also help you reduce the cost of development.
There is a way to make it happen even in a fast-paced environment where quick decisions are made and sometimes designs need to change rapidly. Hopefully, the process described above will help designers at any startup cope with the challenges of complexity and speed while also creating a sturdy styleguide for the benefit of the product.

Responsive Web Design Guidelines: What It Is and How to Use It

 Before getting into the details of responsive web design guidelines, let’s have a short background introduction. The responsive web design, firstly put forward by Ethan Marcotte, is not just about the adaptiveness of screen resolution or the auto-scaling of pictures. Instead, it’s more like a new way of thinking where designers need to consider many factors, such as the device performance, Dom node number and the screen size, etc. Following are several responsive web design techniques for your reference.

How about responsive product design? 

The responsive design is out of the product design, which requires the engagement of product managers, interaction designers as well as engineers. It’s of necessity for us to break the traditional way of thinking in the design, shifting from the web to mobile applications. The first step is to build a clear information architecture, then get the design started on the smallest display of mobile devices with the abandon of interference so as to ensure the best experience of the core function.

Meanwhile, the participation of interaction designers should deal with the responsive design problems and the issue of how to make the module much smaller and flexible. They also need to confirm the design style and framework. For the developing engineers, their responsibility is to make the test of coding and programming on the basis of the completed project, taking full advantage of individual device’s characteristics and building frame structure.




How does the interface design look like in the RWD? 

 Previously, most of the interface designs aim to the desktop products, and there will be one single size with fixed location of each module. But everything has changed in the responsive design. According to those responsive web design tutorials on the web, it proves that designers need to make multiple versions of design. A typical example is the module A which is shown in a black background in the width of 1024px is shown in a white background in the width of 768px.

Does the traditional media query breakpoints still go popular? 

From the perspective of traditional design, it’s possible to change the page layout through Media Query. For instance, we can change the layout in a fixed width (that’s what we call breakpoint). The usual way of thinking is to set breakpoints in accordance with some devices, such as desktop, tablet and mobile phone. As a matter of fact, the media query breakpoint is unreliable as the screen size will continue changing with the development of technology.

But the responsive design shouldn’t be targeted only at some devices with certain sizes, and there needs an interval value during the design process, rather than a resolution corresponding to a device. Henceforth, it’s necessary to make correspondent settings according to the content need. For designers, they need to find a critical point – that is the value when the visual effects start failing to meet the aesthetic of people or the acquisition of content.

 

What are the differences between interaction design and RWD?

In the responsive design, it requires a comprehensive consideration about the way of interaction, which is one of the responsive web design key features. An excellent interaction designer should not only consider the habits of desktop users, but also must take the portable devices of different sizes into account. For instance, we’re used to using the floating layer on PC, but it cannot be used on some devices of small sizes. Also, some links of a small responsive area are not easy-to-operate by fingers.


This requires designers to seek common ground while reserving differences. For example, they can decide whether to use floating layer, increase the operating area and keep unified or not, on the basis of screen size. To ease the process of design, we’d like to recommend a simple-yet-powerful prototyping tool – Mockplus. It enables rapid prototyping and highly-visualized interactions with the simple drag-and-drop option.
 


In Conclusion

Above are the responsive web design guidelines for product design, interface design, media query breakpoints and interaction process. Hopefully, you can find it helpful, and you can also learn about the difference between responsive and adaptive design.


What is Mobile First Design? Why It's Important & How To Make It?

On the Mobile World Congress in 2010, Eric Schmidt, the CEO of Google put forward that designers should follow the “mobile first” rule in product design. What does “mobile first design” mean? Why is it important? How to make it? I’ll answer these 3 questions in the following part.

What is Mobile First Design?
To understand the concept of mobile first design better, you should know the two phrases below first.

1. Responsive Web Design (RWD)
Responsive web design is a web design method that enable web to fit to the screens of different devices automatically, displaying the content in a way that people feel comfortable. This greatly reduces users’ operations like panning, zooming and scrolling when browsing the web.
Know more about responsive design



2 “Progressive Advancement” & “Graceful Degradation”
These two concepts were put forward before responsive web design. In order to make web or application interface display reasonably on different devices, designers provide customized versions of product for different ends.

Progressive Advancement means that when we design a product, first we build a version for relatively lower browser (like that on a mobile phone). This version includes the most basic functions & features. After that we tend to the advanced version for a tablet or PC, which is created by adding interactions, more complicated effects, etc. on the basic version for a better user experience.

“Graceful Degradation”, on the contrary, starts the product design from an advanced end like desktop and builds a version with well-rounded features at the beginning. Then designers make the product compatible to mobile ends by cutting some functions or contents.

Progressive Advancement has won the game for now as far as I can see. If UI/UX designers start a product design with its desktop version, they will inevitably want to make use of most of the advantages of the advanced end. For example, the hover effect which is supported by a cursor mouse; HD images & complex charts which can display normally only when there is a recent bandwidth. In this way the designers will make efforts to complete an amazing desktop version and only to find it can hardly be adopted on a mobile end unless they give up a lot of beautiful ideas. If so, the mobile end version will be more like an afterthought, an incomplete product which’s been watered down.

But if we take the mobile end product design as a starting point, under the restrictions like bandwidth, screen size and so on, designers will naturally seize the key points of a product, head for a lean & neat product with prioritized features. When the platform is expanded to a tablet or PC, designers are able to take advantages of the unique features of these advanced ends to strengthen the product step by step. This might be the main reason that progressive advancement strategy is widely used.

You may ask, why do you spend so much time on explaining the two concepts? The answer is that “mobile first” is exactly a rule of “progressive advancement”.

"Mobile first", as the name suggests, means that we start the product design from the mobile end which has more restrictions, then expand its features to create a tablet or desktop version.




Why "Mobile First" Principle Is So Important in Product Design?
Except for the victory of progressive advancement against graceful degradation as mentioned above, we have more tangible reasons to believe that mobile first principle is important in product design. That is, the exploding of mobile use.

1. Mobile internet usage has surpassed desktop usage in 2016.




2. People have spent more and more time on internet from mobile ends.




3. Early in 2012, smart phone sales have overtaken PC sales.




The exploding of mobile ends urges designers to pay attention to the mobile end and follow the “mobile first” rule in product design.

How to Practice “Mobile First” Rule in Product Design?
The key to mobile first principle is, in fact, a content-centered mind.

The following part will explain the advancement of a product from a mobile phone end to a PC end.
(The design tool used in the example below is Mockplus by Jongde software company. Mockplus is an easy-to-use PC/mobile application for fast wireframe & prototype building)

Let’s make an application about hotel booking. We first sort the content of the site by importance:
* Website name
* Hotel (Domestic Hotel, Foreign Hotel, Hour Room, Special Hotel)
* Time selector (check-in time, departure time)
* My Order
* Customer service
* Promotion & Advertising

Then we get a mobile end version like this:



Hotel Booking App

Domestic, foreign hotels and time selectors are the most important content. They are located on the most prominent part of the interface.

By adding more features on the mobile version and enlarging the promotion & advertising displaying area we get a desktop version like this:

In this way, designers are able to creating a product for multiple ends in a smooth and efficient way instead of ruthlessly removing those good features to get an afterthought.

In short, the "mobile first" principle has an important role in product design. On the one hand, it helps to save product design time and improve designers’ productivity. On the other hand, it forces designers to pay more attention on the content of a product, which helps them to created neat and practical designs. However, as smartphones become more and more powerful, the mobile end might no longer be considered as “lower ends" in the near future, so the "move first" may not be an everlasting topic. But for now, its place in product design cannot be ignored.

About Author
Yuting Liu
liuyuting994@gmail.com

What is a Full Stack Designer in 2017? Will You Be One?

Compared to the Full Stack Designer, we seem to be more familiar with the Full Stack Developers. So what is full stack designer exactly? Can we simply think he/she is a versatile designer?

In the past, designers and developers have a clear role assignment. They rarely do the both at the same time. While with the changes in product design and the evolution of team collaboration, many web designers are able to manage web developing and UX design at present.

So there comes a question: what’s the character of the so-called full stack designer? He/She is only a designer? Also coding while being a designer? Or he/she is a designer as well as a web developer?

What is a Full Stack Designer?

In fact, the concept of Full Stack Developer came out earlier than the Full Stack Designer. But full stack does not mean to do all. Specifically, it refers to a person who masters muti-skills and he can use them to independently complete a design or product development.

That means that a truly full stack designer can build a basic conception of a project, and complete the whole design and development related works. Such as the wireframes/prototypes design, visual design, and the front coding, JS / jQuery, etc.




The Emergence

The come out of the full stack designer is not accidental according to the current situation. With the outbreak of mobile Apps and the arrival of the entrepreneurship tide, there are many small development teams who cannot set full positions. That forced the team members to play multiple characters in one position. You can always see the developers not only coding but also build prototypes with the prototyping tools (Mockplus,AxureProto.io)

The Advantages

Comprehensive thinking is the biggest advantage of the full stack designers. A designer who is familiar with the product development and design process, he knows the limitation of product design. So that he can clearly control the expectation of the product design. Familiarity with the process can make the team more convenient to understand the development, marketing, and user experience details. This will make cooperation more seamless, reduce rework and unexpected situations.



The Importance

The full stack designer can analyze and customize his own "skill tree" according to his own situation. He can clearly know the structure of the product, the progress of design and development process. He is a multi-skill person who can use user experience, design patterns, techniques, and tools to complete the product development. And then, the whole progress will be more systematically, and the product will be better.

Focusing on the whole program, that is the most obvious difference between the normal designers and the full stack designer. If you are one of them, it will undoubtedly add a great value to your team. And if you are a freelance designer, it is necessary to be a full stack designer.



What Makes a Great Full Stack Designer?

However, it’s not a requirement for full stack designers to master anything perfectly. Taking the web design as an example, you will understand well about their roles:

Assist the product manager

Complete the pre-concept for the entire project, brainstorming, mood boards, basic planning

Prototype design

Wireframes, visual draft, low/high fidelity prototypes

User research

User experience

Test

Front-end development

HTML, CSS, JS, etc.

The handover with the programmer

Understand the interface and the development of the deep demand, how the front-end code will be more matching backend and the program.

Conclusion

To become a good full stack designer, you are destined to keep learning and enrich your skill-tree. But please note that you should choose a right industry and direction to follow up the design trend and technology, new pattern, and new tools.

Original post: What is a Full Stack Designer in 2017? Will You Be One?

Best practices for designing Pagination in web



“Pagination is the process of dividing a document into discrete pages, either electronic pages or printed pages.” Wikipedia
Pagination are an important element in web designing. Especially in content heavy websites and applications pagination is used to divide content and present in limited & digestible manner. In this articles we are going to see some best practices for designing better pagination.

1. Pagination or lazy load? Choose wisely

IT is the first question a designer need to answer “What will work best pagination or lazy load in the given context?” Both pagination and lazy load have different benefits for better usability and user experience.

2. Place it correctly

Placement of Pagination is really important from Usability point of view. Many a times we have long vertical page in web and user tries to scroll down –down and if pagination is placed at top then user might miss it out and if pagination is only present at bottom then for going to next pages user might have to scroll page completely. For longer pages (long tables) provide pagination at both places at top and at bottom. It makes two major benefits, first is chances of missing out pagination are less and second users get flexibility to go to other pages easily.


3. Selected state and actions should be properly visible

Visibility of system status is prime important heuristic principle applied in Pagination. Current selected state and actions (Next, Previous buttons etc.) should be clearly visible to users.


4. Show first and last page upfront

Showing the last page number in pagination upfront makes it easier to know the limit of pagination for an end user. Also it can reduce to action buttons from pagination element i.e. ‘first and last page’, resulting it makes pagination component less complex.

5. Have flexible and efficient ‘Go to page’

Many a times in content heavy web applications (like finance, sales, accounting applications etc.) where number of records in table are more than 100 to 1000s. For providing ‘Ease of use’ to potential users, we should include ‘Go to Page’ element in pagination where users can directly enter or select page number and go directly to that page for viewing records.

6. Provide control to user for selecting number of records per page


Decision for finalizing number of records in table or page should be taken by end user. Potential users have their own pattern to using the system and if we are providing the decision to them then it can bring more flexibility for them. This flexibility can result in more user satisfaction and better performance.

Author


Abhishek Jain
Co-founder of UXness
UX Designer & Researcher