How to Mock-Up a Website in Photoshop

This week I thought I’d share a video that I had created not too long ago:

This video is a two-minute tutorial on how you can create a visual mock-up for a website using only Adobe Photoshop. When working with a client, it’s important to have visual mock-ups of your design ideas that you can share with them. I personally believe that creating designs in Photoshop is very beneficial: 1) you are able to create designs very quickly, as you can see in this tutorial; 2) your mock-up will look clean and professional; 3) it’s very easy to go back and alter elements and present the changes to your client again, assuming you use your Photoshop layers properly.

Note: This video assumes that you are already familiar with how to use Adobe Photoshop. If you do not know how to use Photoshop, I recommend that you look up some other tutorials before watching this one.

I hope you enjoy the video!

Color Theory and Web Design

There’s a LOT to be said about color theory; its a huge, broad topic that encompasses many ideas, such as color schemes, color systems, the color wheel, perception, cultural meaning, etc. Some of those topics I’ll be saving for another time, but today I’ll be discussing perception and cultural meaning (particularly in Western cultures).

Color can be defined by three attributes: hue (the base color, like red, yellow, green, etc.), saturation (range between pure color at 100% and gray at 0%), and brightness (range between fully illuminated at 100% and dark or black at 0%). In order to create an effective design, you should strive to find a good balance between colors that are complementary (don’t confuse this with complementary colors) and contrasting keeping these three attributes in mind.

Its important to have a suitable amount of contrast between the color your website’s background and text. This reduces eyestrain for the user, making it easy to read all of your website’s content. You can achieve the best levels of contrast between two colors that exist on opposite ends of the spectrum—colors that are opposite on the color wheel and have different saturation and value levels. If your colors lack contrast the user will have to strain to read the text because the colors will be too similar in hue, saturation, and brightness, causing the colors to blend together visually. The two most contrasting colors are black and white, and you’ll find that your best options are to have black or dark text color on a white or very light background.

 

 

contrast

There are some other guidelines that you should follow when creating your design. One general rule of thumb is to avoid extremely “bright” colors—colors that have high saturation and high brightness—for large sections of your website, particularly as a background color. Even against a duller, contrasting text, bright colors like a fluorescent yellow can be overwhelming and still cause eyestrain. Another tip is to reserve some colors for areas of your website that you want to emphasize. Contrasting colors can help draw attention to certain areas on your page; a red warning note on a white page with black text will certainly stand out. However, the most important tip is to keep your color schemes simple. The content is the most important part of your website, so its extremely important that you consider legibility in your design.

Keeping all of that in mind, now it’s time to create a color scheme appropriate for your website’s content. So what colors would that include?

internet-logo-colors

Source: StockLogos

When you’re picking a color scheme for your website, you’re aiming to pick colors that will encourage your target audience to do a desired action: reading your content, sharing your information, buying your product, hiring your services, etc. Many sources indicate that a poor color scheme can cause a user to hit the back button as soon as they reach your website, so having a design that is pleasing to the eye is key and is meaningful to your content.

Different colors evoke different feelings within us, and you’ll find that each major color often has quite a few meanings and feelings already attached to them. Blue-based color schemes tend to have a sense of professionalism or make the user feel calm. White-based schemes give websites the appearance of cleanliness. Warm colors like red and orange suggest fun and excitement. Green websites can make the company be seen as environmentally conscious. Black and white designs seem sleek and modern. Bright colors invoke an emotional response, while darker colors can cause the user to relax so they can focus their attention on important content.

Here’s a quick, comprehensive list of typical color meanings (list provided by Smashing Magazine):

  • Red: Passion, Love, Anger
  • Orange: Energy, Happiness, Vitality
  • Yellow: Happiness, Hope, Deceit
  • Green: New Beginnings, Abundance, Nature
  • Blue: Calm, Responsible, Sadness
  • Purple: Creativity, Royalty, Wealth
  • Black: Mystery, Elegance, Evil
  • Gray: Moody, Conservative, Formality
  • White: Purity, Cleanliness, Virtue
  • Brown: Nature, Wholesomeness, Dependability
  • Tan or Beige: Conservative, Piety, Dull
  • Cream or Ivory: Calm, Elegant, Purity

The biggest thing to keep in mind when picking colors for your website is your audience; for example, the same color can have very different meanings in different cultures. Blue in Western cultures can invoke feelings of trust and authority, but Latin America it is a color with religious connotations. In Western cultures, white often represents purity and peace, while in Eastern and Asian cultures white is most often associated with death and mourning. If you’re advertising medical services and your design uses a lot of red, you probably want to rethink your color scheme if you’re audience resides in the Middle East where red can evoke feelings of danger and caution, or may even be seen as evil.

Not only should you keep in mind different cultures, but you should consider the age and gender of your audience as well. Younger audiences tend to enjoy bright, solid, graphic colors while an older audience prefers a more subdued color scheme. Men tend to like cooler colors (greens and blues) while women tend to like warmer colors (reds and oranges). And don’t forget about accessibility issues, like color blindness! In the end what color scheme you pick must be appropriate not only for your content, but for your audience as well.

