Welcome to the second part of this tutorial, in which we will finish designing the music player that we started in part one. This includes creating the icons at the bottom, as well as making the music player responsive, so that all elements adapt to the width of the artboard and, thus, can be used for different device widths.

Our premise in creating all of the icons is to use basic shapes as often as possible, instead of custom vector elements. Shapes are much easier to set up and modify, and we will still be able to combine them into more complex forms using Boolean operations.

The post Designing A Responsive Music Player In Sketch (Part 2) appeared first on Smashing Magazine.

This right here is for esthetes only. And, as we all know, pure esthetes exclusively use iPhones. Tobias Reich from Frankfurt is one of those. He runs “Laudable Apps.”

“Laudable Apps” is a collection of the prettiest iPhone apps on the market. Tobias has been curating like crazy since 2012 already. It is obvious that he prefers quality over quantity, as the collection is growing rather slowly. If you want to be informed about new additions, you can follow “Laudable Apps” on Twitter and Facebook, or subscribe to the RSS feed.

Now, “Laudable Apps” has been featured on “ProductHunt,” which flushed the service into my stream of attention. There’s not a lot to say about the small free-time project of its creator. Nonetheless, “Laudable Apps” is one of those pages that you should go through, taking a lot of time and leisure, if you get excited over beautiful apps.

It really does seem like the appearance is the only reason why an app is added to the illustrious circle. Because of that, there are very few similarities between all the gathered apps. They all look great, and they’re all made for the iPhone. The collection can not be sorted. Representative aspects, like categories or ratings, are not included.

All you’ll find is a Tumblr-esque flow of beautiful apps, each of them introduced with two screenshots, as well as a link to the App Store. Maybe, in the future, Tobias will think about a sorting feature. Adding category rankings such as “the prettiest to do app,” for example, would be nice as well.

And no, I don’t believe that Android apps need a similar platform. In comparison to the iPhone app, the average Android app tends to be ugly – exceptions prove the rule.

Over the last four years I’ve been designing dashboards and applications, and I’ve learned how to deal with different departments, and utilise their knowledge in order to make product design more efficient.

Today, I’m going to share all of the steps that I’ve built into my daily routine, that I believe have made me a better designer.

Pre-process

1. Get as much information as possible (ask for three examples)

For me, nothing provides more clarity than seeing a real working example. When I am working with a new client, or on a brand new landing page for a product, I find as the easiest starting point is to ask the client to provide three or four inspirational pages, because this really helps both parties. Getting your client to put ideas onto the table gives you an opportunity to readily understand what they like, and what they expect from the finished design.

If you’re working with multiple teams you should aim to spend as much time with the developers on a product as you do with your designer colleagues. What I’ve learned is that the key to making an effective design decision is to ensure you speak with the dev team as much as you can. In my case, there have been cases where a solution to a problem was found, that I couldn’t come up with by myself.

The goal is to eliminate as many questions as possible before you move into development.

2. Learn about personas

At first, I must say I was skeptical about personas, but now it all makes sense to me.

So in complete contrast to my older process, I can see how personas are super important while working on product features, especially when the solution has many different edge cases. It helps you to understand who are you really designing for. I aim to have around four to five personas.

3. Set up exact goals?—what exactly should we track?

I think most designers/clients ignore this step, but one of the most important aspects of design for both parties is to understand the goals of the product you are designing. We tend to jump straight into pixels and quickly flesh out the UI of the project. If it’s a brand new website, or a new feature, be sure to set clear goals of what you want to achieve first.

Since everything is trackable, speak about the exact points you’re going to track. For example, these could range from new sign ups, to a number of customers using Paypal vs. purchases with credit cards. Always make sure you know how high you’re aiming for at the start!

(You’ll need this anyway for setting up funnels on Mixpanel later in this process.)

4. Set up a project folder and start building a moodboard

There are plenty of sites for inspiration?—?Dribbble, Behance, Pttrns etc. It’s really easy to find similar projects to the one you’re working on. Additionally, there may be already a solution to a problem you’re experiencing and trying to solve.

