Design & UX
Vincent Feeney, Sep 27

How to Design Highly Memorable Experiences, and Why

Vincent Feeney examines elements of human psychology and how they can inform the way we design user experiences.
Design & UX
Dave Kearney, Sep 26

15 Top Prototyping Tools Go Head-to-Head

Dave Kearney compares the top 15 prototyping tools disrupting the design tool market today, with video overviews of each one.
Design & UX
Daniel Schwarz, Sep 21

How to Publish Responsive Websites with Sketch and Launchpad

Daniel Schwarz shows us how to design and publish static HTML/CSS websites using Sketch and two Sketch Plugins (Auto Layout and Launchpad).
Design & UX
Pius Boachie, Sep 19

3 Overlooked Tweaks to Optimize Website Usability

Boachie Pius talks about analysis paralysis and three of the most overlooked website usability optimizations, and shows us how to fix them.
Design & UX
Giannis Konstantinidis, Sep 13

Introducing Microsoft's Fluent Design System

Giannis introduces us to Microsoft's new design language — Fluent Design System — and explains how to implement its design concepts into Windows UWP apps.
Nicole Saidy, Sep 07

Putting the "App" in Progressive Web Apps

Nicole Saidy offers an overview of Progressive Web Apps (PWAs), what they are, which problems they solve, and what makes them apps or app-like.
Design & UX
Aja Frost, Sep 05

10 Unexpected Sources of Design Inspiration

Aja Frost lists the bold and beautiful sources of design inspiration that you probably don't know about. You'll definitely want to bookmark these secrets!
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.
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.
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.

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.