Working with Mock-Ups and Web Graphics

June 1, 2015

Categorized: Design, Webdev 101

As a front end web developer, you may not necessarily have to create mock-ups. By the time you see the design, it may be finalized already. The web designer is usually the one to make and work with mock-ups heavily.

In larger team environments, you might never touch a mock-up aside from slicing it up and turning it into code. However — you will almost certainly have to work with mock-ups in some capacity as a front end web developer, even if you aren’t creating mock-ups.

On the other hand, as a freelancer, or working in smaller teams, or as someone who straddles web design and web development, you’ll definitely need to learn how to create, edit, and iterate through mock-ups as a projects progresses.


Mock-ups are often made in Photoshop, and consist of layered .PSD files. Photoshop is a common way these mock-ups are made. However, sometimes you might receive a sketchier mock-up, intended to get a design down in code before further customizations are made. It depends on the workflow.


Low Fidelity

Low fidelity mock-ups — sometimes referred to as wireframes — are usually how you’ll start. Low-fidelity mock-ups can be made in something as simple as pen and paper. You can use something sketchy and early stage like Balsamiq.

The strength of low-fi mock-ups is that are usually intended to sketch a broad idea. Low-fi mock-ups help you work on the architecture of information before “distractions” such as color and fonts are considered. Sketchy, broad mock-ups help you focus on things like spacing, focus, and content placement before your eyes are drawn away by color and font.

High Fidelity

High fidelity mock-ups are usually the next iteration of mock-up. They’re usually created to be as close to the final product as possible, especially when you’re getting a “pixel perfect” mock-up (that is, a mock-up that’s intended to be translated exactly to the web). High-fidelity mock-ups generally contain precise outlines of every element, from the littlest buttons to the overall look of the site.

Working with Mock-Ups as a Web Developer

If you take a professional front end web development position, you are likely to encounter a mock-up sooner or later. Learn Photoshop well enough to work with high fidelity mock-up images. Some important things you’ll need to know:

  • Slicing out images. Sometimes you don’t receive separated files from the mock-up, and you’ll have to do it all yourself.
  • Taking measurements — if the design is pixel-perfect, and you need to duplicate those measurements in your code.
  • Figuring out how wide the stroke on an element is, figuring out how much opacity to apply to an element.
  • Using the eyedropper tool to pull colors.
  • Working with layers is especially important, as sometimes the PSDs you receive aren’t the most well-organized!

Common Problems with Mock-Ups

  • Most importantly, it can be really, really tough to get a mock-up to display the interaction people expect out of a website these days. Showing a hover link color is easy enough, sure — but what about animations, the behavior of a fly-out menu? These things can’t be displayed easily in most types of mock-ups, so there’s usually more design work to be done even after the finalized mock-up has been delivered.
  • Sometimes, if the person designing the mock-up doesn’t work with code, they may create things that are hard, if not impossible, to re-create in CSS and HTML. This is becoming less and less common, however, as “web designers who code” (at least HTML and CSS) are becoming more commonplace than the “graphic-and-web” designer.
  • Photoshop compatibility issues, if the mock-up you receive was created in a newer version of Photoshop.
  • Here’s a whole massive list by Photoshop Etiquette.

Web Graphics

Creating web graphics are more of a web designer thing. As a front end developer working in a large team, you’ll often receive pre-created web graphics that you’ll simply have to input somewhere in the design.

However — if you’re working in a very small team or on your own as a freelancer, knowing how to create some form of web graphics will come in very, very handy.

Adobe Photoshop

Adobe Photoshop is a very common application for working with and creating web graphics. Some common uses:

  • Resizing and compressing images to web size (e.g., you got a 4200×2700 digital camera photo and you need to make it smaller and reduce filesize for the web).
  • Cropping empty space out of images (e.g., you got a lovely company photo that’s fully 1/4th empty field on one side).
  • Adjusting photographs for web viewing (e.g., enhancing color, turning the photo black and white, fixing a terrible client photograph).
  • Creating tiling background images or patterns.
  • One thing you may find very helpful is batch image processing. Instead of manually resizing 5,000 photographs, let Photoshop run through an Action you create, using a batch processing action on that folder of photographs.

Adobe Illustrator

You’ll also find you can work with vector graphics, too. You can create SVGs for infinitely-scaling icons and logos. Many common web graphics, when downloaded from sites like Shutterstock or All-Free-Download, you’ll get an SVG or EPS file. This is again helpful, as you can scale these graphics to the size you need without loss of quality.

  • Changing the colors, strokes, gradients, shadows, and other aspects of a vector image.
  • Rotating, reflecting, and scaling objects.
  • Creating HTML image maps.
  • Creating custom SVG graphics.


Knowing how to access various aspects of Photoshop to do these things is important if you’ll be working with Photoshop templates. However — Photoshop sure isn’t the only tool for making mock-ups. Adobe Illustrator and Adobe InDesign web mock-ups aren’t unheard of — and you can just Google “mock up tools” for eight billion and two different mock-up tools.

Open Source Alternatives

For Photoshop alternatives, there’s browser-based Pixlr and GIMP. For Illustrator alternatives, there’s Inkscape. While these programs are a great way to introduce yourself to working with web graphics, they aren’t typically find in many professional environments. You’ll want Adobe programs sooner or later: they are pretty much the de facto standard in professional environments.