When I start working on a new project, I always setup a folder with folders named?—?Source Files, Screens & Export, Inspiration & Resources. I save everything I find on the internet to Inspiration folder to be able to use it later to create basic moodboards. This folder could be filled with anything from plugins, swatches or even full case studies from Behance.

Going low fidelity

5. Whiteboard

If we want to add a new feature or redesign a process we sit down and everybody at the meeting starts sketching ideas on a whiteboard, paper or even an iPad. This action allows us to put everyone on the team in the designer’s position. Later we end up with two design options to see which one works the best.

We always try to go through the whole experience and discuss most of the edge cases during this part of the process. It is really crucial to address them now as opposed to during the design phase, or even worse, during the development part. That’s when you can lose a lot time and energy.

6. Map out all of your screens (what data a user needs to input)

This is the time to go beyond the whiteboard and list out all of the user’s inputs and stories. Write down what exactly a user should insert into a particular screen and how a user can achieve their desired goals.

7. Write down all possible states

Because all dashboards, apps or websites’ forms have different states, this is another important step you shouldn’t forget.

While designing we need to be sure to address all of them. It’s nice to have shiny graphs and cool profile pictures in our Sketch files or PSDs. However, most likely, users will see the opposite side of your app. Especially when they come to your product. It’s necessary to be prepared. Below is an example of how we deal with empty states in one of our data components.

8. Prepare your first diagram

All of this leads to the final part of low fidelity. Thanks to the outcome of the whiteboard task we now know all of the possible states, user’s inputs and goals. To sum up all interactions I create a diagram and to be honest I’ve changed the style of doing this many times: Going from Sketch files with rasterized layouts to just rectangles symbolizing each page with their names below. That being said, the process was always painful, I usually end up in a situation where we want to change or add something later on in the process. With these solutions I’m usually forced to do many more steps; such as changing the positions of lines, arrows and images.

Recently I’ve been using Camunda Modeler, which is a not exactly a design tool; it’s a simple app for creating technical diagrams. Which sounds odd, but this app is developed to help you build basic diagrams. Most importantly everything created is completely scalable. You can easily drag and drop any point and it will automatically create lines and arrows for you. You can also choose from different types of points which can be helpful for highlighting when, for example, a user receives an email from Intercom. Camunda exports to SVG which makes it easy to color trackable points in Sketch.

Work / Design

9. Moodboard

I’m able to start with the creation of mood board, as I collect all images to my Inspiration folder. I use mood boards mainly to discuss my thoughts with colleagues and describe some of the visual ideas, before I start with the pixel process.

10. First draft

Designing is always an ongoing process. You’re going to iterate a lot along your way to a great result. With first draft is also a way of gathering feedback. You don’t have to come to pixel perfect design in order to start receiving feedback from your teammates, clients or potential users. To get their first thoughts and to start a discussion, I usually mix screens from our current designs. This allows us to start playing with real looking designs in less than a day. You can do a first simple prototype to test if things connect well together.

11. Write your copy

Copy is one of the key aspects of users’ decisions and I take it as a crucial part of the design. There is nothing worse than a nice design with confusing dialogs where users are struggling to find the next step.

12. First intern test

With your first draft you can quickly create a prototype in Marvel or Invision. This is something that I started doing recently and it turns out it’s another amazing validating aspect. With a prototype you can now easily set up a call with 3 or 4 people from your team and share the prototype link with them and try to ask a few questions while test on them particular flows/scenarios.

This way you can easily test your questioning skills and obviously test your design decisions on real users without worrying about wasted resources and time. I tend to choose people who are not that much involved in dashboard development. Also try to avoid watching someone who has already had a chance to play with the prototype before.

13. Etiquette

We all know how hard it is to stay tidy. How to deliver yet another feature. This usually leads to a messy Sketch or PSD files. I’ve learned a lot about the differences between working as a single designer in a startup, working in teams, or working on my own digital products.

When you do work in a team, think about your PSD’s like you’re creating them for someone else. I use the rule that if you have more than 8 layers in a folder, then you should create a new one.

I found one great plugin for Sketch, which saved me hours while I worked on my UI Kits: Rename? It.

