Brackets is a great source code editor for web designers and front-end web developers. It has a ton of useful features out of the box. You can make your Brackets experience even better by using extensions.
These Brackets extensions will help make your web design and front-end web development workflow a little easier.
The best designers are lifelong students. While nothing beats experience in the field, the amount of helpful online resources certainly helps keep our knowledge sharp.
In this post, I’ve rounded up some useful e-books that provide excellent UX advice and insights.
1. Bright Ideas for User Experience Designers
This is a free e-book by usability consultancy firm Userfocus. The best part of this book is its casual tone. Acronyms like "the CRAP way to usability" and The Beatles analogies make remembering the book’s lessons a lot easier, and makes for an interesting read. That’s why this book is one of my favorites.
2. 50 User Experience Best Practices
As the book’s title implies, 50 User Experience Best Practices delivers UX tips and best practices. It delves into subjects such as user research and content strategy. One of the secrets to this book’s success is its creative and easy-to-comprehend visuals. This e-book was written and published by the now-defunct UX design agency, Above the Fold.
3. UX Design Trends Bundle
Over at UXPin, my team and I have written and published a lot of free e-books. For this post, I’d like to specifically highlight our UX Design Trends Bundle. It’s a compilation of three of our e-books: Web Design Trends 2016,UX Design Trends 2015 & 2016, and Mobile UI Design Trends 2015 & 2016. Totaling 350+ pages, this bundle examines over 300 excellent designs.
4. UX Storytellers: Connecting the Dots
Published in 2009, UX Storytellers: Connecting the Dots, continues to be a very insightful read. This classic e-book stays relevant because of its unique format: It collects stand-alone stories and advice from 42 UX professionals. At 586 pages, there’s a ton of content in this book. Download it now to learn about the struggles — and solutions — UX professionals can expect to face.
5. The UX Reader
This e-book covers all the important components of the UX design process. It’s full of valuable insights, making it appealing to both beginners and veterans alike. The book is divided into five categories: Collaboration,Research,Design,Development, and Refinement. Each category contains a series of articles written by different members of MailChimp’s UX team.
6. Learn from Great Design
Only a portion of this book, 57 pages, is free.
In this e-book, web designer Tom Kenny does in-depth analyses of great web designs, pointing out what they’re doing right, and also what they could do better. For those that learn best by looking at real-world examples, this book is a great read.
The full version of this e-book contains 20 case studies; the free sample only has 3 of those case studies.
7. The Practical Interaction Design Bundle
I’ll end this list with another UXPin selection. This bundle contains three of our IxD e-books: Interaction Design Best Practices Volume 1 and Volume 2, as well as Consistency in UI Design.
- Interaction Design Best Practices Volume 1 covers the "tangibles" — visuals, words, and space — and explains how to implement signifiers, how to construct a visual hierarchy, and how to make interactions feel like real conversations.
- Interaction Design Best Practices Volume 2 covers the "intangibles" — time, responsiveness, and behavior — and covers topics from animation to enjoyment.
- Consistency in UI Design explains the role that consistency plays in learnability, reducing friction, and drawing attention to certain elements.
Altogether, the bundle includes 250 pages of best practices and 60 design examples.
Did I leave out your favorite UX e-book? Let me know in the comments.
About the Author
Quick Overview of User Experience for Web Designers
Creating a Timeless User Experience
10 Free Web Design Books Worth Reading
10 Awesome UX Podcasts
Freelancers often struggle with how to price their services. There are many sites that offer salary data for full-time employees, but none that do so for freelancers.
We’ve managed to collect data about freelance hourly rates over at Bonsai, and we wanted to make it public, so we built Rate Explorer to make it easy for people to see our data on how much freelance designers and developers charge by the hour.
We obtained the data from among the 15,000+ freelancers that use our app. We supplemented it with user research surveys, and that added another few hundred data points.
Currently, we only have data from freelancers operating in the U.S. Once we gain a critical mass of hourly-rate data for other countries, we will share those as well.
We spotted some noteworthy trends by analyzing the data.
Developers earn 30% more than designers.
The hourly rates of designers (especially graphic designers) remain sticky at under $60 an hour at all geographies and experience levels.
In addition, whereas developers quickly begin increasing their hourly rates after gaining 3 years of experience, designers tend to increase their hourly rates at a slower pace.
Read: Why Designers Should Learn How to Code
The most common explanations we’ve heard for this trend are:
- Design is a very competitive field
- Lower barrier to entry for some types of design
- Typically smaller project sizes
Freelancers in the Coastal regions have higher hourly rates than those in the Midwest and the South by an average of ~10%.
Freelancers in the West Coast and East Coast generally have higher hourly rates compared to freelancers based in the Midwest and South.
This trend was surprising to us because freelance design and dev jobs can easily be done remotely, so it would be reasonable to think that a freelancer’s location would not have a whole lot of influence in his/her hourly rate. The difference might be linked to the higher living costs in coastal regions, which in turn might necessitate higher hourly rates, — but this is just speculative.
Read: The Best Sites for Finding Remote Work
The biggest increase in hourly rates happens when freelancers reach 3–5 years of experience.
Across all skill types and geographies, freelancers significantly increase their hourly rates when they gain 3–5 years worth of experience.
Having spoken to some of our users, we’ve learned that this trend can be attributed to:
- Learning core business skills like negotiation
- Building a network of recurring and trusted clients
- Establishing a strong portfolio
Read: Three Simple Steps to Maintaining a Razor-Sharp Skill Set
What This Data Can Mean for You
Pricing can be a complicated subject, and many factors should go into pricing your work. The Rate Explorer is most valuable as a directional indicator. Are you above, below, or within the average for similar freelancers?
7 Simple Ways to Raise Your Rates and Keep Your Clients
Making Money Designing Themes: What You Should Know
How I Earned A Lot More on Projects by Changing My Pricing Strategy
5 Tips for Making More Money as a Freelance Designer
At the start of last year, I was in a tight spot.
I’m a freelance writer, and my steady flow of work had slowed down and dried up. In February 2014, I made just over $7,000. In February 2015, however, I made just under $2,000. That’s a 70% pay cut when compared to the previous year’s earnings.
With my income declining rapidly to the point at which it was well below my cost of living — one of the tricky aspects of living in Tokyo is that it’s one of the most expensive cities to live in — I was forced to take action.
I did what most freelancers did: I sent out email after email to my old clients.
The results were weak, one small project and a one-off gig.
So I decided to try something a little different and turned my shortage of work into an interesting marketing experiment.
From my own experience, and speaking with other freelancers, it seems like the typical freelancer’s response to a shortage of work plays out like this:
- After a few weeks without a project, begin to worry, and start contacting old clients.
- If that doesn’t work, start sending out cold email after cold email to new prospects.
- If there’s no response, go for low-budget jobs on sites like Upwork or Freelancer.com.
- Panic. Offer a huge discount to the prospects you meet, trapping yourself in the low-pay/low-reward freelance cycle that so many talented people end up being stuck in.
Basic analysis of this strategy shows that it doesn’t work. I know because I’ve experienced it myself, as have many of my friends who also freelance for a living. The truth is that low rates don’t sell. At least not with the type of awesome, high-quality clients you want.
A far stronger approach to getting more work and increasing your income is to focus on getting high-quality clients by selling to them really, really well.
It’s the "more wood behind fewer arrows" approach. Market your service to fewer prospective clients, but put much more effort into each one of them. I learned this concept from entrepreneur and business-growth advisor Bryan Harris (founder of Videofruit) who used it to market his video creation service to tech companies. The main idea is to offer so much value that it’s impossible for any prospective client to ignore you.
Sending Out Handwritten Letters
Here’s what I did to get my freelancing business going again.
Instead of sending cold emails, which are effective in bulk but have a terrible response rate, I snail-mailed handwritten letters to all of the companies I wanted to work with. The letters were mailed to design and digital marketing agencies throughout the U.S.
In total, I sent out just over 100 letters, half of which were hand-addressed, and half of which were written entirely by hand.
All of the letters contained this exact same message:
Hi [person’s name],
Do you work with freelance writers at [company’s name]?
I ask because I am a freelance writer from New Zealand and I would love to work with you. I write for big tech companies like [mention one of my previous clients], as well as small to mid-sized agencies. I can write press releases, blog posts, articles, website content, landing pages and more.
My content is extremely good and very modestly priced.
I understand you’re probably suspicious of letters you receive from strangers, so to ease your concerns I would be happy to write a few custom samples for you, free of charge.
If you’re interested, just send a letter to my return address.
Just kidding! You can email me at [my email address]. That’s definitely more convenient.
Looking forward to working out how I can help you in your role at [company’s name].
Along with the letter, I also included:
- My business card
- A page containing testimonials from my existing clients
- Samples of my work
To find the right people to contact, I manually went through the Google results for search terms like "digital agency in [some city]" and found the person in charge of content and public relations. I tracked down their LinkedIn profile to check that they were the right person to contact, then wrote the letter and mailed it to them.
Since I was sending the letters from Japan, they were packaged in Japan Post envelopes with a Japanese postage stamp. I’m sure the novelty of receiving a hand-addressed letter from another country was one reason for the campaign’s success, since it instantly inspires curiosity.
All in all, I received 14 responses from the slightly more than 100 letters I sent out. It cost me about $200 to ship out all the letters, so it ended up being roughly $14 per lead.
Of the 14 responses, one made a significant 5-figure order and two others made small 3-figure deals with me. The 5-figure client has grown into one of my most important clients today.
I also followed up over the phone with the clients that didn’t respond to the letter. Almost all of them reported that they were amused and surprised about receiving a letter from a writer on the other side of the world, and many said I would be first in line for any extra writing work they had available in the future.
As a writer, letters are a great strategy. For designers, I think they’re even better. Imagine if you could put your favorite portfolio items right in front of a client on beautiful card paper instead of emailing them a link to your online portfolio or Dribbble account, hoping that they’ll click through and browse through your work.
If I were a freelance designer, I would try mailing out pop-up books with website layouts, cards with sample logos and testimonials from happy clients. As a developer, you can use the exact same strategy I did, but mention your previous development work instead of written content.
The point of all this is that sometimes it’s better to use "old fashioned" technology to market yourself, especially in an industry like design and development where the vast majority of marketing is done online.
Simply by doing something different, you can stand out in a very good way.
Since I started doing this in early-2015, I’ve had a steady flow of clients from the letters I’ve sent out. My rates are back to where they were before, and on occasion even better than before.
If you’re ever short on project work and can’t get a response with the typical way of cold-emailing prospective clients, give handwritten letters a try. It’s old fashioned, it’s unique, and it’s exactly what you need to do to get the attention of great clients and give your freelance business the push it needs.
Aggressive Expansion: 8 Tips for Finding More Clients Now
5 Pricing Tips to Earn More on Client Projects
7 Ways to Get More Referrals for Your Web Design Business
5 Tips for Making More Money as a Freelance Designer
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.
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, 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 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.
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 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, 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.
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.
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 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 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 much more. Basscss is surprisingly feature-rich for something that weighs less than 4 KB.
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 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 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.
The following table contains useful details about the CSS frameworks featured in this list.
|Name||Size*||Docs||License||GitHub Repo||Popularity **|
|Kube||5.94 KB||Docs||MIT||Repo (outdated)||538|
|FOX CSS||2.46 KB||Docs||Unknown||Repo||87|
|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.
7 CSS Tools You Should Be Using
5 CSS Effects Libraries for Supercharging Your Designs
CSS Development at Large-Scale Websites
When visitors arrive on your company’s website, you want them to take action. Depending on your business, that “action” may be many different things, from filling out a contact form to making a purchase.
Regardless, you should improve your site to make converting as easy as possible for your visitors. The best way to do this is with conversion rate optimization.
One of the simplest ways to optimize a site is with A/B testing, or by creating two versions of the same element and showing them to real visitors to see which performs better. As you run these tests on different parts of your site, you’ll be able to optimize each page for a higher conversion rate.
Before you get started, though, you’ll need to select a tool to help you set up, monitor, and review your tests. There are many available online, but the following four are our top picks at WebpageFX.