If you need some help getting started on choosing your color scheme, Creative Bloq has a great article on 28 Tools for Choosing a Color Scheme.

Sources: [ An Introduction to Color Theory for Web Designers ], [ Color Theory for Designers, Part 1: The Meaning of Color ], [ Color and Cultural Design Considerations ]

Vector vs. Raster Images

One of the most important things to keep in mind when designing a website is image optimization; you need to use the right type of image for the right application. Digital images come in two different file types: vector and raster (also commonly known as bitmap). Vector images are made up of mathematically defined geometric shapes containing points (or “nodes”) that are connected by lines/curves by the computer, filling in the missing information. Raster images, on the other hand, are made up of thousands and thousands of tiny squares or dots that are assigned a specific color value. If you’re able to utilize these two types successfully, you could potentially save yourself a lot of time and money in the future. 

So how do you know which graphic type to use? Below I’ve compiled a quick list of pros and cons of each type, followed by a succinct conclusion.

Vector Graphic Images

Pros:

  • Scalability: Because vector images are created mathematically the equation can be recalculated with no loss in data, allowing you to scale the image up or down without reduction in resolution.
  • Conversion: You can very easily convert a vector image to a raster image, but not the other way around.
  • File Sizes: Vector image sizes tend to be much smaller than raster images.
  • Colors: It’s very easy to change colors with vectors without any damage to the image, making it very simple to edit.

Cons:

  • Limited Details/Effects: Vector images will never be as detail-rich as raster images, which means neat textures and effects that you can apply to raster images would be very hard to recreate in a vector image.
  • Compatibility: Most vector file types are not universal, tending to be restricted to the program the file was created in (for example: image.ai; “.ai” is a file type only available in Adobe Illustrator).

Common vector files: SVG, AI, EPS, PDF

Raster (Bitmap) Graphic Images

Pros:

  • Rich Details: Since raster images are made up of pixels you can create lots of rich details in the image, much more than you could ever achieve with vector images, which makes raster images ideal for photographs.
  • Effects/Textures: As a part of being capable of handling rich details, it’s much easier to add filters, effects, and textures to a raster images.
  • Precise Editing: You can do very precise editing one dot at a time when you want to.

Cons:

  • File Sizes: Depending on resolution and file dimensions, raster images tend to output at a larger file size than vector images.
  • Lack of Scalability: Unlike vector images, raster images do not scale up (and in some cases, down) very well. Raster images are resolution dependent, and when enlarged the image becomes blurry and loses a lot of details (as known as “pixellated”).

Common vector files: JPG/JPEG, GIF, PNG

Conclusion: Vector images are best for images that will regularly be scaled up and down, such as text and logos, while raster images are best for detail-rich images such as photographs or for digital publishing. A good way to look at this is to think of vector images as “source” files, and raster images as “output” files; for example, you could create a logo originally as a vector image and then output it as an appropriately-scaled raster image that can function for your website, merchandise, etc.

Sources: [ Vector vs. Raster ], [ How to Explain Raster vs. Vector to Your Clients ], [ Vector, Raster, JPG, EPS, PNG – What’s the Difference? ]

Effectively Using Icons

Icons can make or break a website’s design; used correctly they can enhance aesthetic and provide better user experience, but used incorrectly they can confuse the user and have them hitting the back button without even exploring your website first.

One of the biggest benefits from utilizing icons is that they can make your website visually appealing; in particular, icons can be a great way to promote branding. A unique, consistent style can give your website personality and communicate a certain experience to the user. Depending on how you’ve designed your icons, your website can be viewed as sleek and professional, educational, artistic and creative, and so on. In order to convey such a message to the user, it is probably best to create your own set of icons rather than using a stock set from the Internet.

Icons can also be a great way to enhance navigation, and for mobile design where space is limited, they can be an especially feasible option to communicate information. Coupled with text they can help to visually break up content for easier readability, accenting information and offsetting headings and sections. Walls of text that may seem daunting to a reader can easily be organized and complemented by pictorial icons, making information easier to absorb when broken into smaller, clearly defined chunks.

However, there are some things to keep in mind when designing and using icons; the most important goal of your website should be to communicate a specific message, and your icons are no exception. For that reason, make sure to use icons for more than just visual appeal. Using too many icons (particularly for no discernible purpose) can turn an effective tool into mere decoration that the user will ignore. Many articles cite Facebook as being a particular offender in this regard in its navigation menus, for example. Therefore, use icons sparingly to increase effectiveness.

Additionally, make sure the meaning of your icons is easily understood, especially if you’re using icons without any accompanying text. Creating icons that are universally understood across all cultures and peoples can be quite a challenge, but it is important to try anyways. The best solution to this problem is to use only icons that already have a long history of standardization. Do not ignore conventions, and do not try to create icons to represent abstract ideas or complex processes. You may further improve usability by labeling your icons using the HTML “title” attribute to create a tooltip, add an “alt” tag, or simply have a text label present right next to the pictorial icon.

In short, make sure icons are uniquely appealing, readable, universally understood, consistent in design, and functional.

Sources: [ Icons in Web Design ], [ Use and Abuse of Icons in the Modern Age ], [ 10 Golden Rules for Digital Icons ]