How to Choose the Right Monitor for Web Design


Having the right equipment can make working on a web design project delightful or downright miserable. This is especially true when it comes to choosing the right computer monitor. (You are going to be looking at that screen for hours on end, after all.)

So how do you find and purchase the best monitor for your design project? The answer might not be as simple as you think. You will want to base what monitor you buy on the type of computer you use (desktop vs. laptop), size and scope of project and personal preference.

But we can give you some ideas of things to look for and tips for finding the perfect monitor for web design projects.

Desktop vs. Laptop

Desktop vs. Laptop

First, you have a decision to make. Are you a desktop designer or laptop designer? A lot of this may depend on how and where you work. From an office, from home, on the go?

If the answer is a laptop, there are a lot of factors in addition to monitor specifications that you will want to think about. (All of these elements will impact how you use and work on that laptop monitor.)

  • Battery life
  • Connectivity
  • Keyboard size
  • Mouse vs. pen vs. touch controls
  • Portability
  • Screen size (laptop size)

Now that we have the whole desktop or laptop thing covered, let’s really start to think about monitors. And in particular, big desktop monitors.

How Big Do You Go?

iMac Retina

Let’s be honest: We all judge other designers by the size of the monitor on the desk. And bigger is definitely better. (You want so see every tiny detail, right?)

But there are more considerations to what size monitor is the right fit depending on the type of work you specialize in. Think of it this way, if you are designing games that will primarily be played on tablets, you might want a smaller screen that mirrors a tablet size to use for some design and testing aspects of your work.

Most designers though opt for monitors that are somewhere in the 24- to 27-plus-inch range. (Remember monitors are measured diagonally.) The 27-inch monitor is popular because it offers a great viewing area, will fit in most workstations and is rather affordable.

Consider Resolution

The resolution – or number of pixels a monitor can display – is an important factor in the monitor-buying process. The higher the resolution, the better the detail.

Monitor Resolution

This is something that is getting even more important every day with more end users buying devices with retina displays. Some of the most popular devices on the market feature more pixels than HD TVs right now.

Resolution is measured in horizontal (width) pixels by vertical pixels (height). Shaun Anderson for Hobo Internet Marketing keeps a frequently updated list of the best screen resolutions for designing websites. The most popular size today is 1,366 by 768.

Pick a Panel

Wacom Monitor

All monitors are not the same in the way they are constructed. Most types fall into four categories and can vary drastically in price and overall performance.

  • Twisted nematic panels (TN): This is the most common style of monitor – and least expensive. If you are not sure what you have, this is probably it. This monitor is fast and has a quick refresh rate but is not as accurate when it comes to rendering color and can have some distortions.
  • Vertical alignment panels (VA): This is one of the toughest monitor types to find. It falls in the middle of the pack in terms of price and has better color rendering than TN models.
  • In-plane switching panels (IPS): If color is your thing, this is the monitor for you. The accuracy is wonderful from almost all angels, although these models have a slower refresh rate (primarily a concern for gamers). This is a fairly expensive option by one many designers opt for.
  • Plane-line switching panels (PLS): This model is much like a IPS monitor, with more calibration and features. It is the priciest options available.

Color and Gamut

Color and color correction are two elements that mean a lot to designers when it comes to picking the right monitor. You’ll want to make sure the monitor you choose has color correction and calibration capabilities.

Consider the gray gradient – higher quality is noted when shades of gray or other colors can fade easily across the screen without color breaks. How this works can get a little technical but has to do with the response of the RGB signal from the graphics card to the monitor itself. Some processes include to deterioration of that signal; others do not. Look for monitors with higher LUT numbers for better color quality.

When it comes to calibration of color, you will likely invest in an add-on bit of software to do this. There are plenty of options on the market that you will buy after you actually decide on a monitor. What you will really need to think about when you are making the monitor purchase is the quality of the graphics card. (It’s worth the money to get a monitor with a high-end graphics display.)

Color anf Gamut

The other color consideration in terms of monitor selection is gamut – the complete range of viewable color available on the device. Honestly, this is less of a concern than many people make it out to be, unless your focus is on photography or printed design projects. The reality is this: No matter how great the color is on your end, it will display based on the equipment of the user. Most displays, including Apple and Windows operating systems – are made to be sRGB compliant. (For more on gamut settings and color correction, you can read this tutorial.)

Think About Your Workspace


In addition to the monitor itself, you should think about where you are actually placing it before you make the purchase. There are a few key questions you should ask yourself to help find a model that will work from where you are working.

  • Will it fit in my workspace or on my desk?
  • What type of stand is necessary? Does it need to swivel?
  • Are there lights or windows that will cause a glare?
  • Will it connect to my current equipment?