Tip?:?Put everything on the canvas. I’ve always struggled with designing nice headers while I the rest of the canvas was white. While designing I learned to put all the content in place first?—?just play with the layout and typography. It’s much easier to design nice details and play with the whole concept with the content in place.

14. Create UI elements and start playing with Lego

I’m probably late to the party and this will already sound outdated while I’m writing it. The reason why we haven’t done any wireframing on the journey here is simple. Sketch 39 comes with something that I have found incredible and that is “shapes with resizing properties”. This is something that makes designing easy for everyone on the team. Our Sketch file is pure drag-and-drop now. You can easily give any of your teammates a blank canvas and they can create almost hi-fidelity drafts. Thanks to this we are able to skip all wireframing tools and start with almost real looking pixels.

This also goes hand in hand with us being able to actually convert wireframes to real designs. Any PM can create a wireframe and then I can easily take it over and transform to hi-fidelity.

Assets & Delivery

When you’re done with designing and iterating based on first feedback you’re not done yet. Now comes the time to hand your designs over to your engineers/devs.

15. Specifications

One my main aims is to always be able to communicate my decisions with the team and be able to reduce difficulty for our developers as much as I can in order to provide them with the best possible resources. That for me is definitely the most important part of my job as a designer.

Since we documented all the interaction and have everything ready from the beginning of our process, creating specs is a piece of cake. I tend to write specs in Google Docs or below the screens in Sketch files. It’s nice to handle your designs with explanations of all features so anybody can grab your file in the future.

16. Diagram

This technique is nice for printing out designs and discussing them with the team. But nowadays I think there are better options. Such as having ready the final prototype.

17. Final Prototype

One of the key things for me is to always have all interaction ready in prototype. I usually end up having 3–5 prototypes on the way to the final one for those little session with teammates or to show some particular flows. I tend to prepare all states in Sketch in one artboard and then duplicate those artboards to have every state ready when exporting.

It’s great to add comments to parts of your designs to expand your specification much more so that even a copywriter can easily go and check in real pixels and flows if every copy and dialog works as required.

18. Quicktime Video > Notes

When I’m not presenting stuff on Hangout to the team or a client I’m sending a screenshare video of me going through the prototype and explaining everything what I’ve designed. It’s a nice confirmation for me before any presentation that I know the answer on any question and possible fancy interactions I’ve decided to design. Could be also nicely used when working in remote teams. Everyone has access to replay the whole interaction thinking at anytime.

19. Animate

As a nice final touch you can use After Effects or Principle. It’s good to explain how you want this or that to move.

20. Styleguide

Another crucial point for engineers is to know how things will react in different scenarios. Think about error states of input or where to show error messages. Similarly how the disabled state of a submit button will look, where to put a spinner etc.

It’s super easy for engineers go just through your Symbols artboard and style elements one by one before they even start coding all screens thanks to having a Sketch file as Lego blocks.

Final testing

Since we are done with handing over our designs to engineers we are able to focus on the last part of the process?—?testing our decisions!

21. Inspectlet / HotJar

After the designs are turned into working code don’t forget to include your Inspectlet or HotJar JS snippets. I’m always excited (or frustrated) to see how users navigate through our dashboard or what are they doing on my portfolio page. Inspectlet is amazing in capturing all of your user session. Works great for bigger projects as well.

It comes with easy “/page” filtering which helps you watch sessions of a particular feature or flow.

22. Mixpanel

Mixpanel works great for validating our goals (those which we setup at the very beginning of our process). Mixpanel helps to see how many users complete particular flows. How many users dropped before setting up the account. How many people went from main landing page to store and to our most valuable product.

23. Google Analytics

I’m not capable of coding big things, but at least I’m able to work with CSS files and with simple code. Lately I was interested to see where users click and while looking at Hotjar heatmaps so I’ve decided to setup basic click tracker in Google Analytics as well. You can easily track every of user’s clicks on your website as well.

This helps me to easily map out user’s behavior. For example, I found out that people used top navigation on my site 5x more over the highlighted link in intro text. Sadly it doesn’t count clicks from users with AdBlock.

24. Intercom

