How to Create Website Mockups with Adobe Edge Reflow
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
In this article we're going to look at the process of creating simple website mockups with Adobe Edge Reflow CC. Responsive design is one of the most important challenges facing web designers because it's often necessary to design a site which displays properly on desktops/laptops, tablets and mobile devices.
When working with a layout, designers have many things to think about. One of these concerns images. Not only do the images have to display properly, they also have to load quickly. This can be problematic if you use the same image for all devices. Another issue is with the fonts you use. It's important that those be easy to read on all devices. If you use fonts in an image, those might be impossible to read on a mobile device, making it necessary to create different images and fonts for each device.
One way of getting around this problem is to design fonts and images that work with the lowest common denominator, in other words, the mobile site. If you do that, it will make it much easier to scale up, rather than down. With Edge Reflow, you might want to change the way you think and come from a mobile first, design consideration. As an example, designing a logo so it fits within a frame of 400 pixels wide would be a good start when working with mobile.
As a designer, Adobe Edge Reflow CC comes to your aid because it's a piece of software you can use for making web prototypes. With Edge Reflow you can style CSS visually and have that content flow across different devices.
On the interface you have a couple of control groups to be aware of. If you click in the white space, that brings up the background controls. If you click on the colored grid components, that brings up the container controls.
With both the background and container, you have two sets of controls which you can access in the tabs on the left side of the interface. These are Layout and Styling.
Above are the Styling controls for the background. Note the typography options and the ability to change the color of the background with the swatch at the bottom. Note the settings: RGBA. The last letter, "A", controls the transparency of the background, which I've set at .78.
In this screen shot, I've selected the container. Here, you can manipulate many aspects of the container, but I want to draw your attention to the highlighted areas, where you can control the number of columns on the layout and the opacity.
Like the background, you can also set the grid color. In this case I've set it to white (RGB: 255,255,255).
At the bottom of the workspace, you can get information on the CSS that's being built as you go through the various steps of creating a web prototype.
To give you a quick feeling for how Edge Reflow works, I've drawn the boxes in the screen shot above and I've filled them with a bit of color to make them easier to see. One of the first things you'll notice is that the lower three boxes aren't the same size. Nor are they spaced evenly.
The first step is to make all the boxes the same size using the Layout controls. I sized the boxes to 29%.
Now, we'll position the boxes using the Alignment Panel located on the lower right of the workspace. To do so, we select all the boxes then click on the Align Top and Space Evenly Horizontally icons.
Here's the finished result.
Here are a couple of screen shots showing how the layout reflows from desktop size to mobile. As you can see, there could be significant design challenges, especially if the lower three boxes were images.
In this next screen shot, I've scaled the size to 800 pixels, roughly for a tablet size. You can see how the layout is starting to squash and depending on whether you're using text, images, or a combination, you might want to start resizing the elements and repositioning them on the layout.
In this screen shot, you'll notice the lavender and light blue areas and the markers. These indicate the different layout sizes. You'll also notice a "+" size to the far right. When you click on that for each size you're setting the media queries.
In this screen shot, I've decided to experiment with the layout, by changing the size of one of the three boxes from 29-40%. Note how the box on the right drops down. At this point you'll want to experiment with different positions and sizing of the boxes. You might even want to add an image or two to see how the scaling and resizing affects the layout. You can position the boxes visually or make use of the numerical entry for greater accuracy.
Note what happens when I resize the layout for mobile. As you can see, the boxes are squashed considerably and you can see that major changes will have to be made to accommodate the layout.
One option is to size each of the three boxes so each fits one below the other, as above. It's a good idea to use the Alignment Panel to make sure that everything is positioned properly.
Another thing you might want to do is to reduce the number of columns. In the above screen shot, I reduced the number of columns to four.
You now know the basics of what's involved to make simple mockups in Adobe Edge Reflow. One great feature of Reflow is you can copy out the CSS for use in other projects.