You probably don’t need most of the features that come with large UI frameworks such as Bootstrap, especially when you’re working on small, straightforward projects that you just want to get up and running as soon as possible. Fortunately, there are smaller, simpler CSS frameworks out there that you can use instead.

Using a small CSS framework typically translates to a gentler learning curve for developers, non-dependency on JavaScript for functionality, and faster load times for your users.

I’ve created an excellent list of small/minimalist CSS frameworks for you to explore. Most of them are under 5 KB (when minified and gzipped) and contain the essential ingredients for building responsive web designs.

min

min

min, the smallest CSS framework on this list, has a responsive 12-column grid system, button styles, table styles, Android-compatible icons, and more. min even supports ancient browsers like Internet Explorer 5.5.

Milligram

Milligram

Milligram is for modern UIs — its grid system uses FlexBox, sizes and lengths use the rem unit, and it’s Mobile First. Being on the cutting edge comes at a cost: Milligram only officially supports the newest versions of Chrome, Firefox, IE, Safari, and Opera.

Blaze CSS

Blaze CSS

Out of the box, Blaze CSS is already lightweight, but you can reduce its file size even more due to its modular architecture which allows you to include only the parts you intend to use in your project. (Read the instructions for creating a custom Blaze CSS build for more info.)

Kube

Kube

Kube packs a punch for a CSS framework that weighs less than 6 KB. It has a responsive grid system, a robust set of classes for styling your web forms, multiple table classes, notification classes for displaying important messages to your users, and more.

Pure

Pure

Pure, an open source project led by Yahoo! developers, is a suite of CSS modules that will help you quickly build responsive web designs. Pure has basic styles for all HTML elements (developed on top of Normalize.css), and modules for grid layouts, web forms, buttons, tables, and navigation menus.

Furtive

Furtive

Calling itself a "CSS micro-framework", Furtive is geared towards modern web designs. Like Milligram, Furtive is Mobile First, has a responsive grid based on FlexBox, and uses the rem unit for lengths and sizes. It has the basics covered: buttons, forms, and even default color classes.

Skeleton

Skeleton

Though it hasn’t been updated in over a year, Skeleton is still a top-notch starting point/boilerplate for rapidly building modern, responsive web designs. It comes with an intuitive grid system and base styles for your HTML elements.

FOX CSS

FOX CSS

FOX CSS is a lightweight, modular CSS framework. It uses the Mobile First design approach, supports browsers as old as IE 9, and has a non-aggressive CSS reset (inspired by KNACSS).

Basscss

Basscss

Basscss is made up of 22 CSS modules consisting of a CSS reset, a grid system, color classes, utility classes to help you build your responsive designs, and mucch more. Basscss is surprisingly feature-rich for something that weighs less than 4 KB.

Siimple

Siimple

Siimple is a minimalist CSS framework for building responsive, clean web designs. It’s similar to Skeleton: It has an intuitive 12-column grid system and base styles for typography, tables, buttons, forms, and more.

Lotus

Lotus

Lotus is one of the smallest CSS frameworks out there. It’s got the essentials covered: a responsive grid system, typography, buttons, and web forms.

Picnic CSS

Picnic CSS

Picnic CSS is a lightweight UI framework written in Sass, making it easier for you to edit and customize variables such as colors and lengths. It also has some impressive, purely-CSS UI components such as a modal window and a content slider.

Summary Table

The following table contains useful details about the CSS frameworks featured in this list.

Name Size* Docs License GitHub Repo Popularity **
min 1.02 KB Docs MIT Repo 685
Milligram 4.05 KB Docs MIT Repo 3,000
BlazeCSS 5.71 KB Docs MIT Repo 7
Kube 5.94 KB Docs MIT Repo (outdated) 538
Pure 4.0 KB Docs BSD Repo 13,373
Furtive 2.37 KB Docs MIT Repo 369
Skeleton 1.57 KB Docs MIT Repo 10,884
FOX CSS 2.46 KB Docs Unknown Repo 87
Basscss 3.49 KB Docs MIT Repo 2,597
Siimple 5.56 KB Docs MIT Repo 14
Lotus 1.80 KB Docs MIT Repo 14
Picnic CSS 2.32 KB Docs MIT Repo 932

*Size is the file size of the minified and gzipped CSS file. Size values were derived from my independent testing of the production-ready/distribution stylesheets of each CSS framework.

**Popularity is the amount of users who are keeping track of the CSS framework’s source code on GitHub. This value is measured by the number of Stars the project had around the time this post was published. A higher value means the project is more popular.

Read Next

7 CSS Tools You Should Be Using

5 CSS Effects Libraries for Supercharging Your Designs

CSS Development at Large-Scale Websites

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

The post 12 Small CSS Frameworks To Use In Your Web Designs appeared first on Six Revisions.

