How to Create Retro Square Push Buttons in Photoshop

How to Create Retro Square Push Buttons in Photoshop

In this Photoshop tutorial, we’re going to create a simple set of square push buttons that can be useful in your user interface (UI) designs. The aesthetic of these buttons is inspired by Braun industrial products made during the 60′s, which were designed by the legendary designer, Dieter Rams.

Continue Reading

How to Make a Beautiful Landing Page with Photoshop

How to Make a Beautiful Landing Page with Photoshop

In this web design tutorial we will be creating a captivating landing page with Adobe Photoshop. There is nothing complicated with this design. This landing page layout can be used for many types of websites, so feel free to modify the text, navigation menu, imagery, icons, and so forth to match your own particular needs. Some example use cases of this landing page design: a downloadable product (such as an e-book), a design agency landing page, a web app landing page, or a mobile app landing page.

Continue Reading

How to Make a Knob/Dial UI with Photoshop

How to Make a Knob/Dial UI with Photoshop

Using a knob (or dial) user interface is currently prevalent in mobile device and touchscreen app interfaces. You’re probably wondering how to make one. In this Photoshop tutorial, I’ll show you a quick and easy way to make a knob/dial user interface that you can build on and modify to suit your needs.

Continue Reading

Responsive Web Design for The Enterprise

Responsive Web Design for The Enterprise

Unless you’ve been chained to a cubicle wall or have been perpetually stuck in endless meetings the last year, you’ve probably read about the explosion in Internet-enabled mobile devices. You might have even seen some statistics, like how 85% of people expect the experience on their device/smartphone to be at least as good as, or better than, the experience on their desktop/laptop computer.

Continue Reading

Create a Slider UI Design with Photoshop

Create a Slider UI Design with Photoshop

In this tutorial, I’ll show you how to create a simple slider user interface (UI) using Photoshop. We’ll use basic (but powerful) Photoshop features — shapes and layer styles — to achieve our goal.

Continue Reading

Usability Mistakes to Avoid When Using Photos in Your Website

Usability Mistakes to Avoid When Using Photos in Your Website

When used properly, photos are effective, information-dense content that can quickly send your intended message to your audience. However, using the wrong photos can degrade your users’ experience on your site. In this article, I’ll go over 8 potential issues your photos can have that will lead to poor website usability.

Continue Reading

Why Prototyping is Essential to Your Design Process

Why Prototyping is Essential to Your Design Process

Whether it’s just a quick sketch in your notebook or a post-it note, a wireframe made using your favorite graphics software, or a high-fidelity mockup created by a web app — incorporating some form of prototyping within your workflow is a critical step. I’d like to share some reasons why I believe prototyping is an integral part of the design process.

Continue Reading

Typography: Common Myths and Mistakes

Typography: Common Myths and Mistakes

As graphic or web designers we work with typography all the time, and even if we don’t all call ourselves typographers, setting type in one form or another is unavoidable. It’s a very large part of our job. And for hundreds of years it was our job alone (well, technically it was the type setter’s job, but bear with me here). Then desktop publishing came along and everything changed.

Continue Reading

Create a Dark Portfolio Web Design in Photoshop

Create a Dark Portfolio Web Design in Photoshop

In this web design tutorial, I will show you how to create a dark web layout in Photoshop. We will try to keep gradients to a minimum and rely more on creating textures and patterns for the different areas of our web layout to give it a pleasant look and feel. Because the background of this web layout is dark, we can use light colors for important areas (such as the services, portfolio and testimonial areas) to make them stand out.

Continue Reading

Create a Light Textured Web Design in Photoshop

Create a Light Textured Web Design in Photoshop

In this web design tutorial, we’ll be creating a light textured web page layout. I will show you how apply subtle textures in web layouts, how to create a seamless diagonal mosaic pattern and how to create a tabbed content area design for the “Services” section.

Continue Reading

Create a Modern Lab Theme Web Design in Photoshop

Create a Modern Lab Theme Web Design in Photoshop

In this web design tutorial I will show you how to create a web layout with a sleek and modern look using Adobe Photoshop. We will go from finding sources of inspiration to setting up the document in Photoshop and creating design elements that fit with the theme of the web layout. I will also give you some practical examples of how using smart objects in a web design project can improve your workflow and save you some time.

Continue Reading

Design a Slick Modern Pricing Table UI in Photoshop

Design a Slick Modern Pricing Table UI in Photoshop

In this quick web design/user interface tutorial, I’m going to show you how to design a modern pricing table using Photoshop. Pricing tables can be frequently seen in subscription-based web apps (SaaS). We’ll be using various tools like the Horizontal Type Tool and Rounded Rectangle Tool to get the job done. I’ll show you how to create popular effects associated with current web design trends such as a modern web button.

Continue Reading