When we agreed on our initial flows we were talking about part of the flows where user receives an email from Intercom. Our responsibility here is to ensure that all copy and the message itself makes sense and is actually helpful for the visitor. Be sure that your emails are guiding your user to your keen result and always try to provide specific support articles and info how to continue in the flow.

The last few words

25. Leave Dribbble behind

From what I’ve learned and how my design has changed over past 4 years, I’ve got to the point where Dribbble is not necessarily the place you want to create your designs for. I’ve always aimed to have nice pixels with sexy profile pictures, but that’s not what real users need and will use.

Here’s an example, on the left you’ll see something I designed for Dribbble. On the right, you’ll see something I designed once I spent some time watching people editing their profiles and realised that my vision wasn’t delivering what they needed.

You may receive 500 likes for bright crazy animation of a potato or sliding pizza but what’s really important is that your users will find how to manage frequency of company emails or how to filter their performance analytics.

[– This post was originally posted on Medium, republished with the author’s permission. –]

Easily Build a WordPress Shopping Cart + 10 Extension Plugins – only $24!

Source

I stumbled into an interesting problem the other day. I wanted to animate an element with a random animation-duration. This was the non-randomized starting point:

See the Pen Random numbers CSS #1 by Robin Rendle (@robinrendle) on CodePen.

This is the CSS I wrote to make the animation:

@keyframes flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#red {
  animation: flicker 2s ease alternate infinite;
}

So far so good. But no randomization happening there, that’s a fixed 2 seconds.

I wanted that animation time of 2 seconds to be random. I wanted to essentially write:

.element {
  animation: flicker $randomNumber alternate infinite;
}

Where $randomNumber is randomized programatically.

CSS preprocessors like Sass do offer a random() function.

$randomNumber: random(5);

.thing {
  animation-duration: $randomNumber + s;
}

That might be perfect for you, it wasn’t quite perfect for me. Random numbers generated during preprocessing have a big caveat:

random in Sass is like randomly choosing the name of a main character in a story. it’s only random when written. it doesn’t change.

— jake albaugh (@jake_albaugh) December 29, 2016

In other words, as soon as the CSS is processed, randomization is over. That number is locked at that value forever (i.e. until the preprocessor runs again).

It’s not like a random number in JavaScript (e.g. Math.random()) where that random number is generated when the JavaScript runs.

So after sighing as obnoxiously loudly as I could I realized that this would actually be the perfect opportunity to use native CSS variables (custom properties)! By themselves, they can’t do random numbers easier, but as we’ll see, they can still help us.

If you’re not familiar with them, then not to worry. Effectively they’re native variables built into the CSS language itself, but they’re different from the sort of variables that you might be familiar with from a preprocessor like Sass or Less. Chris listed many of the benefits a while back:

• You can use them without the need of a preprocessor.
• They cascade. You can set a variable inside any selector to set or override its current value.
• When their values change (e.g. media query or other state), the browser repaints as needed.
• You can access and manipulate them in JavaScript.

That last bit is what’s important to us. We’re going to generate the random number in JavaScript, then move it over to CSS via custom properties.

Set one is to create the CSS custom property we need, with a default value (useful in case the JavaScript we write in a moment fails for any reason):

/* set the default transition time */
:root {
  --animation-time: 2s; 
}

Now we can use that variable in our CSS like this:

#red {
  animation: flicker var(--animation-time) ease alternate infinite;
}

Undramatically, we’re exactly where we started. But although this demo now looks exactly the same as our previously animated SVG, this one is using CSS variables instead. You can test that everything is working by just changing the variable in the CSS and watch as the animation updates.

Now we’re all set up to access and manipulate that custom property via JavaScript.

var time = Math.random();

From here we can find the red circle in the SVG and change the --animation-time CSS variable via the setProperty method:

var red = document.querySelector('#red');
red.style.setProperty('--animation-time', time +'s');

And here it is! A randomly generated number in CSS which is being applied to an SVG animation:

See the Pen Random numbers CSS #3 by Robin Rendle (@robinrendle) on CodePen.

This is a step forward because the random number is generated when the JavaScript runs, so it’s different every time. That’s pretty close to what we wanted, but let’s make this a little bit more difficult still: let’s randomize that animation-duration periodically as it’s running.

