Web Design Trends Found in Startup Homepages

blog_css

The growing market of Internet startups has paved the way for a lot of new web design trends. Designers and developers who are familiar with these ideas must have been paying attention to all the recent changes. But it can be tough breaking into the startup scene, and a design is not the only piece to creating an extraordinary product.

However I would say that a well-designed website can lead to more conversions of interested customers or clients. In this article I would like to expand on a series of ideas related to homepage designs. More specifically these ideas can work brilliantly to accent your company’s internal website layout. Consider these techniques and how they might affect a greater user experience in your own web products.

Stationary Navigation

Lots of web designers have been fixing top navigation bars on various niche websites. These are not specific to startups, however a great deal of companies like this feature because it is easy to access and very user-friendly. Keeping your main links accessible at all times will promote a higher percentage of clicks from people who dig a bit deeper into your website.

goodco fixed top navigation navbar

On the homepage for Good.Co you will see the fixed navigation bar also includes a search and login feature. Members who are already apart of the site can quickly access the login form anywhere on the page. The navigation even handles a dropdown menu for sub-links related to each list item.

beta ridepost navigation navbar top webdesign

The success of this technique can be attributed to a long list of features. You can easily fix any page element using CSS and so it does not require JavaScript at all. Plus designers will often create the page so the navigation bar appears to be seated as the natural header. The whole interface seems to “blend” very naturally and puts out a very positive experience.

Features Listing with Icons

The idea of listing your startup’s features is far from new. But there have been a lot of innovative designs which push the boundaries on feature lists. Notably I have seen a lot of examples which use icon designs for relaying a quicker message.

synack website startup homepage icons listing

The reasoning is that visitors can quickly acknowledge an image or pictogram without needing to read and understand the context. This is a benefit on the homepage because you will constantly have visitors looking at your page and attempting to figure out what you do. Icons will separate out more of the complexity so users now have a choice to read the features or skim past them.

readcube startup homepage website design icons listing

The example icons from ReadCube are my favorite because they are very detailed and squeeze right into the top of the page. Visitors are immediately drawn to this small listing of features, and it is a helpful user interface for expressing what the company offers. Icon features almost appear as branding elements for communicating the goals and tools of your company.

Live Demo Animations

To actually build a live demo or animation can be difficult, so I can’t recommend this for all startups. Most of the websites using animated graphics would be for mobile applications and software. If people are going to buy your product they probably want to know what it does and how to use it.

weebly homepage animation graphics demonstration

On the Weebly homepage you can find a couple demo animations which explain how the script runs and operates. Visitors who are unfamiliar with their features can browse each page section to learn a bit more about the product. Everything is organized and effortless.

spindle iphone app website homepage demo

The app websites for Spindle and Polar both use slideshow features within the iPhone frame. Smartphone app developers should always consider the best approach towards explaining how to use all the interface features. Especially for paid applications which require users to spend money – they want to know their purchase is worthwhile. Sometimes a live demonstration or video of the product is the perfect solution.

Customer Testimonials

To add small testimonials and press releases onto your homepage requires actually having a few customers or articles in the press. This can be tough when you are just getting started. But designers who are updating frequently should know that it is never too late for adding a more usable interface.

babaco website homepage testimonials slider

The homepage layout for BabbaCo uses a lot of different elements. When you scroll all the way to the bottom you will find a showcase of four different custom testimonials. It is a great service to visitors who are trying to understand what the company does and how they have helped people. Not all startups are in the business of working directly with customers, so another technique is to display various news articles and links from around the web.

formlabs testimonials press articles website design

You can see a long list icons featuring major publications on the Internet. Each of these logos actually links back to the original press article discussing Formlabs. The opacity will even fade in to show that each icon is clickable like an anchor link. I find this technique more satisfactory because people tend to trust major publications. If your company is getting attention from online magazines you should take note and keep a catalog list of articles. These can be useful even to display on an inner page of your site.

Expanded Footers

Internet companies and startups will likely need to hold a lot of internal links. Aside from the main content pages there are also links for advertisers, developers, and other internal company stuff. The best place to unify all your links is within the footer. Columns with headers are very common as we can see on Shareaholic.

shareaholic website footer icons design ui startups

Large expanded footers leave room to scale out your interface and keep your website links organized. There are plenty of companies which do not need all this extra room in the footer. In those situations it does make sense to limit your page content and place links to only the most important pages. Large footers are merely a solution to the problem of transmitting large collections of information.

custommade startup design footer interface links

The footer on CustomMade is a much different approach to content organization. The website only needs a small collection of core links for internal pages. All of the bottom footer links are used to organize user content from the website. You can find a list of popular tags for product galleries, along with new users and new products released on CustomMade. Since the website is geared towards user-driven content the footer can be an expression of the userbase. This is certainly an interesting design idea if you have the right approach to build it.

Final Thoughts

This post is not meant to be an exhaustive list of all the top features. I have attempted to compile the most useful techniques which I run into more frequently than others. The realm of quickly-advancing web technologies is always expanding and never fails to blow my mind. Simply by looking into examples and studying what else is out there, you can learn a lot about web design. If you have any similar ideas or suggestions for UI techniques feel free to share in the post discussion area.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Jake Rocheleau

Jake is a writer and user experience designer on the web. He currently publishes development tutorials and articles related to startups and user interface design. Find out more on his website or you can follow his updates on Twitter @jakerocheleau

Comments

16 comments on “Web Design Trends Found in Startup Homepages

  1. Great article but I think you should do something about your hair do? Cheers

    • Thanks for your opinion by my hair is beautiful and it does’t affect my work/writing talents at all. So I don’t think criticism of my hair-do is warranted or has anything to do with this post…

      • I like your hair.

        What I don’t like is the fixed navigation bar trend. I have definitely noticed it on the increase lately, but I just feel like they intrude on the space, especially on smaller screens, say 13″ or lower. I wonder do they really generate more clicks?

        They are clever in a way, I give you, but they feel wrong to me.

        • Agreed. This fixed nav bar is user friendly, but a played out style. Since Bootstrap is so commonly used, I’d say it’s already getting dated.

  2. A great read – enjoyed seeing both the written and visual aspects (as well as live demos)!

  3. Does anyone know any premium theme that does the above? Until I start my TreeHouse courses I can’t build one myself :(

  4. Thanks for sharing this. I found it very informative as someone looking to build my first startup website. Keep it up.

  5. Good points have been shared here !! These pints are very beneficial for web designers who just started there career !! Overall it was a nice read !!