8 Ways to Mockup a Website for a Programmer/Developer
Mockups help you portray your website in a better way to your clients. Also, they give an overall view of how the website will look once it’s completed.
Here are 8 ways using which you can mockup your website for a programmer.
01. Predict problems
The first step is predicting what UI limitations might arise during development.
- Write a complete a checklist of the potential obstacles and false lead so you don't forget any.
- Keep the list near your workspace (or in Google Docs) so that you can simply go through them one by one with problematic design choices.
- Periodically review the list with the developers, so you don't find yourself high-fidelity nightmare down the road.
Later you can try some of the trickier features, but initially it's best to prioritize feasibility.
02. Create different mockups for different screen sizes
If you're building a responsive design, create a separate mockup for each break-point to show developers how the layout adapts.
Some elements change more than others on different landscapes. Consider the following for each viewpoint:
- Do logos, graphics, or icons change size? Location?
- Should font size increase or decrease? What about line height?
- How does the main navigation system differ on smaller screens?
- Will sidebar columns drop below the main content or perhaps disappear entirely? What about footer content?
03. Pay attention to inner page graphics
When designing mockups, treat all pages like homepages.
What we mean is, give alternative and secondary pages the same thorough treatment.
Here's a handy checklist to see to follow for graphics in general:
- Size graphics exactly as they need to appear.
- Account for differences in logged in & logged out states.
- Label form fields, buttons, and inputs.
- Illustrate different JavaScript interaction states, i.e., the dropdown menu open and closed. Even if it's demonstrated in the prototype, it never hurts to leave a paper trail.
- Illustrate any success or error messages.
- Include separate graphic files for all images like the favicon, animated loaders, 404 page photos, etc.
04. Test interactions with prototypes
Prototyping is the most efficient platform for exploring the feasibility of interactions, and a faster alternative to trial-and-error methods with coding.
Let developers use them at every iteration and use their feedback going forward. Even low-fidelity prototypes (a.k.a. interactive wireframes) show developers the dependencies between content as users click through the experience.
05. Create browser fallbacks
Web design involves different variables than mobile app design: different operating systems, different screen resolutions, and different browser, which also have different screen resolutions.
And that doesn't even begin to cover accessing the site on mobile devices.
- Fallback.js – Centralizing all of your scripts makes it easy to check which files aren't working and provide alternate solutions.
- Modernizr – This customizable library for cross-browser HTML5/CSS3 support is a cherished asset for any project.
- Detect Mobile Browsers – More like a code generator for mobile detection, here you'll find snippets in all languages from ASP to jQuery for detecting a mobile browser. The results let developers know which code to execute for mobile users.
- IE7.js – Internet Explorer just won't die. IE7.js forces older browsers like IE6-IE8 to support typical rendering methods like transparent PNGs and RGBa() colors.
- Selectivizr – Similar to Modernizr, but focusing more on CSS selectors. This JS library emulates CSS pseudo-classes and attribute selectors to improve support for older versions of Internet Explorer.
- Video.js – Embed any video format into an HTML5 player, with a Flash fallback for older browsers.
06. Use version control systems
These are like digital archives that store previous versions of a script, database, or an entire website, so you can easily roll back changes or compare files.
Even though design-based version control is new, there are still some great resources available:
- GitHub for PSDs – Designers to use GitHub as their own version control system for PSDs; however, the site is open source and is not recommended for private enterprise projects.
- Pixelapse – With both free open source accounts and paid accounts, Pixelapse can support small freelancers and large teams.
- Cornerstone – A Subversion client for Mac, Cornerstone works great for localized work, despite the initial setup.
- PixelNovel – Adobe's own version control platform also runs on Subversion, but with less technical setup. Features include a Photoshop plugin and file-sharing among multiple users.
- Kaleidoscope – While this Mac OS X application doesn't offer traditional version control, it can instead be used for file comparison.
07. Take advantage of plugins
Photoshop and Sketch both support a wide assortment of plugins for automating tasks and improving workflows.
These plugins let you design the same pixel-perfect mockups without so much time and effort.
Photoshop Plugins:
- Cut&Slice Me – Cuts and export graphics to different devices, whether smartphones, tablets, or computers.
- GuideGuide – Sets up guides and grids according to columns and pixel values.
- CSS Hat – Exports any Photoshop layer into CSS code.
Sketch Plugins:
- Text Styles – Exports Sketch text styles into CSS code.
- Sketch Generator – Exports all of your design assets with a single keystroke.
- Measure – Obtains the exact dimensions and coordinates of any graphic in your mockup.
08. Extra tips
To cover everything that might have been missed above, here are some additional tips designing mockups for developers.
- Use in-app export tools – Photoshop can export graphics using the slice tool or by manually creating new documents. Sketch includes its own export options designed specifically for interface graphics.
- Organize and label your layers – Mockup content should be organized so that developers don't need to open your PSD/Sketch files. Give every layer a distinct name to differentiate them, and link similar layers together with layer groups.
- Compile an asset package of separate files – Asset preparation saves everyone a lot of time and stress. Once the mockups are finished, export graphics, icons, photos, and other assets into separate files. This saves the developer extra work that you know how to handle better anyway.
- Show animations and interactivity – Seeing these in action will be more descriptive than simply describing them.
- Keep a note log — For larger projects, there will likely be a lot of notes. If you're working in UXPin, you can add a note to the design itself and while you're in Preview mode. If not, keep a short document for developer notes, and clarify which mockup, page sections, etc. they pertain to.
Check out these Mockups:
