Where the design community meets.
Software/web development at various/consultant Joined about 6 years ago
Chris hasn't posted any stories yet.
I think it depends a lot on the project, but usually I try to find a relevant starting point, maybe even just a single colour, and then build on that foundation with tints, shades, adding complementary or analogous accent colours, and so on.
For a creative/promotional/marketing kind of web site, there are often prominent images, and those can suggest a colour palette. Advertising a get-away-from-it-all-break to a tropical island? You’ve got sky blue, sea green, tree green, sandy yellow, and so on. Sample a few representative colours from the photos and you’ve probably got a good starting point.
For more business/professional sites, if the brand has a logo that already incorporates colour, again following its lead is often a good beginning. Even if it only uses one colour, chances are that colour or some variation of it can be used as your first accent colour, or part of the background, or even the main colour for body text. If there are multiple colours in a client’s logo, it would take a solid argument for me not to follow the existing colour scheme in other contexts.
If there are no relevant images or existing branding guidelines to suggest any colours you can start with, you need to be more creative. You can start with what your client does or makes, but personally I prefer to concentrate on the kind of impression they want to make rather than the market or industry they’re in.
For example, suppose it’s a technology firm. For the trustworthy, businesslike look of a professional consultancy, it’s hard to go wrong with a cool and darkish palette, probably built around blues and perhaps with elements of green or purple. For a firm that makes custom keyboards and controllers for serious gamers? Almost anything but that kind of businesslike look, but probably something dark and edgy, maybe black with silver accents, plus a bright accent colour like a red, purple, or electric blue/turquoise. If the firm makes heat recovery and ventilation systems? That might suggest hot and cold, so maybe a palette with some red/orange/yellow colours plus some light blue/cloudy grey, probably in those combinations, and probably with specific colours that lend themselves to warm and cold gradients or being set as contrasting/complementary pairings in the visuals.
That’s all thinking about promotional/brochure kinds of material. For some contexts, such as colours for data visualisations or user interfaces, more practical concerns tend to dominate. Good maps are often a source of inspiration for me if I need one of these practical schemes, as they tend to emphasize things like a range of colours that are clearly distinct but not clashing, or twin-hued palettes with a lot of tints and shades to show data that varies on a scale with some significant threshold. I’d probably still start by looking for one or two relevant colours to anchor the scheme, though, say a sea blue vs. a grassy green or mountain red/brown for a map visualisation showing height above or below a waterline or similar threshold. But beyond that, for these practical cases, I tend to be a lot more systematic about generating further colours to fill out the palette, for example interpolating between two colours in some perception-based colour space and choosing as many other colours as I need spaced around evenly along the line.
Interesting journal about the development process, too. It’s always interesting to see case studies of thoughtfully designed, original visualisations in UIs, like this one:
Thanks for sharing. :-)
Thanks for linking to your site. I think I see why our experiences might differ now.
I do a fair bit of work with user interfaces, mostly web-based lately, so I wouldn’t necessarily assume any convenient ratios between icon sizes — of course there are similarities, but each job has its own requirements. Sometimes I’d go down as small as maybe 20x20 or 16x16 pixels, perhaps for use on diagrams or charts, or maybe as an annotation that needs to fit with body text sizes.
To borrow an example from your post, at such a small size it would be difficult to maintain the clarity you have at the sizes you show there. Directly scaling down to 16x16 would keep the current proportions and the stylised “S” shape would become just an antialiased smudge/dot in the middle. So in this case, it might make sense to use a modified design preserving that distinctive shape as the main part of the icon, probably at the expense of the circular frame and coloured background. I’d also experiment with whether to keep the subtle gaps in the letterform.
I do appreciate that this icon looks like it’s used for branding rather than UI, so the kind of scenario I’m thinking of might not apply in this particular case and adapting the design might have concerns of its own, but please try to imagine similar issues as they might apply to, say, icons indicating that a certain behaviour is active or a certain warning condition exists in a UI, where preserving the meaning and the clarity of the basic symbol is paramount.
I freely admit that icon fonts have their place as well, although I’m not as keen on using them as you are.
Sorry, I’ve apparently given a misleading impression. I don’t much like icon fonts and rarely use them at all, because of the accessibility issues and the monochrome limitation. I think in principle SVG should be a much more appropriate tool for this kind of job, I’m just acknowledging that in practice scaling down to very small sizes has its limitations in SVG because of the lack of hinting and because of performance concerns if you use a lot of SVG images at once in some browsers.
If you draw your SVGs at the size they’ll appear, that’s not an issue.
If you draw bitmap graphics at the size they’ll appear it’s not an issue either, but isn’t the major advantage of vector graphics in this context supposed to be that you only have to draw them once and they scale?
I have never needed or wanted that requirement.
Genuine question: Do you do a lot of work with icons? It’s not often that I could see using the same style at say 96x96px for a high-dpi display and 32x32px or even 16x16px on a low-dpi display. Like working with optical fonts designed for use with captions or large displayed text, you can use finer, more subtle details with larger pixel counts, but with smaller sizes I find a simpler design without a lot of detail or stylised effects often works better.
Worth noting that you can do that with SVG as well.
Not really, unfortunately. Those techniques are far from portable: having just tested before writing this, only some work with current Chrome, and none with current Firefox. Even if it worked everywhere, the same SVG with all possible variations is used with that sort of media query technique, which would be an issue if we want to use greater numbers of detailed images without wasting bandwidth.
I’m afraid so. Rendering glitches are widespread, even with the most simple things like putting an arrowhead on a line. There are clearly some rounding issues in how different shapes are positioned/joined in some browsers. Also, the performance of SVG leaves much to be desired in some browsers, most often Chrome and Firefox in my experience. A single image might work fine, but try working with many small images and doing things like animation or hooking up lots of events to make something interactive, and the cracks show all too easily. To give credit where it’s due, the browsers do seem to be getting a little better with time, but we’re a long way short of the ubiquitous, reliable support that something like PNG enjoys across all major browsers today.
Presumably that’s just astute observation on the part of the author! Brands increasingly seem not to be using distinctive designs today, instead resorting to flat, bland, usually brightly coloured, 72px font-weight:-500 sans fonted junk. With icon fonts. And animations. Lots and lots of animations. So I reckon the author here was just capturing the prevailing trends more accurately than most. ;-)
SVGs scale, so you often don't need more images for more sizes.
Pure vector graphic scaling is a significant limitation when you’re working with icons, though.
At a minimum, for small icons you tend to need hinting to avoid nasty artifacts, for exactly the same reasons that on-screen fonts do. Font formats support this; SVG does not.
More generally, a well-designed set of icons might have more detail at larger sizes and reduce to completely different, simpler designs at smaller sizes where the extra detail won’t help (or actively hinders).
What I’d really like to see is a way of supplying vector graphics for web use that is flexible enough to represent multiple designs but only use the bandwidth for the necessary ones (also relevant to high-dpi vs low-dpi versions and the like), that supports hinting in a similar fashion to screen font formats, and that renders with acceptable speed and quality in browsers (which are almost universally awful at doing anything with SVG today).
Until we have something on that kind of level, for both quality and accessibility reasons, I suspect bitmap graphics selected via media queries or the equivalent will remain the optimal solution for many use cases, and icon fonts will remain the preferred alternative for those willing and able to accept their limitations.
Nice concept. I think the progressive feel of the whole process and the adaptation to small screens/windows are particularly good in this one.
I can also imagine a development of this idea where you prompt for the user’s physical address on the sign-up form as well. Then you could use geolocation with an optional override of the user’s country to show pricing in the local currency and a localised range of payment options, too.
Presumably they’re also leveraging synergies between design and technology so that anyone adopting Material Design can go to market with a positive brand identity thanks to creating a best in class user experience and...
Aw, stuff it. I don’t think I’ve heard that much vacuous claptrap since we used to play Executive Doublespeak Bingo during the mandatory all-hands quarterly results calls.
I’d like to agree with you in spirit, but I can’t do so in practice. Yes, finding someone with the right culture fit is a high priority when recruiting, usually more so than any particular technical knowledge or skill. But FizzBuzz is so basic that hiring someone for a programming-related role who couldn’t do it just seems like asking for trouble.
It would take something remarkable for me to hire a designer who had never heard of a colour wheel. It’s not likely that I would hire a front-end dev who didn’t know how to mark up a link in HTML, either. And for exactly the same reasons, I would readily reject a candidate for a programming role — even at a junior level — if they couldn’t demonstrate the most elementary grasp of programming skills. On a scale of easy to hard, FizzBuzz is well below easy; technically, you don’t even need a modulo operator to solve it, as a chapter-one-level understanding of loops would allow a correct, if somewhat inelegant, solution.
But more than all of that, if someone got as far as applying for a programming-related position and claiming a knowledge of a certain programming language, yet they couldn’t write FizzBuzz in that language, I would find it difficult to take any other skills or experience they advertised seriously either. That alone would be enough to send the application to the circular file under any normal circumstances.
I’m all for using more realistic examples in interviews. However, as the job ad specifically asked for experience using modern JS libraries, it seems like they’re looking for more than just basic DOM manipulation in jQuery here.
For an in-person, real-time interview for a designer/developer who needs to prototype a UI, I’d be tempted to set a challenge along the lines of:
Write a [component|template|widget] using [your|our] usual choice of libraries/framework to show a [table|pie chart|sparkline] of data from [this literal array|this JSON API|this data in localStorage]. You have [your|our] usual choice of development tools and all the usual on-line references available to use as you wish. Let’s see how far you can get in [some reasonable amount of time].
If you do ask them to use your preference of tools and libraries rather than theirs, you’ll soon see how fast they can translate their existing skill set and pick up any new tools or concepts they’ll need for the real job. Either way, you’ll soon work out whether they have the right general idea about how to design and implement code for a typical UI requirement and how quickly and carefully they work. And it’s an open-ended problem, so if you have a nervous candidate who freezes under interview pressure, you can offer hints to keep them going without unreasonably interfering with the general nature of the test.
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.