Summary: IA is the information backbone of the site; navigation refers to those elements in the UI that allow users to reach specific information on the site.

Practitioners sometimes merge the concepts of information architecture (IA) and navigation design. While it’s true that these concepts are related and that information architecture informs website navigation design, IA and navigation are not the same. In fact, information architecture spans well beyond website navigation. Nathaniel Davis refers to web navigation as the tip of the iceberg that sits atop the information architecture of the site.

The Difference Between Information Architecture (IA) and Navigation

The post The Difference Between Information Architecture (IA) and Navigation appeared first on The UX Bookmark.

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen.

There is a multitude of different screen sizes across phones, “phablets”, tablets, desktops, game consoles, TVs, even wearables. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.

Google’s Responsive Web Design Basics

The post Google’s Responsive Web Design Basics appeared first on The UX Bookmark.

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen.

There is a multitude of different screen sizes across phones, “phablets”, tablets, desktops, game consoles, TVs, even wearables. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.

Google’s Responsive Web Design Basics

The post Google’s Responsive Web Design Basics appeared first on The UX Bookmark.

As the curator and creator of The UX Bookmark, I would like to wish you all a blessed 2016! 2015 has been a good year for me and I hope it was for you too. Get out there and chase your dreams. Be true to yourself and live in the now.

Here is what was read the most on The UX Bookmark in 2015. You might have read some of them. Read the rest. Enjoy!

  1. A huge list of Style Guides and UI Guidelines
  2. Ultimate guide to table UI patterns
  3. Charting application alternatives to using Excel
  4. Download IDEO’s Human Centered Design Toolkit
  5. Useful Visio Macros

The post Happy New Year! These Were the Most Popular Posts of 2015 appeared first on The UX Bookmark.

Victoria’s Secret uses a checkout usability tactic that may improve the usability of your international checkout. VS asks its customers to indicate their billing address in the first step of the checkout form. (Even with geolocation tools, it’s good to ask as a user’s billing address may be different than their IP location).

Helping International Users Checkout

The post Checkout Usability- Helping International Users Checkout appeared first on The UX Bookmark.

When I started out, I made about $1,680 a month (after taxes). Now I make that in less than two days. It’s crazy when I think about it.

For a lot of us (myself included) it’s never about the money. But what I have inevitably realized is that money brings freedom. The freedom to choose the work we take on. The freedom to work on meaningful projects. The freedom to have time to do what we want.

As designers, I believe in improving not only the quality of our work, but also the value of our work.

Talking about money is always a touchy subject. But just to give you some background about where I’m coming from, and about my income as a freelance designer: I’ve made more than $140,000 working only seven months in a year. I enjoy some time off in between projects, and the freedom to do other things. However, bear in mind that I have been doing this for nine years, and with that comes experience and a honed set of skills.

Here are some tips that will surely boost your design work’s value. These tips are not things you can do overnight; you will need to put in some hard work in order to achieve your desired results. But if you take action, I’m sure you will eventually see positive results.

1. Be a Good Designer: Produce Great Work That Solves Problems

A strong body of work commands interest from prospective clients and increases your perceived value as a designer.

I am a strong believer in constantly working on my craft. Improving the quality of our work helps us get more projects, and also contributes to pushing our industry forward.

What aspects of your design work can you improve, and how?

Set a Goal

The first step is to have a good idea of what "good design" is. Think of all your favorite designers. Write down a list of the top five designers you admire. Done that? Good. Your goal is to close the gap between your work, and the work of the designers you hold in high regard. Follow their work, as well as the work of other designers that they like/favorite/save on social media platforms such as Behance, Dribbble, Pinterest, etc.

Now you have a benchmark for good design work.

Improve Your Visual Design Skills

The first and most obvious thing to work on is your visual design chops. The best way to improve in this area is to practice.

Spend one to two hours a day analyzing, deconstructing, and recreating the work of other designers. What would begin as an exercise of merely emulating and reproducing someone else’s work will eventually allow you to see and understand why certain designs work better than others.

Many great designers started this way. Haraldur Thorleifsson, a successful designer who has worked with companies such as Google, Microsoft, and Airbnb said in an interview:

When I was younger I liked to take things apart to figure out how they worked. I never did figure anything out, and I certainly couldn’t put anything back together, so this mostly meant that I had a lot of broken stuff.

I am by no means a natural designer or illustrator, so when I started designing I basically did the same thing. I would take screenshots of sites I liked and copy them, the digital equivalent of tracing from paper. This taught me a lot about spacing, typography, grids and how to create graphics from scratch.

Over time, as your visual library expands within your head, you will realize your own ideas.

To get better at design, the idea is really just to keep creating. When he was asked by a design student what to focus on to help grow one’s career, Mike Buzzard, a Design Manager in UX at Google, answered: Just keep making stuff.

