Design beautiful, accessible and efficient user interfaces through continuous feedback. VisualEyes AI-powered assistant is available on Adobe XD, Figma, Sketch.

Above the Fold plugin marks your designs with a layer that indicates where the above-the-fold portion ends. 🙌

Available for Sketch and Figma!

😻 Hey Product Hunters, I'm Jim, co-Founder and Design Lead at VisualEyes. I and my team are super excited to announce our fresh new plugin for Sketch and Figma. Above the Fold marks your designs with an overlay layer that indicated where the above-the-fold section ends. What Above the Fold means? Above the Fold is the portion of a Web page that is visible in a browser window when the page first loads. Users engage more with the content above the fold than below the fold, thus key site functions and content related to business goals should appear at the top of the Web page. The Problem Now, the only indicator designers have about the above-the-fold section is the default Artboard/Frame. However these presets are specialized for the total screen resolution and not the real browsing window.

However, very few of us browse the web in fullscreen mode, that’s why the viewport size almost always differs from the actual screen resolution. The CSS tricks site conducted a study and stated that 1% of the users have their browsing window in fullscreen mode. Our Solution Our approach was to gather the most common screen resolution around the web per device type (Desktop, Mobile, Tablet). Then, we calculated the average user viewport size and aggregated the results to form a danger zone. A zone in which you can’t be sure that your elements are safe. The results of Above the Fold plugin are the following:

But, why does it bother me? The main goal for every landing page is to make the business’ value proposition clear enough and convert visitors to leads the optimal way. Content layout and placement play a significant role in the aforementioned goals, Especially the content that appears above the fold since it’s the first visible when the user loads the page. Thus, it’s a common practice to place the elements that fulfill the conversions goals in the initially visible part of your page. By using Above the Fold plugin you can be sure that your elements will be visible every time on every device! Download our plugin here We'd be glad to hear your thought on our plugin and answer your questions!!! Cheers, Jim

@draptis This looks great! Really useful and the landing page looks beautiful :)

Cheers @kilianvalkhof, thanks for checking it out! Really glad you liked it ❤️

@draptis wohoo congrats on another one!

@graeme_fulton haha thanks a ton, Graeme. Really appreciated man!! 😻

@draptis Thanks a lot for this!

What a lovely idea! I get why you're requiring an email address for access, but it immediately put me off—I'm sure your emails are lovely, but I already get a lot of email I don't have time to read. 🙂 It might be worth tracking how many people click the "Download Plugin" link and then close the window... perhaps it's just me!

@sarahsemark I totally respect your opinion and understand your situation. Our inboxes start to overflow day after day and we should be careful enough. Feel free to DM me and I'll happily share you the download link😁

@draptis ❤️ Thank you so much!

Haha! So simple but so useful!

I hope you launch soon for Figma.

@victorbjorklund I'm so glad you liked it, Victor! Our Figma plugin is under review from their team (normally it takes 1 week). Hopefully, in the few days it will be live!

VisualEyes

Faster insights. Better design.

Faster insights. Better design.

VisualEyes

Faster insights. Better design.

Faster insights. Better design.

Similar Products

Above the Fold plugin

VisualEyes Launches

Do you use VisualEyes?

VisualEyes Launches

Do you use VisualEyes?

You might also like