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
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.
Types
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.
Programs
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.