Even if you’re a seasoned veteran — just keep creating, as there’s always room to improve. A seasoned chef still sharpens his knife. Join communities and find great mentors to learn from. Always make time to learn new skills that can make your work better.

Think Objectively

Visual chops are all well and good. But design is more than just the visual. It’s also about meeting the client’s goals, and thinking about your work as being a part of a system.

A lot of designers don’t want to think that their work sits in a marketing plan or a business strategy. But it does.

To be an effective designer, it’s essential to have a holistic view. You must see where your design work fits within the overall picture. To possess a holistic view means taking some time to learn about the other components of the system. Get into reading about business, marketing, copywriting, web performance, and other associated subjects.

While there may be art in what we do, we are not artists. We are designers. It’s the balance of form, function, and user/client objectives that makes your designs great.

2. Be a Great Communicator

At the end of the day, clients (whether they are creative directors, marketing managers, or business owners) are just people. People just like you and me.

When I used to work as a Creative Director, whenever we needed to hire designers, I would of course evaluate the design portfolios of the candidates as part of the decision-making process. But almost equally as important was looking at how well the candidates communicated. How did they come up with the context and rationale for their design solutions? Were they consistent with keeping the lines of communication open?

Being able to communicate well and eloquently helps you build trust with your clients. How well can you answer their questions? Try to be empathetic and put yourself in your client’s shoes. What do they need to know, and how can you best solve their problem?

Start by identifying your personal communication style and tone. I prefer to write clients using a conversational style of communication. It helps me weed out all the unnecessary jargon and allows us to engage on a more personable and "authentic" level. Also, people that are okay with this style of communication are usually from the types of organizations that I like working with.

Indirectly tied to communication is punctuality. Punctuality is super important. Honoring your promises and staying true to your word is important if you would like your clients to be able to trust what you say. If you’re going to say something is going to be done at a certain time, make sure you do it on time or (even better) earlier than the time you have committed to. Under-promise and over-deliver. Not vice versa. By nature, I’m not a super organized person, but through the years I’ve learned to always deliver no matter what.

3. Put Yourself Out There

No one is going to hire you if they don’t know about you.

I used to feel iffy about promoting myself. But I need to put myself and my work out there in order to attract prospective clients, as well as to be able to make connections and start conversations with like-minded designers. Dan Mall said it best: "Contribute to the conversations you want to be part of."

If you’re a freelancer, getting yourself exposure is almost as important as having great design work. Join online creative sites like Behance and Dribbble, and keep posting your work on them. Share your work and reach out to different communities. You can even share your journey by posting snippets of your design exercises, similar to what Paul Flavius Nechita did with his 100 Days UI project. (He was interviewed about the project on Dribbble.)

4. Work with Only Good Clients That Pay Well

As your designs become better, and as your reputation grows, you should be receiving more job leads.

Instead of taking on every single project that comes your way, it’s important to prioritize closing the clients that will pay you what you think your services are worth.

But how do you do that? By demonstrating the value of your work to prospective clients, and what it will mean to their business.

Read about value-based pricing in this article: How I Earned A Lot More on Projects by Changing My Pricing Strategy.

I have garnered clients via a "pull" methodology. This means prospective clients get in touch with me via different channels. I never reach out to potential clients. Getting projects using this "pull" methodology means that would-be clients already know about what kind of work I offer and what I’m about. Also, they will typically already know which markets I serve.

Identify what markets you serve and think about what your time and services are worth. Accept the projects that are within your criteria.

Good clients will refer you to other good clients. And I mean not just "good clients" in terms of pay, but also how easy and pleasant they are to work with. It’s because like-minded businesses and people tend to connect and engage with each other.

In the same token, less-than-stellar clients will probably refer you to other less-than-stellar clients. If you design sites for $100, you will be known as the $100 web designer, and you will in turn attract clients that believe websites should only cost a hundred dollars. If you do sites for $30,000, then you exist in that market. (And if you’re Huge, you exist in the $18 million market.)

5. Be Nice

Most people don’t like to work with designers who have huge egos.

The Golden Rule applies here: Treat others the way you would like to be treated. Good manners is a currency that goes a long way in the business world.

Related Content

How I Made Web Design Profitable by Not Doing Web Design

How to Fire Bad Clients

Web Designers Making Thousands of Dollars in Passive Income

Nguyen Le is an ex-Creative Director turned freelance designer/entrepreneur from Melbourne, Australia. He’s worked with brands such as Nintendo, Adidas, and Nissan. Visit his site, Verse, and get connected with him on Dribbble and Behance.

The post 5 Tips for Making More Money as a Freelance Designer appeared first on Six Revisions.

