    
|
|
|
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The post Web Design Trends Found in Startup Homepages appeared first on Treehouse Blog.
]]>
 |
Editorial work at Smashing Magazine is a difficult, challenging process. It requires patience, focus and thoroughness. Our readers have high expectations, and our authors expect sophisticated editorial guidance. That’s what we are known for, and that’s where we could use your help. We’re looking for a hard-working editor with technical experience to support and complement our team.
Such an editor can’t be found on any of the innumerable job boards out there. Because the position is one of the most important to our publication, we are looking for the best editor from our community — someone who truly understands Smashing Magazine and what it stands for. We would never otherwise publish a job opening on our front page — in this case, we made an exception.
We’d love to welcome you onto our team in Freiburg, Germany (Google map). In addition to enjoying the beauty of this student city, with its medieval city center, lovely vineyards and proximity to the Black Forest, you’ll also have France and the Swiss Alps just around the corner. Of course, you’ll also enjoy the playful spirit and open-mindedness of Smashing Magazine’s international team members, who like to work as hard as they party.
(Image: Björn Freiberg)
We prefer that our team members focus on a few important tasks and do them well. Here are some of the tasks and responsibilities you will have:
We are looking for professionals who know exactly what they’re doing. Here’s what we expect from you:
Interested? Fantastic! Please send your cover letter, résumé, work samples and URLs of relevant websites to me, Vitaly Friedman, at the following email address:
vitaly [at] smashingmagazine.com
We have a lot of exciting ideas for the magazine — we just need people who we would love to work with and who we can trust to make these ideas a reality. With your help, we can make this magazine even better and richer than it has ever been.
We look forward to your application.
(al)
© Vitaly Friedman for Smashing Magazine, 2013.
]]>
|
|
With every new revision of CSS, a plethora of new, exciting attributes come to light; one of which being the understated display: flex approach.
The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).
In today’s guide, we’ll be discovering the advantages of utilising the flexbox technique in our own layouts.
Some great features of the new model include:
Stay tuned for next time, where we’ll be taking a look on how to take this even further, and turn your flexbox layout into a fully-fledged responsive design!
Have you used the flex box approach to layout? Do you prefer a different method? Let us know in the comments.
Featured image/thumbnail, flexible image via Shutterstock.
| Hiruko: Japanese Inspired Font Family – only $9! |
 |