Web Design For Beginners: Vital Elements of a One-Page “Website” Allie Wolff Website design was once the exclusive domain of coders and web aficionados. But as the rise of drag-and-drop website builders came about, it opened the doors for small businesses around the world to market themselves like never before. But this new flood of websites seemed complicated. The rules of proper SEO and good UX have only gotten established in the last decade or so. Many of these issues have been resolved by business owners and marketers preferring to create smaller, simpler, cleaner websites that fill every need without overwhelming the visitor. So, who should use a one-page website? There are plenty of instances that warrant smaller sites, including solopreneurs, small businesses and freelance portfolios to name a few. Additionally, a one-page site can be the perfect fit for a local business who does most business offline – you’ll make your presence known, show up in search listings and let people get to know your business before making a visit. These sites usually comprise a single, long page users can scroll down within a few seconds. A header menu would skip down to the relevant spot on the page, usually with contact info filling the footer area. There are many, many ways to execute a one-page site effectively depending on your business and your needs. On that note, here are the elements of a one-page website that you’ll need to remember when building your own. Keep it simple To repeat: the idea is that users cannot get lost to prevent them from bouncing off your site. Either they scroll up or down, maybe click something that brings a pop-up photo or blurb, but they can’t get stuck in some awkward corner of your site. You’ll notice a lot of simple one-page sites – including templates on WordPress or Squarespace – employ the chic minimalist aesthetic, all white backgrounds with a clean statement font and a dash of color. That’s because simplicity is quick to load, easy to code and works across all browsers and devices. Take a look at this gorgeous site made for Kazumasa Nagai, a Japanese designer. It’s an editorial product, yes, made literally by and for designers, which means it can afford to nix anchors and links in favor of pure design. But note how smooth it is and how quickly it loads. Technically, and aesthetically, it’s simple, even though they make bold choices with the font and colors. Don’t overload it The folks at First Sip Brew Box, a monthly beer subscription service, employed a wonderfully creative web design – it’s unique and distinct, even if it’s a bit difficult to read. The problem? I can barely run it on my browser. There are so many animations and so much code that I had to wait about four minutes before it was scrolling properly. (And no, it’s not my Internet connection.) The problem is simply that their ambitions overran their capabilities. Reining in their ideas a bit for the sake of a simpler, cleaner, faster site would be optimal. If I were a customer, the exorbitant load time would have caused me to close the window long before I’d have been able to read the content. Focus on copy – more than you normally might When your site is just one page, you’re aiming for simplicity. Bold headers and taglines will be imperative here – they’ll be what grab your audience and communicate your ideas. You may already be noticing that one-page websites use fonts as design elements, rather than just words. That only works if the content – the words themselves – are also perfect. To see an example, let’s turn to an Australian copywriting collective called Apostrophe. Their stunning website is perfectly clear, with an obvious emphasis on vocabulary. If it has any faults at all, it’s a little silly, but the elements of design overwhelm that. See… a little silly. But the menu is clean, the site is quick and the color palette is inviting. Plus there’s the real takeaway: the attention to copy. They know their audience, and they’re writing directly to them. Bring it to life with multimedia – but not too much You may have the bright idea to go in the opposite direction – a grandiose one – with animations, videos and music. Look, people do it. It’s not a bad call. But what matters is doing it well, which means being thoughtful about where you’re inserting your multimedia. Let’s look at the German bike company Canyon Bicycles, which launched a microsite for their Torque model. There’s animation every step of the way – subtle flows in and out, overlapping photos, a slideshow and an embedded YouTube video near the top. There’s also a beautiful navigational trick here, where they divide the site into three sections – unruly, unbound and unreal – which correspond to different elements of the series, and can be accessed after you’ve finished reading one section. This breaks up the single-page effect into three websites, even though the site is anchored to one URL. It’s a great example of a lively, animated site that doesn’t sacrifice weight or speed. Integrate social media smartly Let’s return to Japan for a moment, to the website for the Parfait Stand. It is a simple store in Tokyo’s trendy Harajuku district that offers a select few types of parfait, and nothing more. That simplicity is translated into their website design. The site offers slideshows and animations, but they’re hardly big enough to slow things down. Instead, it shoots for brevity, just like its brand. What’s best about this self-described “hipstyle parfait” is its Instagram integration. Their aesthetic is spot-on with their brand, so they can integrate it into their main site as a gallery that doubles as an invitation to follow them on Instagram. That kind of intelligent design – rather than just plopping social widgets somewhere – is a far better resource when your site is designed to be essentially simple. By the end of all this, you may be overwhelmed. Rightly so – these are beautiful examples of web design, and none of them can be accomplished without proper planning and attention to detail. But the basic tenets of good web design are there, and that’s what matters. Don’t get distracted by other possibilities. Take the time to make your site great, invest in a developer if you need, and your audience will appreciate it.