Preview Links

Preview links is a term not rooted in any sort of industry standard that I am aware of. But, it is a presentation method that I have been using with clients in digital projects. The term has basically means a JPG shown in the browser.

What this does is it allows people to view the design at the correct size, color profile, and scale. The goal is to provide a more accurate look and feel to how the project will turn out looking at the design stage. It’s a way we have been turning the design phase from Photoshop into some sort of prototype.

Now, while it may not be a fully functional prototype that is completely fine. That is not necessarily the intention with the creation of preview links. The goal is to show all of the design work for the project in a way that in can be effectively evaluated in an environment that is close to how it will be finally produced.

Each design in a preview link is setup to link to another design. This can be done by the user just clicking on the design anywhere in the browser. Here is an example of what I am talking about:

With this preview link I was able to take certain elements from the Photoshop file and isolate them to mimic certain final functionality of the site. Such as: sticky header, parallax footer with map, sticky left hand navigation, how the center content well floats, the blur behind the header image. In order to arrange all of the items like this I just open an HTML editor and place all of this sliced elements in by hand. It does take some time to pull of correctly, but the payoff is completely worth it. This is because all of these are things that are too difficult for a group of people to evaluate just from a JPG, or over the shoulder in Photoshop.

Also, this can be hard to evaluate from a design standpoint if everything is just being viewed as a grayscale prototype. While the format and hierarchy can be evaluated in grayscale, I have found there is still a leap for clients when going to that from design. Preview links help to close that gap and give clients that they can really evaluate. It also allows them to easily share this with other stakeholders, and gives them a real experience to evaluate the design in.

From a selfish designer-side of things having something that feels right at this stage is just plain cool. It’s great to have something that feels closer to real before seeing something after a developer has had to spend time actually coding things. I have also found preview links to be a very good resource for development partners, and for working through QA. It’s a great accessible key that has been more than worth the time in almost every occasion to put something like this together.

However, there is still the issue of responsive design at this stage. The way I have started to approach it is under the adaptive design principle. Which means that I will make a set of preview links per breakpoint. Now, I know that seems like a lot of damn work, and it pretty much is. But, I have found once you have created the largest viewport preview link set everything becomes much smoother. This is because you don’t have to worry about how the design looks/stretches out at those larger viewports to accommodate for the edge-to-edge browser design effect. The link listed earlier is showing the design at the 1100px+ viewport size, here are the remaining viewport sizes that were created for that project:

I know that there is software out there working towards this sort of prototype creation. But, I have not came across anything in my experience yet that has allowed for the level of control such as sticky navigation, and parallax~ish effects. Now I know that type of behavior is not required for every type of project. However, it does seem that it is almost inevitable that there will be some sort of front end piece of functionality like this that would be much more beneficial to show earlier versus showing it later once it has been really coded and more time has been put into it.

The point of doing it like this is to allow for iterations if needed, and to think of new/different solutions that solve a problem to create a better user experience.

Be the first to leave a reply!

Leave a Comment

* required