DANGER ZONE


1rst Screenful

Above the Fold plugin for
Sketch

Make sure your most important elements will be visible every time on every device. Above the Fold plugin supports Desktop, Mobile and Tablet viewports.

SketchDownload Plugin
FigmaDownload Plugin
Hero

How It Works

We built Above the Fold plugin for the designers that want to check quickly which portion of their design will be visible in a browser window.

Gather Data

We gathered the most common viewport sizes around the web. Viewport is the area where Browsers load the web pages and >90%* is different to the user's screen size.

*Viewport and Screen size are the same only when the user is on fullscreen mode!

Aggregate dimensions

Then, we categorized the viewport sizes per device type (desktop/mobile/tablet) and aggregated them to shape each category. Also, we added the danger zone* which pinpoints a possible unsafe area.

*Danger zone is an offset based on OS and browser's navigation bars that vary per user.

Fit to your Artboard

Our algorithm analyzes your design by extracting artboards’ dimensions. Whilst providing you with the final results for the selected target device, it eliminates scale inconsistencies.

Viewport vs Screen

For example, let's compare the size of your current viewport to your total screen dimensions:

Embrace your process

Above the Fold plugin marks the above the fold section for all of your selected Artboards. In that way, you can be safe that your Call to Action will be visible when the page loads.

Step 1

Select your Artboards

Above the Fold plugin analyze one or multiple Artboards at once. You just have to choose the Artboards you wish to test!

Features split 01
Step 2

Choose the target device

Once you have selected your Artboard(s), the next step is to choose the appropiate device target from the plugin's panel menu.

Features split 02
Step 3

Get back results

The analysis runs instantly and the results are visible as an extra layer on top of each Artboard. Now, you can review the visibility of your elements!

SketchDownload Plugin
FigmaDownload Plugin
Features split 03

Optimize your landing page with AI