Go through the checklist and determine what features are most important to you. (Personally, I always opt for an anti-glare coating and swivel base. These things make it easier to show work to others.)

Consider the impact of others looking at the screen when thinking about these elements. Dark workspaces don’t require anti-glare coating, for example, which can dull down information on the screen.

Connectors and plugs are another pretty important consideration. Make sure you have everything you need to actually plug your new monitor into existing equipment. (One of the things that I always look for is USB ports on the monitor; it’s a feature that I absolutely love and have gotten extremely used to.)

Look at Special Features

Be honest, will you actually use all those fun features or not? When looking at what a monitor can and can’t do, stick to what you will find useful.

Add-ons such as touch screens and webcams can drive up the price quickly, but if you aren’t going to use these tools, it is a waste of resources. Other features that often sound cool but are unnecessary when it comes to graphic design monitors include built-in speakers, TV tuner and super-fast response times.

Monitor Calibration

The most important special feature for designers should include accurate color calibration. You want to make sure what you are seeing on your screen is exactly what will come across for others.

Plan a Budget and Stick to It

Finally, you need to think about budget. When you are looking for the perfect computer monitor for web design projects, it can be easy to want everything. But you have to be realistic. How much money can you actually spend?

A nice, high-end monitor is not cheap. Models can range anywhere from $500 for smaller sizes to upward of $3,000 for larger (think 32-plus inches) displays. Set a budget before you start shopping so you know what you can and can’t have.

If the budget is tight, instead of one pricey monitor consider a primary monitor and a second smaller monitor for other things, such as checking email or social media.


There’s a lot to think about when selecting the perfect computer monitor as a web designer. Think about how you work and what features you can’t live without before you even look at the first model. Set a budget and stick to it.

