7 Ways to Design a Killer ‘First Screen’ for Your Website
It’s time to talk about first screen design. The first screen is that initial glimpse that a user gets into your website. It’s everything above the scroll, whether the user accesses a website from a desktop, tablet or mobile device.
The information you include on this “first screen” is the key to website success. The design can entice and keep users clicking, or force them to navigate away from the page. What needs to be on the screen before users start scrolling? Let’s take a look.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
1. Create a Distinct First Screen
It starts with a first impression. Your website should create one with impact.
Go big with a visual – photo, video or illustration – to grab the audience right away. The image should be something that people can’t stop looking at. And it should be totally yours and unlike any other website.
Pair that imagery with a few key words to tell users why they are there and what your site has to offer. (This is your best chance to sell the benefit of clicking through your site.)
Here’s the thing that pulls it all together: The first screen must fit precisely on that first screen. Content needs to be responsively scaled to the device so that the entire image and all associated copy is clearly visible without a single scroll.
2. Navigation Should be Intuitive
Gone are the days where navigation has to run the height of the page in a sidebar or across the top of the screen. Hidden and pop-out navigation styles have become so popular (thanks in part to mobile) that it’s acceptable for all website designs.
But don’t hide the navigation or make it hard to use. Like it or not the hamburger style navigation menu has become the most dominant use for hidden navigation. Users have learned to work with it, and can find things on pages with ease.
Make sure to place your stacked icon in a location that’s easy to find – you can make it bigger than a typical icon – and ensure that the navigation is fully functional with that click. Uve, above, does a great job of this with a prominent hamburger menu icon that expands to a full-screen list of menu options. And best of all, users don’t have to guess how to use it.
3. Create One Focal Point
When you are working on a single canvas, such as the first screen, it is important to create a single focus or message. Users have gotten to your site, intentionally or by chance – and need to know what it’s all about.
A single visual concept can help users create that idea of what and who you are. This can be accomplished with images or text in a number of different ways.
While complex styles can work, start by thinking simple. Minimalism is both trendy and an efficient way to help convey information.
4. Write Copy with Purpose
Think of the first screen as a book cover, not the first page of a novel.
It should include just enough copy to help users engage. A simple headline and small copy block is typically enough to do this. Although the words are few, this can be a process that takes a lot of work. Writing concise, clear copy can be challenging.
Think about your site goals as a guideline. Why are users here? What do you want them to do? Use the copy to create that connection and start telling your story. Remember to sell the benefit of your site to the user.
5. Gives Users Something To Do
While websites offer distinct visual experiences, they also need to provide a reason for users to stick around. Your first screen needs to give users something to do.
The actions can include:
- Filling out a form, such as providing an email address
- Playing a game
- Sharing on social media
- Browsing trough items for sale
- Commenting or engaging with the content
- Watch a movie or slideshow
Not only should your first screen include one of these actions, it should be perfectly clear what the action is and what the user should do. The design should entice them enough that they feel compelled to do it.
The website for The Big Short movie, above, gives users plenty of things to do. The video clips are just enough to make you interested in the movie, and there’s a button to watch the trailer. Interested in this true story? There’s a button to meet the experts. Have you already seen it and want to share your thoughts? There are social media buttons. There are a lot of ways to interact with the site right from the start.
6. Make Room for Branding
A website is not going to do a whole lot of good if you don’t know who it belongs to. The first screen should include at the very least a logo or connection to the brand behind the site.
A brand or company name creates legitimacy and credibility. It makes the site seem more “real.” (This is especially important for sites that include any type of financial or personal transactions, so that users know who is getting their information.)
Bigger brands can get away with smaller branding on their first screens because it is likely that many people already know them. (Who do you know that would not recognize the golden arches that have come to symbolize McDonald’s?) For smaller brands, clearly showing a logo and style is important to creating an identity that users can associate with and trust.
7. Minimize Distractions
Don’t give users too much to look at or deal with on that first screen. It should be simple, streamlined and focused.
If you have a lot of content, space it out across several screens. (This can promote engagement and prevent a cluttered or disorganized site structure.)
Melanie DaVeid does a great job with a simple aesthetic that makes you interested in her other work. With simple touches of animation, color and beautiful lettering the first screen creates a distinct feel, focus and course of action for users.
Conclusion
While the scroll is coming back into fashion, the way we design for it has changed. The best site designs use responsive design and scrolling features (such as parallax) to create a screen-based experience for users.
And the first screen is the most important one. Make sure to create an interesting, readable and distinct visual to bring users into your site.