Swift Web Development Techniques for Startup Landing Pages

by Jake Rocheleau

April 14, 2013 in design

When launching a new startup online you need to consider the features which will draw attention. Visitors can often be easily distracted when browsing the Internet. So ask yourself what value does your page really offer to the average visitor? Developers should think about these topics from a user experience point-of-view. Then the process of constructing usable website layouts should be a whole lot simpler.

I want to use this article for sharing a few tips and techniques on building startup landing pages. The process is not easy and doesn’t provide any foolproof method. Interesting features will change based on the type of service or product you are selling. But I do not think these generic models are too overbearing after you work out the kinks fitted into each design.

Capture Attention

I’m not sure this is the #1 most important trait, but for landing pages and startup homepage layouts it can provide exemplary results. Users enjoy being swept off their feet when visiting your website for the first time. This requires attempting new marketing concepts towards what will capture attention and bring in new users.

chewse website layout interface background images

The startup homepage website for Chewse is small yet reliable. Visitors have access to the footer navigation plus a quick search feature. I would imagine the developers are expecting people to fill out their zip code and gauge the usefulness of this product. It is basically a search engine for picking out catering services, and the big fullscreen imagery illustrates this nicely.

sunrise iphone mobile app interface ui

Now the landing page for Sunrise is totally different, but still incorporating this same technique. Sunrise is a mobile iPhone app used as a mobile calendar system. The homepage is clean and follows a vibrant design matching the application UI. Specifically the large iPhone demo slideshow really stands out to let visitors know what this page is focusing on.

Long-Scrolling Pages

Out of all the recent trends I have been greatly interested in the single-page scrolling sections. This design caters around multiple page sections split up by images, headlines, colors, and textures. Users generally have access to a fixed navigation bar which often scrolls down alongside the page.

assured labor website ui interface layout inspiration

The landing page for Assured Labor is one great example. As you click on any of the top navigation links it will automatically scroll down to that section on the page. You can also find a small vertical list of dots which behave similarly as linked navigation fields. One reason I like this technique is because curious visitors may find all the details they need on a single page.

space monkey landing page design interface scrolling

Now the design for Space Monkey is also just a bit different. After landing on their homepage scroll down a bit and you will see another 2nd fixed navigation bar. This will only display on the homepage so it doesn’t track you around the entire website. But the developers have encapsulated so much information into the layout that it is easier customizing a guided nav menu. The use of icons and diagrams merely adds to this display effect for their product.

Flat UI for Simplicity

Just because many designers are fans of the flat UI does not mean this will work for everybody. However I have yet to find a website layout using flat interface elements which can be seen as ugly or unusable. Most buttons and links will be affected, along with larger block areas of important content.

kaggle startup website layout flat user interface

The reason I use Kaggle as one example is because of their brilliant use of colors. The entire layout is separated into various horizontal blocks of dark grey, light grey, and blue. All of the links and navigation blocks are blended nicely into the color scheme. Designers can take advantage by creating a meshed user interface balancing flat elements with colorful backgrounds.

divshot website ui inspiration layouts flat graphics

Now the website for Divshot is more of a landing page design. Here we can see elements for demonstrating how the product works and outlining the most important features. Using flat buttons and icons will keep all this information within readable context.

It is a big reason that I will advocate flat minimalist UI design. When focusing on simplicity you will generally garner faster and more powerful results. It also allows you to quickly fix what isn’t working and hopefully replace it with something that does work. Pulling in more converting users would be the highest priority goal for a majority of startups.

Targeted Branding

Of course unique branding will play a large part in your startup’s overall success. Why would people come back to your site if they can’t even remember the company name or logo design? Before launching your website online ensure that your brand is memorable and relatable to average users.

adstage io startup website brand inspiring

The example from AdStage uses their logo twice in the header and once again down in the footer. Visitors are sure to remember the website layout regardless of if they can remember what the company does. And thankfully this is all outlined on their homepage, so it should not be a difficult task discerning their goals.

The best methods for coupling your branding is repetition. Although not too many times, or else your design will become monotonous and frankly annoying. But instead use a set of repeating graphics, imagery, icons, and/or logos to instill a continuous force of branding design. As long as your website name is memorable the graphics should quickly tie into the overall brand.

Final Thoughts

Startups are one of the newer business models coming out of the 21st century. We have witnessed the rise of great tech companies and new Internet ideas which almost all started out in the startup phase. I hope these techniques will help developers construct usable landing pages and startup websites. Your design and interface will be a huge selling point for potential users and customers. But if I have overlooked any other useful tips feel free to share with us in the post discussion area.

Powered by Shutterstock

About Jake Rocheleau

Jake is a digital researcher and writer on many popular design magazines. He frequently writes on topics including web design, user experience, mobile apps, and project management. You can find him all throughout Google and tweeting @jakerocheleau. Connect with Jake on google+

It's pretty quiet on this post. Why not share your thoughts?

Leave a Comment

Your email address will not be published. Required fields are marked *