Fortunately, we have JavaScript to work with now, so we can update that custom property whenever we want to. Here’s an example where we update the animation-duration every second:

var red = document.querySelector('#red');

function setProperty(duration) {
  red.style.setProperty('--animation-time', duration +'s');
}

function changeAnimationTime() {
  var animationDuration = Math.random();
  setProperty(animationDuration);
}

setInterval(changeAnimationTime, 1000);

That’s exactly what I was after:

See the Pen Random numbers CSS #4 by Robin Rendle (@robinrendle) on CodePen.

It’s useful to remember that CSS variables (custom properties) support is still a little patchy, so beware. Although what we could do is progressively enhance this animation like so:

#red {
  animation: flicker .5s ease alternate infinite;
  animation: flicker var(--animation-time) ease alternate infinite;
}

If CSS variables aren’t supported then we’ll still get some kind of animation being shown, even if it isn’t precisely what we want.

---

It’s worth noting that CSS variables aren’t the only possible way to randomize the animation-duration. We could access the DOM element via JavaScript and apply the random value directly into the style:

var red = document.querySelector('#red');
red.style.animationDuration = Math.floor(Math.random() * 5 + 1) + "s";

We could even wait for the animation to finish before setting a new duration, if we wanted:

var red = document.querySelector('#red');

function setRandomAnimationDuration() {
  red.style.animationDuration = Math.floor(Math.random() * 10 + 1) + "s";
}

red.addEventListener("animationiteration", setRandomAnimationDuration);

---

Just to sprinkle one more possibility in here, you could also do this with EQCSS.

@element '#animation' {
  .element {
    animation-duration: eval('rand')s;
  }
}

var rand = Math.random();
EQCSS.apply();

---

Do you wish randomization was available right in CSS itself? I’m not sure if there is any talk of that. Even if there was, we would likely have to wait quite a while to actually use it. Along those lines, Philip Walton recently wrote how difficult it would be to write a true polyfill for random numbers in CSS. Much easier to handle in JavaScript!

---

Random Numbers in CSS is a post from CSS-Tricks

Inspired by Robert C. Martin’s book Clean Code, Ryan McDermott put together a repo with some software engineering best practices as they apply to JavaScript in particular. The repo has tons of great guidelines for beginning programmers, and good reminders for seasoned maintainers.

I’m a particular fan of this style of teaching because it focuses on legibility as much as writing. This ensures that our codebases are friendly to the next developer who comes along, even if it’s ourselves.

Direct Link to Article — Permalink

---

Clean Code JavaScript is a post from CSS-Tricks

My name is Mason Ellwood and I’m currently working on Flatiron School’s Online Full Stack Web Development Program. Each week, I’ll be writing about my experience, what I’m learning, and tips on learning to code.

Throughout my learning to program career, it seems like all I have and will be doing is learning and never actually be able to start my carrer. That seems like a stupid sentence, but a lot of the time it seems like the list of things I NEED to know does not stop. Every job listing you need to know 20 different abstract languages to even get your foot in the door, and I am constantly under qualified or lack enough experience to even land an interview. To put it frankly; that sucks. So where is the standard, what do I NEED to know, and what will actually be used on a daily basis; because if in my head I am constantly juggling 20 different language’s syntax on a daily basis, I may be over my head… I was discussing this with one of my good friends Paul Jackson who works in IT, and he helped me set everything straight. He said “If you master a language OOP (Object-oriented programming) concepts it will show in your work. Companies just want you to contribute in a certain way rather than to be an expert in all.”

As Eli eloquently touched on, most job postings come from a “pissed off IT manager” and a human resource person who both do not really know what they want. After the IT manager dumps tons of data on the human resource manager, he then writes a convoluted list of requirements that the developer needs to meet. When in actuality they only need you to do a few tasks, not all 20 “requirements” that are listed on the job posting. Thinking about the development world in this sense has better helped me personally prepare what I NEED to know to have a better chance at landing a developer job once I have completed the coursework for Flatiron Schools.

