Skip to main content

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:

Comments

Popular posts from this blog

Copy Cover Mockup Set

Presenting your new design to a client? Help your client envision your idea by providing Notebook Cover Mockup Set of your design. Mockups are useful tools to impress your clients in presentations, and provide a creative context for your clients to envision the future of your design for their project. Using a photorealistic mockup could set your idea apart from the rest.

Cosmetic Mockup Generator

By using these  Bottle Label Mockup  you can create your own fully customizable mockup project where you can display your own brand. With smart-object included you can edit the layers of the graphic canvas or remove them completely and place your own graphics inside, without worrying about perspective, lights & shadows, reflections etc. Newest Packaging Mockups on eymcokup Images Object Mockups, Get the all best free Packaging Mockups that are all high quality resolutions, smart layers enabled, PSD, Sketch formats, personal and commercial use 1.  Free Mockup 2. Free New Latest Mockup 3. T-shirt PSD Mockup ·          T-shirt PSD Mockup Templates ·          Device PSD Mockup Templates ·          Packaging PSD Mockup Templates ·          Vehicle PSD Mockup Templates ·    ...

Useful Photoshop Tips For Graphic Designers

Undo, More Undo Please Well as you might know by pressing  Ctrl  +  Z  in Photoshop you can undo the previous action you made, but when you press the same key combination again, it will redo the previous action. Believe it or not, Photoshop has a specific button for multiple undo, and it is  Alt  +  Ctrl  +  Z . Yes, by using this key combination you can undo multiple times, according to the value of History States you set in Edit > Preference > Performance. If you’re used to common Undo’s key combination which is  Ctrl  +  Z , you can simply press  Ctrl  +  Shift  +  Alt  +  K  to access Keyboard Shortcut panel and change Undo’s key combination under the Edit section to  Ctrl  +  Z . Smart Object For Smart Designer Smart Object makes your editing smarter by carrying out 2 primary functions: perform nondestructive transforms and perform filtering. This f...