VisualEyes
p/visualeyes
Faster insights. Better design.
Jim Raptis
Above the Fold plugin — Mark the above-the-fold portion of your designs
Featured
13
Above the Fold plugin marks your designs with a layer that indicates where the above-the-fold portion ends. 🙌
Available for Sketch and Figma!
Replies
Best
Jim Raptis
😻 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
Jim Raptis
Cheers @kilianvalkhof, thanks for checking it out! Really glad you liked it ❤️
Jim Raptis
@graeme_fulton haha thanks a ton, Graeme. Really appreciated man!! 😻
Jim Raptis
@ioan_sabo We're always glad to share useful resources to our community 😇
sarah semark
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!
Jim Raptis
@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😁
Victor G. Björklund
Haha! So simple but so useful!
Jim Raptis
@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!