Usability (Testing) Metrics. Tullis and Albert, the authors of the text, Measuring the User Experience, dedicate the majority of their book to metrics – from definition and types to use and measurement. A metric is commonly defined as “a way of measuring or evaluating a particular phenomenon or thing” (p. 7). Usability (testing) metrics involve (1) a user, (2) doing something, (3) with a product, system or other thing (p.4). Building on classmate Judith Stevenson’s 1 March 2010 Design + Research article on Usability Testing, metrics and their measurement provide tools and results for determining design and development effectiveness, tracking design progress, providing insights and influencing decision-makers. Metrics replace hunches and feelings with facts. Usability metrics and their measurement can show improvement, decline or indifference (i.e., no change) in a user’s experience with an updated, improved or changed product or process (p. 9).

Their text provides an excellent article (p. 10 – 13) debunking ten common myths about usability metrics including issues concerning time requirements, costs, ineffectiveness at determining causes, conflicts with gut feelings, misunderstandings by management and difficulties with small sample sizes. Usability metrics can:

  1. be cost and time effective,
  2. address a wide variety of issues and products of any size and
  3. be understood and appreciated by management

Usability Testing Metrics

The post Usability Testing Metrics appeared first on The UX Bookmark.

Even if your site is still months away from being ready for launch, you should put up a "coming soon" page as soon as possible. A "coming soon" page can help you collect user information, like email addresses and feedback/suggestions. It can therefore help you build buzz and a base of early adopters prior to your site’s launch.

For ideas and inspiration, check out these "coming soon" pages. (They used to be called "under construction" pages, an archaic term from the early days of web design.)

Coming soon page of BlueBook

Coming soon page of onbok

Coming soon page of TeekTak

Coming soon page of MLIVE

Coming soon page of stuvio

Coming soon page of Blocks

Coming soon page of AdTerminal

Coming soon page of Billy

Coming soon page of viewple

Coming soon page of Deximal

Coming soon page of PitchPlace

Coming soon page of Flowmail

Coming soon page of Listen to This

Coming soon page of Specify

Coming soon page of Mind Journal

Coming soon page of Juicy

Coming soon page of Blackbox

Coming soon page of Paperstage for Mac

Coming soon page of Macaw Scarlet

Read Next

25 Beautiful Examples of "Coming Soon" Pages

10 Simple Tips for Launching a Website

5 Tips for Pre-Launch Landing Pages

Jacob Gube is the founder of Six Revisions. He’s a front-end developer. Connect with him on Twitter and Facebook.

The post 20 "Coming Soon" Pages for Inspiration appeared first on Six Revisions.

Although there are many icon font sets (such as Font Awesome and Iconic) that you can readily use in your UI designs, there are times when you might want to generate your own custom icon font. For instance, you might have icons that you have designed that you would like to convert into an icon font set, or perhaps you would like to combine icons from various icon font sets.

Fortunately, creating icon fonts is fairly simple.  Here are some free icon font generators that allow you to create your own icon fonts.

1. Fontello

Fontello offers a simple platform you can use to generate your own icon font. To create your icon font, simply drag SVG files from your computer and drop them on the area located under the "Custom Icons" heading. You can also incorporate icons from free icon sets by selecting them in Fontello.

Fontello

2. IcoMoon App

The IcoMoon App allows you to import your own icons as well as include icons from the IcoMoon icon set and other free icon sets. The total number of icons available within the IcoMoon App is in the thousands.

IcoMoon App

3. Icon Vault

To generate your own icon font with Icon Vault, you first have to download their template package. Then just follow the instructions included in the template package. Once you’re done, upload your icons onto Icon Vault.

Icon Vault

4. Pictonic Fontbuilder

The Pictonic Fontbuilder allows you to choose from Pictonic’s free and paid icons in order to build your own customized Pictonic icon font. Pictonic has over 2,700 icons to choose from, and over 300 of them are free. Accessing the Pictonic Fontbuilder requires account sign-up.

Pictonic Fontbuilder

5. Glyphter

When you go to Glyphter, you will see a character grid on the left. The right side of the screen, called the "icon shelf", is where you will find free icons and a search bar. Simply drag and drop the icons you want to use from the icon shelf, into one of the boxes on the grid. You can also upload your own SVG icon files by clicking on the boxes on the grid. You can have up to 88 icons in your icon font for free. If you need to have more icons, you will need to sign up for a premium account.

Glyphter

6. Fontastic

To generate your own icon font with Fontastic, select icons from the available free icon sets (such as Streamline Icons and Entypo) and/or upload your own custom SVG icons. Once you’re all set, go to the "Publish" tab, where you will have the option to host your icon font on Fontastic’s Icon Cloud or download your icon font. Accessing the Fontastic icon font generator requires account sign-up.

Fontastic

Read Next

Adrienne Erin is a freelance writer and designer. She’s the founder of Design Roast, a blog that features helpful guides, inspiration, and posts about making it as a freelance designer. Follower her on Twitter.

The post 6 Free Tools for Creating Your Own Icon Font appeared first on Six Revisions.

Powered by WP Robot