Then go shopping. There are a lot of fun tools out there. What type of monitor do you prefer? Why? Share your favorites with us in the comments.


  1. Brenda Feb 23, 12:02 pm

    I own a Iiyama ProLite XB2779QS and I absolutely love it! I even like it better the screen of the imac, which I use at the office.

  2. Clay Feb 24, 1:47 am

    Coming from the print world, I am very familiar with the importance of proper color calibration in order to best match how ink looks on paper. I remain utterly confused, however, about how such ideas translate to the web.

    What are the ideal color settings for a webdesigner? Print designers typically use a rather warm white point to better match the color of paper. In such a setup, my monitor looks noticeably redder and warmer from every other untouched monitor.

    So a webdesigner surely is not going for the same color settings that a print designer is after, so then what exactly are they after? The typical user has almost certainly never touched calibration settings, so just how much should we be calibrating? Does a webdesigner really need a fancy SpiderHD calibration tool?

    Perhaps I’m really overthinking this.

    • Keiron Roberts Mar 3, 8:51 pm

      I agree. What’s the point in calibrating your monitor if nobody looking at your websites have done theirs. Generally you use hex values which (if you are lucky) are given to you from the organisations brand guidelines. We will quite often take a look at the finished result on a few monitors/laptops just to make sure everything is presentable. I have never used a calibrating tool in the 15 years I have been doing it.

  3. simon stratford Feb 25, 12:19 am

    I mainly work on web and use imacs, so I don’t get a choice in monitor. I don’t use any colour management settings “The most important special feature for designers should include accurate color calibration”

    You can calibrate all you want but most home users won’t see the difference, its great for print design, but pointless for web design.

    In my opinion, you should invest in a good chair with high back support!

  4. Thinsquare Feb 25, 3:32 pm

    I am using Mac to design and develop websites.We have observed that end user don’t have any idea of color combination and any other issue but the thing is that it should be sober to draw attention.

    So @simon is right about having comfortable chair and right distance from gadget.

  5. Kristjan Mar 3, 9:32 pm

    I do agree that one should own a proper monitor but I am sort of confused as well.

    Isn’t it logical to use a rather mainstream monitor for webdesign as most of the users will be looking the end “product” from random monitors anyways?
    In this case we, the web designers, should “see” how the work looks on most of the users random monitors. And by random I mean ranging from low-end to mid-range + high-ends which is the smallest group out there.

  6. Dave Bowra Mar 4, 2:55 am

    You design for the ‘average’ audience of the website. What that is depends on the target market. You need to have a view about the monitor / device of the average visitor, and of the target (buying) visitor – physical size, resolution, specification. Average and target visitor may not always be the same.

    As a developer you have to have a view of the average visitor across the range of your customers. Know your customer. And know your customers customer.

    For many it is going to be ‘middle-of-the road’ requirements. But if you are in the high-spec market, say designing for gamers, then you are going to need a higher-spec setup.

    Your own monitor / monitors should be as capable as the target market of the client so you can check it looks and feels right for them. Plus you should be able to test it at other sizes / resolutions. If an important part of your target market use a particular device, such as iPhone, then you must be able to test it on that device as well.

    Also remember most ‘normal’ people do not colour calibrate their monitor, so your design has to look appropriate on out-of-the-box settings.

    Also have to consider the many people with some degree of colour blindness. 1 in 12 men, and 1 in 200 women. A site targeting men has to be more concerned with red-green blindness than a site targeting women.

  7. Marty Mar 4, 4:54 am

    My monitor is a 60 inch Vizio TV. Yup, you read that right. It is the absolute best situation I have found ever. I used to use a dual monitor setup but this way I can sit in my easy chair with my bluetooth keyboard and mouse and work away! No back problems, no eye strain just code away. Much easier to find code mistakes too! I don’t use a WYSIWYG editor, code by hand with notepad++ Love it! Highly recommend!

  8. AP Mar 4, 7:32 am

    I used to OS windows for several years ago, but the fact OS X the best color calibration for correction or anything about design as you need, iMac good for beginner but for second level I think you should try MP because the UX of keyboard or shortcut are really fast then os windows. cheers :D

  9. Michael Mar 10, 2:20 am

    I use Windows, so I use a Dell U2711 that I’ve had for 4 years. It’s worked great up until lately. Recently I’ve been having to adjust the reds often, which may not have anything to do with the monitor as much as some unrelated software I’m running–I don’t know which–but otherwise it looks great and has some nice features as well.

  10. Designer Rocky Mar 12, 3:49 pm

    I am a UI/UX Designer Can anyone please suggest me what is best for me

    iMac, mackbook Pro or any onther windows computer..

    i am very confuse :( write now i am working with windows

    • Dave May 27, 4:08 am

      Windows is fine to design with and in some cases preferred. The Adobe suite since CS3 has actually been more stable on PC’s than macs. I worked for a design firm that used mac pros exclusively and its sad how often macs crashed. A well built PC will not only cost less than a mac but will perform just as well (or better) for the same amount of time with mild maintenance.

      Outside of the performance gains by using a PC, the shorcuts are the same or very similar. I had no issues transitioning from mac to PC as I went from work to home. The bonus to the adobe suite on PC is additional functionality that can not be had on a mac. For example inside of photoshop or illustrator, on a mac you cant preview fonts live but you can on a PC (when you have a word selected and scrolling through the fonts). Adobe on PC also allows for scrolling through blend modes, which you can not do on the mac. This translates into saved time, which is saved money, or money made.

      Apple became synonymous with design due to their use of proper type back in the 80’s. Microsoft did the same thing in the mid late 80’s and design on a PC has been just as doable as on a mac since then.

      Bottom line is don’t let people tell you that you can’t design on a PC. They are talking out of their bottoms. I was top in my class and I did most of my work on my PC at home. It simply was more powerful than the aging mac pros in the class room. My ability to design was actually limited by the macs (mostly due to not having enough memory, or slow processors).

      Get a good IPS panel (Dell Ultrasharps are a good place to start) and a calibration tool and you will spend less than a mac and have a tool that performs better than the built in mac calibration walk through.

  11. Jim Sanders May 27, 7:17 pm

    Looking at monitors in person at a store first is helpful as well. My first big monitor purchase was online and all I saw was a bunch of differently priced screens that seemed to be about the same. Get an idea of what all of the features and specifications mean with real-life examples before grabbing the cheapest 27 inch screen off Newegg.

  12. David Dec 8, 3:44 pm

    I’m a UI/UX designer too. I’m searching for a great monitor to work in dual screen with my mabookpro, and I don’t know if we really need more than a Full HD screen (1920×1080) when we made web and app design. What do you think ?

    • Dave Bowra Dec 9, 4:12 am

      Hi David. There are tasks where you may want to see the full HD size without having to scroll to see it within a program window, particularly when you want to zoom in and still see the full size. Recently coding an image map and it would have been so much easier in 4k. Cannot say it is a necessity, but it is definately on my wishlist. I have a 3 x 24″ monitor setup. With 4k dropping in price hope to upgrade one monitor soon. Drawback is will probably have to upgrade video card to drive it.


Leave a Reply

* Minimum length: 20 characters

Download Web Design Freebies & Resources


Please Confirm Your Email!