Design & UX
John Stevens, Aug 30

UX Lessons from Amazon: 4 Hacks Guaranteed to Boost Conversions

John Stevens talks about how Amazon is breaking records when it comes to conversions, and what you can do about your own UX to mirror their success.
Design & UX
Nadya Khoja, Aug 24

15 Color Schemes From Disney Heroes and Villains

Nadya extracts 15 color schemes from well-known Disney heroes and villains and beautifully illustrates how they affect the way we view these characters.
Design & UX
Gabrielle Gosha, Aug 22

7 Astonishing Artists and Designers to Follow on Behance

Our #1 design writer, Gabrielle, talks about the most astonishing artists and designers to follow on Behance when you need an inspiring creativity boost.
Design & UX
Alex Walker, Aug 17

5 Fast Tools For Generating Polished Product Mockups

Product mockups are used to showcase web/app designs in a device frame, but can we accomplish this without Photoshop? Yes, and today, Alex shows us how!
Design & UX
Daniel Schwarz, Aug 15

Incredible Design Tools & Resources, August 2017

Daniel and Alex list the best design tools and resources featured on Product Hunt in August 2017. You really don't want to miss out on these!
Design & UX
Suzanne Scacca, Aug 10

How to Master Nostalgia Marketing in Web Design

Suzanne explains the user psychology behind nostalgia and how we can utilize nostalgia marketing in web design for higher conversions.
Design & UX
Mukund Krishna, Aug 08

Can AI Solve Your UX Design Problems?

It's easy to think of AI as the stuff of abstract computer science, but, increasingly, we're beginning to seeing Artificial Intelligence in UX design.
Design & UX
Darin Dimitroff, Aug 03

UI vs UX: What is the Difference?

Try a quick search on the difference between UI vs UX yields ketchup bottles and grass lanes.
Design & UX
Marc Schenker, Aug 01

A Designer's Guide to Fast Websites and Perceived Performance

Perceived Performance is just as important as actual Page Speed. Marc Schenker explains why, and what this means for user interface designers.
Design & UX
Daniel Schwarz, Jul 26

How to Pick Stock Photos that Captivate Users

Daniel Schwarz looks at the factors you need to consider when choosing stock photography that increases conversions.
13 COMMENTs
Design & UX
James George, Jul 26

7 Super-Useful Chrome Extensions for Designers in 2017

James George lets us in on his 7 most-favorite Chrome extensions for designers, including a new design app called Gravit that works solely in the browser!
Design & UX
Gabrielle Gosha, Jul 24

4 Photoshop Styles to Lift Your Photos Above the Crowd

Duotones, Muted Black & White, Targeted Blur Effect, and more. Gabrielle has four fresh Photoshop styles to spice up to your repetoire.
Design & UX
Alec McGuffey, Jul 21

What Type of Design Education is Best For You?

Alec McGuffey looks at four types of design education, and helps you figure out which one is the best fit for you.
Design & UX
Nadya Khoja, Jul 18

7 Famous Design Hacks You Can Steal From Star Wars

For all its sci-fi modernism, Star Wars used a lot of classic methods. Nadya has extracted 7 sure-fire design hacks that you can apply to your projects.
2 COMMENTs
Design & UX
Daniel Schwarz, Jul 13

Punctuation & Grammar: Bridging the Gap Between UX and Copywriting

Daniel Schwarz discusses UX writing, why it's important for designers to be excellent writers, and how punctuation can make copy look and sound appealing.
Design & UX
Alex Walker, Jul 12

SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes

This is a section from a 500 year old woodcut from perhaps the 'Andy Warhol of woodcut artists' - Albrecht Dürer. Woodcut is an old printing technique where the image is hand engraved into a wooden block by specialist blockcutters. Prints are then taken from the block.

[caption id="attachment_157164" align="alignright" width="187"]Dürer Dürer (Surprisingly, not the
guy from Nickleback.)[/caption]

Woodcuts are always bold and stark in nature because – unlike most painting techniques – there are no mid-tone colors or blends. The paper is either clean white or drenched ink black – there are no gray areas.