Alright let’s get into it, what is a Command Line Application! A Command Line Application, often referred to as a CLI (Command Line Interface) Application, are applications you interact with entirely through the terminal of shell. This includes no use of graphics or visual interface beyond what you see in the terminal. This birthed the software revolution!

“Write programs to handle text streams, because that is the universal interface”

– Douglas Mellroy, creator of UNIX Operating System

They are often times the most powerful interfaces you will interact with on a daily basis. This including GIT, Learn (the software Flatiron School is founded on), and Ruby’s CLI application interface. There are many more, but we will not talk about those.

So how do you use the CLI application logic with Ruby…. All files should follow a similar file structure with the top level directory being: bin, lib, config, spec, and something like app. You may also see .learn (specific to Flatiron Schools), .rspec, Gemfile, Rakefile, or program files like ttt.rb. If you are working in your terminal you can also use the bash command ls -lah which will show the list of files in your current directory, including hidden files (files starting in a period).

You can also use ls -a which displays all files including hidden files as well.

Inside the bin/ folder we generally want to place all the code that is relatable to running our actual program.

Inside the config/ folder you will place all the application environments. This includes all required files to initialize the environment of your program. These files connect to your database, and ensures your test suite has access to the files that contain the code it is testing.

Your lib/ folder is where a majority of your code lives. Within these files defines what your program can do.

Your spec/ folder is where test files go. These are written tests that makes sure your code behaves as expected.

Within the root directory of your Ruby program you may also file, if needed, your .rspec, .learn, GEMFILE, Gemfile.lock, Rakefile dependent on necessity.

Using Ruby’s CLI Application process, you are able to create dynamic programs that are able to capture user inputs to produces an interactive program. This follows a basic workflow:

• Greet the user
• Asks the user for input
• Compares and stores the input
• Do something with the input

As you can see by my beautiful artwork, running this program will first run files in bin/ and which are the instructions of how to execute. The file workflow sounds something like this.

• Include the files need to execute (lib/hello-ruby-program.rb)
• Greet user
• Asks user for input
• Captures that input using #gets
• Uses user input to do something else, setting it to the value of name which is in the method of greeting
• Sends that value to the lib/hello-ruby-program.rb
• Execute method with user inputted value
• Display return value to the terminal.

Using this logic allow users to input a value directly to the terminal, with a return value displayed to the user.

Calling the gets method captures the last thing the user typed into the terminal, which can be set to a variable. Calling gets freezes the program until user inputs some value.

Comment below if you need any further explanation on what was covered before, and I will do my best to elaborate.

Read More at My Journey Of Learning Programming Through Flatiron School #6

Since humans are visually driven creatures, the impact of imagery only increases with the help of animation. Our eyes innately pay attention to moving objects, and animation is like eye candy — catchy and bright elements that call attention to and help differentiate an app from its competitors.

As of late, more and more designers are incorporating animation as a functional element that enhances the user experience. Animation is no longer just for delight; it is one of the most important tools for successful interaction.

The post How Functional Animation Helps Improve User Experience appeared first on Smashing Magazine.

Libraries.io is a new project for web designers and developers. It helps you stay on top of libraries, modules, and frameworks from the open source ocean.

Nimble Search Engine Ignores Platform Borders

Libraries.io is growing quickly. By now, it already has more than two million open source projects in its portfolio, and it continues to grow steadily. The service integrates itself into almost three dozens of different package managers. Accordingly, the projects can also be filtered by these package managers.

As you’d expect from a search engine, Libraries.io also lets you search free text keywords. However, it may be more efficient to directly search for the license, or a programming language in conjunction with a license.

In this example, you’re searching for JavaScript projects that are distributed under the MIT license. This example gets you all WordPress projects in PHP under the GPL v2. I guess you get the idea?

Libraries.io: Close Connection to Github

Libraries.io also latches onto Github. This begins with you being able to log into Libraries.io using your Github account. On some of the detail pages for respective projects, you’ll find Github statistics, and you’ll always find links to the repository, as well as other important information and links regarding the project. Speaking of an extensive all-round information is not an exaggeration.

