Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
Today most of the landing pages are using common pattern like following
Is there any design theory behind this? How to organise a good design to the landing page?
Blame the grid frameworks like 960.gs and Bootstrap. They made it very easy to build this exact layout:
http://getbootstrap.com/examples/carousel/
These frameworks solved a lot of the problems of CSS layout, and made it easy for web developers / designers to create structured, grid based site that were comfortable, familiar and easy to use.
Theme sites then started selling variations of pre-made versions of this kind of layout and made it painless for even the average Joe or Jane to use. This generic design pattern just became the de facto view most people associate with "a website" these days.
Twitter user @jongold's tweet sums this up pretty succinctly:
I think this article from NNG is useful in this particular instance, especially for the "one page" layout:
https://www.nngroup.com/articles/page-fold-manifesto/
In short, you need to give your readers/users a reason to scroll your page by using text/content that "hooks them in". By positioning elements that develop interest, for example images for new sections appearing just above the fold, you create a want in the mind of the user. It is no different that selling and you need to give people reason to invest their time in your website, instead of assuming that they will scroll or read it through instinct alone.
The examples you are seeing in the supplied answers have no real theory behind them and are just templates, and as a designer you should always aim for originality.
Your content should dictate the flow of the page. Read and understand your content then the ideal placement should come to you. To me, there is no "one size fits all" solution for designing a webpage. There are elements or layouts you can incorporate but these can only be identified through extended research and understanding the content you currently have.
Its a good question but missing the point. It's not about a design theory for a 'good' home page, its about a design approach period - a logical creative solution that best serves the client aims / audience whether its a website, brochure, touch screen application, etc. You should start at the same place for the core elements of your project (I've developed my process over many years). This will include client foundation / brand / colours / font / images and most importantly what they are trying to achieve in the short / medium / long term.
This is key - example: I had to build an international convention stand one time, never done it before, won stand of the show. Why? Because I didn't start with wood, glass, carpet, large format graphics, plasma screens like the others (i.e. your home page bootstrap template). The client wanted to break the market with a new product. They had great sales staff so the brief was get people on the stand throughout the event so we can talk to them - that's it. I designed the stand around a cyber cafe with soft seating, expensive coffee and tea (free), web and email access point (free) and large format viewing screen for demos (with sound and lights). I also put a tower in the middle that stopped 6" short of the ceiling with signage facing NSEW, you could see this from anywhere in the hall. Stand was rammed for 3 days.
Back to your website. I start with what the client is trying to achieve through the application of the site and how it fits with their wider on / offline marketing plan. Clearly different clients will have different aims even though there are common elements like services / contacts. Things is, these don't sell in themselves so you shouldn't start with them. Expressing advantage & benefits will engage with users so get to know your client and what they are trying to do with the business. For example, the overall drive may be to support social media and content development OR a full digital transformation with services and forms going electronic OR it might be primarily information / data in terms of a local authority. The website could simply be a device independent brochure or they may need a full CMS driven solution for legal daily updates through multiple notification channels.
Another question: is mobile the key focus? This might seem moot when 80% of traffic is going that way although commercially the desktop / widescreen is alive and well and MIGHT BE your clients primary audience - for example in HNW Finance mobile has not been adopted yet due to security concerns. In all cases you need to know this FIRST before you decide on your UX, site plan, channels / pipe, navigation and home page priorities.
Couple of brief examples - Finance (Commercial Offshore) and Local Authority (Water Services).
Finance company key requirement: (1) promote staff / experience (2) offshore benefit (3) clarify what they do and their market sector (4) Governance (foundation, regulated, active / forward thinking, level / aptitude) (5) drive new mobile presence (apps coming) The above directed my home page shown below. Menu is ultra simple and leads to team & contact (hamburger for rest of site), clear logo and hero qualifies who they are and offshore (no carousel), brief intro paragraph summaries the offer with (max 2 paras) of foundation / about text following to the right. Four CTAs (call to action) panels provide direct channels to key information in support of Governance. Opens Sans for body 85% black - mobile friendly. DONE.
Local authority requirement: (providing a service and information for water services / drainage). Although the organisation were strong on environment and marketing including social posts daily the real priority within was (1) tranformation to digital services and ePay (2) emergency help line (3) move to mobile as primary info out channel (4) 24/7 live notification of current works and issues including from engineers on the ground. The 3 key channels identify from analytics and customer research were (a) water services (b) drainage (c) advice / support (help customers to help themselves including fact sheets, FAQ, media centre to cut down on phone calls)
Solution below follows this lead. No hero as such, no carousel - space is used for eServices introduction and links. 3 core channels + site search with mobile friendly icons are on a secondary menu under main nav bar (white) to keep this primary very clear only having Emergency link and site hamburger. Pink introduced as target audience 75% female (bill payers) and works well against the blues and aquas (water). Icons bespoke, simple clear. Key notifications (driven by Twitter) follow this on home screen. Strong colour contrast / legibility for accessibility regulation (Gov department rules strict). CMS driven including mobile responsive.
Finally, don't be led by trends on template sites and bootstrap. There is a trend currently (fall 2016) to go with white text over pale backdrops, thin heading fonts (like Helvetica Ultra Light) and < 60% black for body text i.e. grey. These come from print design although they create multiple accessibility issues (e.g. for sight impaired and for representation on mobile screens). Remember your design training, form and function, its a balance that is particularly important commercially on screen. You are a designer, not a lemming. Lead through logic, don't follow others blindly.
I've taken the time to write this because I fundamentally believe in the approach and I want to help you and others. Don't get hung up on my design style or creative, you will have your own - think about the approach to the solution. It has worked for me for nearly 20 years in full service design and I've been building websites successfully since 1997 on a MacII when we only had 40K a page and 256 colours to play with :).
Best of luck on your journey
A landing page is all about the elevator pitch. And most websites as a whole these days are nothing more than landing pages. Every page carefully designed to funnel people towards a purchase.
For a lot of people this means -- headline, elevator pitch, button to buy. And in theory for a lot of companies this works. In simplistic terms this is referred to as Above The Fold. But this isn't entirely true.
"Above the fold" comes from Newspaper terminology where there's literally a fold in the newspaper. Advertisements above the crease outperform those below. This isn't really the case in web design -- study after study will prove it is because they're not doing the right studies. See this article on Kissmetrics -- Why the Fold is a Myth for a better study.
Looking at it properly you'll see its less about "What do people see when my page loads" than the following:
As Marketers better understand this, they want designs to meet these criteria. THEN templates such as Grid and Bootstrap emerge. Make no mistake -- it doesn't matter how pretty of a template it is, if it didn't convert to sales nobody would be using it.
Enter those templates and others. Its a quick and easy way for designers or even non-designers to get a decent page up and running. A good marketer will use it as a base but either hack it to fit their exact needs, or hire someone to hack it to fit their exact needs (story of my life!).
Then a really good marketer will do A/B Testing with slight changes in either the design or copy. Carefully refining to improve the conversion rate. Most businesses don't have the resources to do this. But guess what, by studying the larger sites and creating templates you're already well on your way.
Summary
Is there design theory behind it? A little but the design theory especially on a landing page comes from market research and theory more than design theory. Ultimately landing pages are conversion tools. Whether you use the proven techniques you're now used to seeing or something completely different - it ultimately will live and die by how well it converts.
Related Questions
This type of layout you are describing may be tried and tested, but I find that it has lost the impact it once had back in 2012 or 2013. Like another said above, frameworks like Bootstrap have contributed to seeing this pattern everywhere, in themes and templates as well, many of which employ Bootstrap.
It's a layout that is very easy to gracefully scale down, in my experience. Not coincidentally, in 2012 or so smartphones were getting cheaper, becoming available to everyone, as well as more tablets.
Unfortunately, I've found it more and more difficult to take this basic placement of elements and refine it into something visually interesting, and have begun revisiting layout ideas I had before this trend and refining them.