However as you can see, Dürer is able to mimic mid-tone grays by building up a fine rendering of linework. In his case, he uses parallel fill lines, but it's possible to get the same effect with cross-hatching, waves, ribbons, arcs, dots and other patterns.

Although it's a very old technique, we still see it everywhere today – from tattoos to beer labels to bank notes. Most of us have admired the beautiful, wavy ribbon linework used on paper money, sometimes called 'guilloché'.

Halftone examples

It also turns out to be perfectly suited to the mathematical precision of SVG – though hand rendering thousands of precision lines by hand may be impractical for many of us. There are professional options available if you're super-serious – Excentro is cool.

But if that's overkill, let's look at a simpler, more affordable solution.

How do I make a Halftone?

HalftonePro is an online service that converts photos into 'halftones' - what the printing industry calls these graphics.

Using this app is relatively simple but the results take some tuning.

  1. IMAGE: Upload your photo. If this is your first time, jump to the 'Preset' menu at the bottom, as it will give you a feel for the app faster.

  2. SHAPE: The 'Shape' menu lets you change the shape that makes up the image – circles, squares, lines, etc.

  3. PATTERN: The 'Pattern' menu is where things get complex. You can choose the grid that your shape adhere to. While I'm not going to bore you by explaining all the sliders here, the 'Vertical elements' slider is probably the most important. This sets the level of detail in your conversion. A setting of 25 is chunky – a setting of 150 is finely detailed. TIP: Don't set Vertical elements higher than about 150 as you'll be creating a HUGE SVG file and may even crash your browser.

  4. COLORS: Pick your palette.

  5. RESIZE: You can guess.

  6. PRESETS: The dozen or so presets provided give you a good sense of what this app can do. You can also save your own custom presets here.

Bowie - Before changes

High contrast images are likely to work best. I uploaded this classic black and white Bowie shot as a test and used the default 'Wave' preset with a 'Vertical elements' setting of 150.

5 COMMENTs
HTML & CSS
Giannis Konstantinidis, Jul 11

6 Free Material Design CSS Frameworks for 2017 Compared

Giannis Konstantinidis lists some great Material Design CSS frameworks and compares them to make it easier for you to choose what best fits your needs.
1 COMMENT
Design & UX
Tobi Abdulgafar, Jul 10

Here are the 5 Things Great Designers Do Differently

Web and interface designers are becoming a dime a dozen, Tobi explains what great designers do to stand out from the crowd.
Design & UX
Alex Walker, Jul 06

6 Clever SVG Pattern Generators for Your Next Design

Though SVG Patterns aren't super widely understood, they offer a lot of really interesting design options – once you get your head around them.
Design & UX
Ivaylo Gerchev, Jul 04

How to Optimize and Export SVGs in Adobe Illustrator

SVG is a powerful format but you need to make good decisions to get great results. Ivalyo walks you through exporting SVG in Adobe Illustrator.
1 COMMENT
Design & UX
Ivaylo Gerchev, Jul 04

SVG 101: What is SVG? (and what is it actually good for?)

Most of us have heard of it, but what is SVG and precisely makes it different from pixel graphics? And is there any reason you should care?
49 COMMENTs
JavaScript
Craig Buckler, Jul 03

Should Users be Permitted to Disable JavaScript?

Craig Buckler takes a renewed look at why, in 2017, some users might disable JavaScript and asks if progressive enhancement is still worth the effort.
1 COMMENT
Design & UX
Alex Walker, Jun 29

Podcast: Google Ventures on When Design Sprints Go Bad

Lots of companies talk about 'design sprints', but are we all talking about the same thing? Jake Knapp – the man who documented it – has some ideas on that.
14 COMMENTs
Design & UX
Daniel Schwarz, Jun 28

Fonts and Colors Used by Facebook, Twitter, Google+ and More

A cheatsheet of the fonts and colors used by Facebook, Twitter, Google+, Messenger, Snapchat, Instagram and Pinterest, with links to brand asset info.