Logging in with your Github account also gives you the advantage of being able to follow projects directly on Libraries.io. If you do that, you’ll be kept up to date with news on the projects you chose. This also works for platforms that don’t offer this functionality on their own. The integration with Github also makes sure that the lists of the most popular projects are calculated based on their respective Github status, meaning the number of stars and contributors.

The service provides its own API. So if you wanted to create an app based on the data from Libraries.io, you could do so.

Using the service is free.

Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.

David Walsh has a post on it. I’m interested, as I’m still working on my muscle memory for ES6. Even the simple stuff. So blasting some old code through this as a kick start seems appealing.

Direct Link to Article — Permalink

---

Lebab is a post from CSS-Tricks

Just because a web designer’s job isn’t necessarily audio-related, that doesn’t mean that web designers shouldn’t use headphones that are tailored to their needs. Just what are their audio needs? Well, those needs could range from needing active noise cancellation to better concentrate to needing headphones with a decent microphone so that you can chat with your clients.

Here are a few awesome headphones to suit your web-designing needs.

B&O Beoplay H9

The B&O Beoplay H9 headphones are some of the best reviewed headphones we’ve tried over at HeadphoneReview.com, and for good reason — for one, they’re super high quality, plus they offer an awesome sound.

One of the coolest things about the Beoplay H9’s is that they offer some really nice noise cancellation — which is perfect for those that sit and a desk working and don’t want to be distracted during that time. Their battery life isn’t amazing, but another good thing about them is that if they do run out of battery, you can simply plug them into your computer via an aux cable.

If there is a downside to the B&O Beoplay H9’s, it’s that they’re a little pricey, sitting at a cool $499. Still, if you can afford them, these are the headphones we recommend for web designers and everyone else alike.

HiFiMan HE400S

Next up on the list are the HiFiMan HE400S’. These are perhaps better suited to the web designers out there who work from home. Why? Because they have an open design, meaning that the sound inside the headphones is more likely to escape, and the sound from outside the headphones is more likely to get in. That’s a good thing — it means that the sound is much more natural and many suggest that open-back headphones in general sound a lot better. Whether that’s true or not, the HiFiMan HE400S’ sound absolutely awesome.

Like the Beoplay H9’s, these cans probably aren’t the best if you’re looking for a pair of headphones to take out and about, but if you just need them for home use, they’re a steal at only $299.

Echobox Finder X1

The HiFiMan HE400S aren’t the best for taking out and about, but the Echobox Finder X1’s are the opposite — because they’re earbuds. One of the coolest things about these is that they’re customizable — you can unscrew the filters on the earbuds and screw new ones in place, resulting in a slightly different sound. That means that you’ll be able to get the sound that best matches your needs.

On top of the customizable sound, the Echobox Finder X1’s have quite a nice design, and one that’s pretty unique. All these features aren’t super cheap though — especially for earbuds. They come in at $229, but if you’re looking for earbud-style headphones and don’t mind spending a bit of cash, we highly recommend these.

Grado SR125e

Grado is a classic name when it comes to headphones, and for good reason. The company builds only quality products, and all of its headphones are hand-built. The SR125e’s are another pair of headphones that have an open-design, so you might only want these if you work at home — but they are quite a bit cheaper than the other open-design headphones on this list, coming in at $150. They’re also a little smaller — they’re on-ear rather than over-ear.

Still, as Grado headphones, the SR125e’s sound like a dream, so if you have a $150 budget but still want an excellent pair of cans, these could be the cans for you.

JLab Audio Omni

On a bit of a budget but still want a decent pair of headphones? That’s where the JLab Audio Omni’s come in. These are Bluetooth headphones, meaning that you can listen without needing pesky wires. On top of that, they’re really quite comfortable, boasting JLab Audio’s “Eco Leather Cloud Foam Cushions.” Sure, that’s mostly marketing lingo, but in the end they deliver on their promise. The best thing about these, however, is their price — they come in at only $99.

Conclusions

There’s a great pair of headphones for everyone, and this list should have plenty to offer for all web designers. Of course, if you need a little more info, head over to HeadphoneReview.com.

Read More at Top 5 Headphones For All Different Kinds of Web Designers