Skip to main content
55 votes
Accepted

How do I make this color combination more readable?

Change the client's mind. There is nothing that can fix the fact that red text on a blue background is an extremely poor choice for legibility because the contrast is too low, and because specifically ...
mayersdesign's user avatar
  • 8,552
36 votes
Accepted

Why would I ever NOT use percentage for sizes?

I, like you and many other people starting to learn CSS, used to think the same thing. However, as I continued to build websites I realized that using percents only leads to uglier websites. There are ...
Zach Saucier's user avatar
  • 13.4k
35 votes
Accepted

Is the graphic designer asking too much of me as a customer?

This completely depends on you and your designer. Most likely your designer is asking for the following things: What you want on your website. This includes what the purpose of the website should be ...
Zach Saucier's user avatar
  • 13.4k
25 votes
Accepted

Is programming a website for mobile first really necessary?

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate ...
PieBie's user avatar
  • 4,376
23 votes

How do I save an SVG that's on a website to my computer?

You can run this code on your javascript console: var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); e.setAttribute('class', '...
Anibal's user avatar
  • 331
23 votes

When designing a website, how do I know how users see the colors?

Short answer: you don't. Longer answer: it's literally impossible to take into account all screen settings and calibrations, circumstances and visual (dis)abilities of viewers. That is why there are ...
Vincent's user avatar
  • 25.3k
19 votes

A good monospace, condensed and open-source typeface?

Another narrow monospace font I've found recently is Iosevka. It's very clean and legible even on (relatively) low resolutions. And it's completely free and opensource. I really love this font and use ...
roman-kashitsyn's user avatar
18 votes

Favicon best practices regarding size and format

What to include? The Minimum <!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) --> <link rel="shortcut icon" href="/favicon.ico"> <!-- Modern browsers (196x196 should ...
Cai's user avatar
  • 40.7k
18 votes
Accepted

What's the name of the web design pattern of showing the shape of content while actual content is loading?

The first thing that occurred to me was that the suggestion of type being shown in your example is certainly referred to as greeking. Searching “greeking used in loading screens” led me to multiple ...
mayersdesign's user avatar
  • 8,552
17 votes

Why would I ever NOT use percentage for sizes?

Percentages are sometimes too flexible. If you define everything in percentages then the site will scale uniformly. But its very unlikely for a user of a 27-42 inch monitor wants you to scale text by ...
joojaa's user avatar
  • 58.1k
16 votes
Accepted

How do designers choose shapes in a design?

Actually there may be a great deal of thought put into such usage, well beyond personal preference or some client directive. Style If you know you want a more friendly, loose "feel" then ...
Scott's user avatar
  • 210k
15 votes

Do SVG images look better scaled down than a high resolution png, jpg or gif?

I have just run a test and the only difference appears to be on mobile browsers. I created a 990 x 900px image of the Twitter icon (that icon seems far too detailed a design for good scaling, so good ...
RichardB's user avatar
  • 413
15 votes

How relevant is retina.js to my web projects?

Not even remotely required It looks like it's primary purpose is to automatically do the work of srcset, an attribute that allows you to specify images for different screen profiles, such as the high-...
Scribblemacher's user avatar
14 votes
Accepted

How to deal with making design decisions

Picasso was touring an elementary school and viewing the artwork the children had on display. He was amazed at how good it all was. He asked the teacher... "What are you teaching these children ...
Scott's user avatar
  • 210k
12 votes

Is it possible to determine how many columns a web design grid has?

There are a few issues here. Not everyone uses a grid system and even if they do there's no guarantee the grids are consistent. Maybe your example uses a four column grid with a wider left column. ...
Cai's user avatar
  • 40.7k
11 votes

Is programming a website for mobile first really necessary?

Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and ...
Django Reinhardt's user avatar
11 votes

Web colors: how to compensate for differences in monitors

You can not compensate. Obsessing about the perfect hue is largely irrelevant for most audiences. All you can really do is make your part and use a monitor that is calibrated or emulating sRGB. ...
joojaa's user avatar
  • 58.1k
11 votes
Accepted

How do I convince my boss that grey font is legible?

Legal departments/requirements are often not logical from a design perspective. Many times I must do something that is aesthetically unfounded, merely because a legal department wants to "be sure" ...
Scott's user avatar
  • 210k
10 votes

Is there any way to save a Web page screenshot with a transparent background?

Just found an easy way via Safari. Right click on element, Inspect Element, then in the Inspector right click on the element node you want to export and pick Capture Screenshot. This to me keeps ...
PEZO's user avatar
  • 201
10 votes
Accepted

How can I ensure consistency in web design?

Can you teach consistency? Yes. That's what the internship is for. Design is not something that requires talent to perform well; with enough practice your intern can become a great designer. Keep ...
Luciano's user avatar
  • 8,045
10 votes
Accepted

Why are these two designs considered outdated and old-fashioned?

Okay.. simply looking at the first design... This is merely my opinion.... First. The logo needs to be reworked. it is the #1 factor lending things to a "dated" or "old-fashioned" ...
Scott's user avatar
  • 210k
9 votes
Accepted

The effectiveness of the hamburger menu in 2016

I think the hambuerger menu is recognizable by the vast majority of users nowadays, when in the right context. In your example, I do not think it is obvious. I usually expect to see the icon for ...
spiral's user avatar
  • 7,435
9 votes
Accepted

Why does material design recommend a 2dp border radius for buttons?

The answer to your question lies in the psychological concept called Contour Bias as illustrated in the book Universal Principles of Design. As the book quotes: Objects with pointed features ...
ikartik90's user avatar
  • 359
8 votes
Accepted

Do SVG images look better scaled down than a high resolution png, jpg or gif?

(Note: please read the OP's own answer before this one, since my answer is a comment on the OP's investigation) This is a known issue of Android Chrome. On some of their builds they disabled anti ...
cockypup's user avatar
  • 8,156
8 votes

Inkscape - When saving as SVG and uploading to web, nothing shows

Without seeing the SVG, it's hard to say, but here are some possibilities: Did you drew outside the drawing area? Open the file and press Ctrl+Shift+D. There's an option to re-size based on the ...
Scribblemacher's user avatar
8 votes
Accepted

Steps to becoming a Web Designer without writing code?

There are two very important factors I see.... To be good at design, one must understand production. I think that even if you can't "code" you need to know what is and is not possible and ...
Scott's user avatar
  • 210k
8 votes

How do I make this color combination more readable?

You can't. Those shades of red and blue are both dark, saturated colors, they practically vibrate against each other, and that text will make people's eyes bleed. Any developer or designer who doesn't ...
user8356's user avatar
  • 1,074
8 votes

How do I make this color combination more readable?

Though by no means perfect (or even good), adding a white (or other) outline to the text can help with readability: This might be useful if your client insists on keeping the colours.
Gremlin's user avatar
  • 181
7 votes
Accepted

CSS snap point design guidelines

The primary balance you have to be especially careful of when using a technique like scroll points is a balance of control. You don't want to unnecessarily take away or curb a user's control if you ...
Zach Saucier's user avatar
  • 13.4k
7 votes

Breaking long blocks of text with images — a rule or a myth?

Its not a rule. Nor is it a myth. What you are looking to read up on is the reading habits of people in general, typography, and usability. For a starting point I suggest reading the "Most Popular" ...
Bagseye's user avatar
  • 1,031

Only top scored, non community-wiki answers of a minimum length are eligible