7 Photoshop Web Design Projects | Master Web Design by Doing (Udemy.com)

Master Photoshop, web design & profitable freelancing by a pro. This course aims to teach you how to create web designs that provide a great user experience by doing projects (and not watching me design them).

Learn how to create great web designs in Photoshop AND create a great user experience through doing actual web design projects. Learn web design by doing!

What you'll learn in this excellent web design course for Photoshop users...

• You'll learn add-on services you can up-sell your UX web design clients.

• You'll learn how to retouch images like a pro.

• You'll learn how to stand-out among 10's of thousands of other UX web designers.

• You'll learn how to remove subjects from a background (non-destructively... just like the pros)

• You'll learn how to transform an ordinary image into a piece of artwork in Photoshop.

• You'll learn how to use gradients, in Photoshop, for creative backgrounds.

• You'll learn how to use Smart Objects, in Photoshop, for keeping your work intact.

• You'll learn the importance of keeping your layers organized.

• You'll learn tips on font selections in Photoshop.

• You'll learn the dos and don'ts of typography.

• You'll learn why prioritizing typography with styles is essential for making it easier to read the content.

• You'll learn how to create UX web designs that provide a great user experience.

• You'll learn how to help your clients grow their business by knowing what it takes to design a great user experience.

• You'll learn how creating great UX web designs that help your clients grow will help you grow your UX design business (and likely will end up with more work than you can handle)

• Beginners of Photoshop will get a crash course to get you up and running fast.

• Advanced users of Photoshop can dive right into the UX web design projects.

• You'll learn the 7 most popular types of UX web design styles.

• You'll learn what type of UX design styles to avoid (and why)

• You'll learn tips on what type of images you should be using in your UX web designs.

• You'll learn where to download commercial-free images that don't require a license or attribution.

• You'll learn the 6 most important sections that are a part of UX websites.

• You'll learn how to use a Grid template to conform your UX web designs to industry standards for both desktop and mobile devices.

• You'll learn how to quickly and easily align multiple layers in Photoshop.

• You'll learn how to evenly distribute the space between layers with one click in Photoshop.

• You'll learn how to create a mega menu UX design and organize it for the developer.

• You'll learn how to UX design hover states so the developer knows how to code your vision.

• By the time you've completed all 7 UX web design projects and the suggested assignments, you'll have mastered my top 10 keyboard shortcuts.... which will make you more productive.

• After completing all 7 UX web design projects and the suggested assignments, you should have 7 web designs for your portfolio.

  
  

Photoshop - UX - Web Design Project 1

Your first UX web design project will consist of creating a unique, creative homepage for Nike. You'll start off with a design brief to see what direction we'll take to make the webpage better. Then, you'll learn about the importance of picking images and how to remove subjects from the background… like a pro.

You'll learn how to create a header, a mega menu, a Call-to-Action (CTA), and much more.

Once you've practiced what you learned, by re-doing my web design, you'll use YOUR creative vision to develop a web design for your portfolio.

Photoshop - UX - Web Design Project 2

This UX web design project will have you transform an old, outdated, real estate website into a professional design style. The new design was created for a better UX (user experience). This will help the client grow their business by including a call-to-action that prospects will not refuse.

• You'll learn about irresistible offers and how to create them through a CTA

• how to create custom hero sections with custom shapes in Photoshop

• how to use layer masks to show/hide different elements

• pro tips for using images of people in Photoshop

• pro tips for deciding on what type of photos to include

• how to use gradients to make your backgrounds more dynamic, in Photoshop

• how to easily update your client's logo for a more up-to-date and modern look

• how to increase the credibility of your clients

• pro tips on how to promote your client through persuasive writing (or outsource)

• pro tips on how to qualify leads through great design

• and much more…

What you'll learn can easily be applied to any type of company and web design. Plus, I'll share with you one of my little secrets on adding credibility and elevating your client's standing in the community. And how to increase the chances more people will do business with your client.

Photoshop - UX - Web Design Project 3

Our next UX web design project consists of updating another old, outdated website and giving it a new, fresher, modern design.

Many new tips and web design tricks are revealed in this project. Learn why I chose a sticky menu for this website, why I chose a hidden menu (via the Hamburger icon), how I created a seamless gradient background (from header to hero to the footer) for a modern flair, more pro tips on images, how to work with a third party application as part of your UX web design, and much more.

Photoshop - UX - Web Design Project 4

In this UX web design project, the learning continues! Starting off with a large Hero image as the backdrop of the UX design. This image alone will elevate this company's existing brand and distinguish it as a leader in its area. As great as the image is, it could be better. We'll make it better by learning how to remove 2 cars from the foreground… you'll learn how to retouch like a pro.

The next part of this web design involves creating a great (UX) user experience by giving visitors exactly what they are looking for. In this case, a place to rent. You'll achieve this by designing a filter in the Hero section that will allow visitors to narrow down their search.