Everyone loves to have fast and quick way to get what he/she wants. Single page website is the best ways to offer your visitors all the quickness possible by compiling all the content you want in a single page. They can be extremely charming for designing your portfolio or to market/sell any product. However, if you have a lot of content to express or have diverse and unrelated content, then, you should choose traditional multi-page layout.
Table of Contents:
- Why Single Page Website?
- Create Your Own Landing Page
- Capture Visitors’ Attention Through Your Home Page
- Restaurant Website Design Guide
Why Single Page Website?
Single page websites have the perfect amount of information for your visitors. This is crucial for maximizing the effect of user friendly design. The search for information is minimized and forces the visitor to focus on important content.
If you want to design one on your own then you should also have extra ordinary JS skills to create interactive and smooth navigation effect. Today we present to you 50 impressive examples for your inspiration.
2. Bread Design
11. Blinc Agency
14. Barrel + BARC
15. Help Us
16. Catalytic Design
17. We Shoot Bottles
21. Riot Industries
22. Sage Media
23. For The Record
24. Beaver Lab
25. Bitbots Toys
27. Lilly’s Table
29. Jon Renner
30. C3 Media
31. Carmilla Vampire
32. Christian Arth
33. Conway Anderson
34. Edward Dark
36. Fabmedia Studios
38. Goin Nutty
39. Josh Sender
That is all for this time. Let us know your thoughts about modern single page designs. :)
How about you want to create your own landing page? let’s take a look at it.
Create Your Own Landing Page: The Ultimate Guide For Beginners
If you already know what is a Landing Page and what it is for, I will call you a “Smarty Pants”, but please give me just 58 seconds to explain it to those who don’t really know what it is. So a Lead Capture Page, Lander or as most of us know it, a Landing Page, usually serves one, single, yet very important purpose. It is designed to be one large Call to Action. Usually it’s a single web page and contains very focused and deliberate sales copy with Call to Actions throughout.
Now that you know what a Landing Page is, I’m going to show you how to create, and launch, your own.
What’s more exciting is that you do not need to be a coding guru or an uber cool designer.
It’s just that simple – You and this ultimate guide.
If you have an ebook, video course, software, or just about anything that you want people to know of, then you’ll definitely need a landing page.
This Is Where Your Landing Page Will Live – Hosting
Choosing the right type of hosting can make a massive difference to whether your landing page will look like the way you want it to or not.
Because there are a lot of hosting companies that promise more than they can deliver.
Put simply – Would you still smile if your landing page were offline when your potential customer tried to visit it and who knows, was ready to spend some money on you, your products or your services?
I wouldn’t, and I my guess is neither would you.
“Just like flowers need the right environment to grow, WordPress works best when it’s in a rich hosting environment.” -WordPress.org
So I think it’s safe to say you trust us, otherwise you wouldn’t still be reading would you?
So this is the hosting we have always recommended and still recommend now.
Get up to 50% Discount using our special coupon!
How Your Landing Page will Look – Theme
Even though we all have heard the controversial saying “Content is King”, it’s not the content alone that makes a good impression on potential customers.
Content needs good design, just like you need to breathe, but good design does not always have to be colorful, fancy or flashy.
Often, it’s the minimalistic looking design that is much more effective. A minimalistic design will nearly always put more emphasis on content, which in this case is your sales copy.
It really depends on your situation, you have to think about your audience, your potential customer, your message, your brand and the impression you want to leave.
WordPress once again proves itself, because you don’t have to code theme or entire design from scratch. There is no need to reinvent the wheel.
All you have to do is pick one of 10,000 themes WordPress has and then just customize it or build upon it.
“What separates design from art is that design is meant to be… functional.”
― Cameron Moll
And I’m here to help you out once again.
I have a handful of themes for you to choose from.
But just to let you know – I spent a good amount of time going through a lot of them and I hand picked 4 of them for you. So you can be sure of their quality – I pinky swear!
Apley is the perfect way to show off your amazing application for any mobile device. Thanks to it’s straightforward and easy to use controls, you’ll be able to modify it within minutes after you purchase it.
Change anything you’d like from within the WordPress built-in customizer.
Custom Homepage Items
Align your featured media (video, image, google map or flexslider) to the left, right or full width. Choose a background color or image and add a scroll effect to it. Change the text and header color.
Ready for Anything
You can use Apley to showcase almost anything from a mobile app to icon sets. You can also use the shortcodes plugin to create special homepage items within minutes.
- Fully working blog
- Custom homepage items
- Display or hide a download button
- Display or hide a subscribe form (powered by mailchimp)
- Display or hide a down button
- Align featured media to the left, right or centered
- Add background color or image
- Asign a scrolling effect to background items
- Change accent colors ( the blue accent color on the demo)
- Upload a favicon
- Upload a logo image
- Show social icons in the footer
- Appley From Different Angles
Different Angles Of Apley
This theme features a countdown timer to let your visitors know when your website will be live, social buttons and a simple e-mail opt-in form to allow users to follow your progress.
You can customize basic typography within the theme and there is full support for Google Fonts in the font selector.
The theme includes 5 alternative color styles which you can preview in the demo, and also has styling options for background color and image in the options panel.
Coming Soon is a WordPress theme that can be used in a lot of different ways. In the design settings, they have provided options to choose colors for every aspect of the theme.
You may change fonts, background color or image, content color, product image and so on. So, your imagination is the limit. Be creative and create a unique design for yourself.
The color picker will help you choose colors without having to know exact color codes. Check some of the quick customization we did with this theme.
Use as a Coming Soon page for your website / application / software
Showcase your product with featured image and description on the right. Lots of iPhone App websites are built this way. You can use this theme to create a website just like that.
Showcase your digital product by creating a very quick website by previewing screenshots.
Use this theme as a list builder by enabling Feedburner Subscription Form from the design settings. Any other way you want.
In Case You Are Not Familiar Yet – Installing Themes
First of all, read this article about why you should use WordPress when you are building websites. Hint: 10x increased speed!
Installing a WordPress theme is easy, all you need to do is login to your dashboard and hover your cursor on “Appearance” and a window will slide out, click on “Themes”.
After clicking on “Themes” a new page will appear. By default you will see two themes for the fresh installation. In order to install a new WordPress theme, you need to click on “Install Themes”.
Now you have two options:
- Install via upload
- Install via search
To install by uploading, of course you will need to download the WordPress theme files. After doing so, simply click on Upload.
Next steps will be pretty straightforward:
- after clicking upload, a new page will appear
- click on “choose file” and select your WordPress .zip file
- click “install now”
- followed by “Activate”
Your new WordPress theme is now ready!
Get Your Landing Page Functional – Plugins
Landing pages are more different and than your usual everyday blogs, news or corporate websites.
Therefore, most of the times they do not even need separate plugins to be fully functional.
The most common purpose of a landing page is to collect the emails of potential clients.
You want your visitors to give you their email address to get updates about new products you’re launching, upcoming events or for your email marketing strategy.
And the 2 most popular online email marketing solutions are Aweber and MailChimp.
Here are 2 ways to integrate them in your Landing Page.
Great Landing Page Examples
KissMetrics is a SaaS and Ecommerce Customer Intelligence and it teaches you who your most valuable customers are and how to get more of them.
Do you really need any sort of explanation about this website? I think not!
You can use Shopify to create an online store.
ShipmentApp helps you keep your files right where they belong and helps you turn Dropbox files into beautiful projects anyone can participate in.
Building the Best Landing Page
More of the infographic at Formstack.
Basically, it all boils down to the following:
1. Best Headline You Can Think Of
Think of it like writing a tweet, only shorter and without the hashtags. Your goal is to make people want to read more, make people understand the gist of things in just a sentence – or phrase. Write several headlines and ask people you know about what they think of them, ask both related and disinterested parties to have a broader view of how your headline sounds and looks like.
More than half of the time this will determine whether a visitor will stay for more information or simply just leave!
2. Secondary Headline to Emphasize a Point
This one is optional, but when used well with a great headline you can go to the stars! Think of it as a supporting message, something that adds value to your main headline. They should work in unison, or you can write a totally different thing, provided that it will still pique the interest of the audience.
It can be a preview of what visitors can expect, a quote, or even a call-to-action.
3. A Brief but Concise Description
This section should answer:
- What is this page all about?
- Why should I bother reading?
- Why should I believe you?
- What will I gain if I sign-up?
You don’t want to bore your audience, remember that everyone’s busy! Keep in mind that you need to make your point in under 7 seconds. If you can keep their attention for more than 7 seconds, then you know that you’re headed the right path.
4. One Clear Call-to-Action
You will need to muster all the copywriting skills you have here. Make people click, signup, and feel that irresistible power you’re giving off, that if they act upon what you are offering they will make their lives significantly better!
5. Testimonials and Additional Information
If you are selling a product, promoting an event, or spreading awareness, most likely you already have people who are in the know of what it’s all about. Ask them for their feedback and put their feedback/testimonial on your landing page. Take Amazon as an example. People tend to buy more from sellers with great feedback, from items with great reviews. How should it be different from the one you are promoting?
That’s it, you now have your own landing page :)
Single page websites and landing pages by them selves really capture visitors attention, but we want you to do even better. That’s why, in the next section, we are going to talk about designing a home page that really captivates visitors attention. Ready? Let’s go!
Capture Visitors’ Attention Through Your Home Page
I remember that whenever I planned the design for websites, I always made it a point that the home page is the most attractive page on the site. I made sure that the home page can capture each viewer that visits the site, not only to scan the home page but to enjoy exploring the whole site. The home page is the page that loads when the Home button is clicked and usually the first page you see when a website loads. Therefore, it is one of the most important pages on your site.
Look at the image below. If a person wants to be loved, the first thing he or she will do is to be attractive to get the attention of the opposite sex. Then, they will find a way to search and know that person well. We know that the first thing a person looks for is the physical appearance, that’s why we are doing almost everything just to look attractive. Haven’t you thought that this can also be applied to web design? If a website wants to get the viewers’ attention, then the physical appearance must also be attractive.
Image by: Camille Joyce Pascual
A home page is also like a teaser…
A teaser is one way to advertise, and a homepage advertises too (even a website). A teaser “teases” viewers that drives them to be curious. A homepage should have this characteristic too. Viewers must be curious the first time they see the homepage and make them explore the whole website.
Image by: trolf
In this article, I will be sharing some of my ideas on how can you let your viewers love your site and tease their eyes by making your home page capture viewers’ attention. But let us know first on what should be the characteristics a home page must have.
Must-Have Characteristics of a Homepage
Every pages of a site must attract viewers. This way, they won’t get bored while visiting each page of your site. But the home page must be more attractive than the other pages of the site because this is the first page your viewers will see. In creating your homepage, you may ask the question, “How can I make the home page attractive?” The answer to this question is good designing.
Appropriate and Attractive Color Scheme
Colors capture viewers’ attention, especially if they are used in an appropriate manner. If your expected viewers are children, the best colors you can use are the bright ones but make it pleasing to the eyes. If you are designing for a company, then you should choose colors that can give a professional look.
Image by: Elissa Merola
rapid xhtml is one of the websites with very attractive color scheme and still remains to be appropriate for the website. The dominating color, which is White plus the nice shade of Blue they used blended well on the other elements of the site such ash the header, the orange mascot and navigations of the site. It’s very appropriate, clean and professional in look.
Creatively Designed Header
Headers also attract people. With modern designing, headers are now becoming very dynamic and really creative. Take a look at the example below. There are different kinds of tools gathered together and on the monitor part, there’s a video clip playing. This is a good concept of telling the audience that the website is related to media such as photography, video, audio, etc.
To capture lots of viewers, you need to have a well-designed navigation. Viewers want everything to be spoon fed on your site, so when they see your navigation they should already understand how it works and so.
Carbonica is one good example that has a well-designed navigation. The designer made a nice concept where the buttons are labeled so that people know on what to expect when they clicked a certain button. Like when clicking the motorcycle button, the page that loads is a calculation of a motorcycle’s emission.
Home page must focus on its purpose. For instance, if the website advertises a company’s services then the viewers must instantly know what the website’s purpose is. And that is to advertise the company and its services.
Viewers do not want to waste their time thinking on what could be the site is all about. Instantly, they want to get the information as soon as the page loads. Like when you are searching for a specific book in a library. If you are looking for a PHP for Dummies book, you don’t want to waste your time going around each section, rather you will just go to the Computer section of books to find what you are looking for. That’s what viewers expect on each site, and you can already give them an idea on what your website is with your home page.
Shopify did a great job on putting focus on what they do. From the domain name up to the home page, you can already grasp what services the website advertise.
One thing that viewers expect on a website is how friendly it can be used. It should provide a comfort and fulfilling time when they explore the site. Many people will say that a home page is just a single page, so it is not important if it is easy to use. I tell you, if the viewer finds it hard to explore the home page then they will just press Alt + F4 or Ctrl + T.
What are the criteria of a user-friendly home page?
Your home page and other pages must be fast in loading. Or else, your viewers will get disappointed on your site.
There are two things to focus on the content: language and grammar.
In terms of language, English is the widely used all over the world. It is very annoying for viewers when they cannot understand the language you use. If I were to ask, I prefer English to be the language to be used on a website.
There are some people who tend to get annoyed of wrong grammar and leave. So before posting, be sure that the grammar is correct.
It should be easy to use and understood by your viewers. Especially in the home page, for this is the starting place of your viewers. So if your buttons are not user-friendly, then they might just leave your page and search for a related one.
Custom Toronto is one of the best examples of site that I find very convenient when exploring. The content is well-written and some information teases you to know more of it, while its buttons are not complicated to use.
4. Drives curiosity.
Awhile ago, I have mentioned that the homepage is like a teaser that drives curiosity on your user. I will give you another analogy. The flyers people distribute inside shopping malls offer 70% off on all or certain items. The offer might suit your needs either be it a boutique or a restaurant. If it suits you, you might go. That’s how a home page must work, it should drive the curiosity of your viewers to visit your site and let them get back next time.
Some Tips to Ponder
I have here some tips that can help you create a captivating home page. To give you comfort in reading, I have categorized each tips based on the elements to be found on a home page.
1. Do not be a spoiler
Home pages are intended to tease viewers, and will have the move to explore. Do not spoil them by putting all information they need on the homepage.
Attract to get their attention by:
Choosing a good background. You can use an image, or a graphic for your background or you can also leave it plain and simple. See the websites below as an example.
Putting an appropriate color. Choose a color that represents what you advertise. Just make sure the shade of the color you choose looks professional and pleasing to the eye.
I’ve searched for the meanings of each colors and found these on the internet:
Red: action, confidence, courage, vitality
Pink: love, beauty
Brown: earth, order, convention
Orange: vitality with endurance
Gold: Wealth, prosperity, wisdom
Yellow: wisdom, joy, happiness, intellectual energy
Green: life, nature, fertility, well-being
Blue: youth, spirituality, truth, peace
Purple: Royalty, magic, mystery
Indigo: intuition, meditation, deep contemplation
White: Purity, Cleanliness
Black: Death, earth, stability
Gray: Sorrow, security, maturity
You can use the color that represents you or what you promote on your site, so viewers would know what to expect on the site.
Using call-to-action buttons. Usually, call-to-action buttons are seen on the home page. Call-to-action buttons are a great way to force your viewers to click that button. Take a look at the image below, Wufoo has a great call-to-action buttons by making them noticeable and forceful.
Adding appropriate images and graphics. Images can give your viewers an idea or information regarding your content. You can place images for them to better understand what you wish to convey. Graphics can also represent your content and attracts the eyes of your viewers especially when they are colorful.
Designing your navigations as easy to understand. Navigations are viewers’ way to search on your website. Make sure from the home page up to the last site page your navigation is similar, very easy to use and
Writing a relevant information. Information is very important for viewers, even if this is the last thing they notice. Put a relevant information about what you would like your viewers want to know regarding your site. Make your content as brief and precise as possible for viewers hate to read very long paragraphs.
When creating a content, make sure the following are met:
- Your headline is very catchy.
- Use words that are pleasing to the ears.
- Be creative in choosing words, and make sure people understand the terms you use.
- Your words are spelled correctly.
- The content is grammatically correct.
- Your content is relevant to what you want to express.
Focus on your subject.
These questions can help you to decide on what to put on your home page:
- What is your purpose?
- Who you are?
- What are your goals?
- What do you want to convey?
Just focus on what you intend to show and convey on your home page.
There you go. Creating a catchy home page is not that difficult. You just need to:
- Know the basic of designing.
- Be appropriate.
- Be creative to be attractive yet remains to look professional.
- Focus on what your website is.
- Do not spoil them through your home page. Tease.
I hope this article can help you a lot in creating your home page to attract your viewers. Feel free to put some comments below :)
In case you are just about to design a website for a restaurant, we’ve got you covered for that. Just keep on reading trough the next section.
Ultimate Restaurant Website Design Guide To Make People Forget About Diet Constantly
I will present with every possible details and resources that a webmaster would require while kicking-off the next restaurant website design. So, gear up!
Why are Restaurant Websites Scary?
Who would want to see the photograph of a chef on the home page of a restaurant website? Are you, as a customer, interested to know how the staff of a restaurant looks like? Of course not! We jump onto a restaurant website to find out the menu of the restaurant, get an idea of the ambiance of that restaurant, the prices, location and similar features. Who wants to know if the chef of a restaurant can give good autographs?
Visitors can tolerate a website that has not been designed for over 5 years if the current layout is already helping them find out what they are looking for.
Facts (that should be strictly ignored) that a usual restaurant website shouts out loud to its visitors:
- How the chef sniffs the oil.
- How they hire their staff.
- How the surroundings of the restaurant better than the restaurant.
- How the manager is the most friendly human being on this planet.
- Hot models (tagged as customers) busy stuffing food into each other’s faces.
- A letter from the owner that no one ever wants to read.
- Address or phone number is present in flash format so you cannot copy it.
- A soothing background music on the website that plays forever usually forcing the visitor to fall asleep.
Facts (that should be pushed on the website) that are usually ignored on restaurant websites:
- The menu in detail.
- The price.
- Ongoing offers.
- Original (and latest) photographs.
- The location (with a link to Google maps).
- The timings.
- Parking information.
- Advance booking options (that works).
Do you understand what I want you to understand? Restaurant websites try their best to look “cool” and in between all this they tend to forget whatever their website visitors are looking for.
Website visitors look for information NOT for flash. They want to know how your restaurant looks like not how your chef looks like. Show some sense, please!
To start with I will let the numbers do the talking. In no time you will understand how restaurants are leveraging on the advantages of a website and how there is still more room for improvement:
- Founder of Happy Tables reveals the importance of mobile optimization and the percentage of visits that restaurant websites get from such mobile devices.
- According to the Direct Marketing Association, email marketing delivers a $51.45 return on investment (ROI) for every marketing dollar spent.
- Consumers from North East and Pacific Coast between the age of 25 to 45 are said to take lead in researching a restaurant online before opting for the same.
- A research done by Palore explains the percentage of restaurants that have a website as per various major cities. Boston with 33% leads the chart.
- Over one third consumers prefer to read online reviews before opting for a restaurant.
- Around 50% of consumers use search engine to find a restaurant. (via AIS Media)
- Around one third of the consumers want pricing to be precisely correct on restaurant websites. (via )
Your Own Jaw Dropping Design!
Enough text to prove the fact that the restaurant website designs of today are lacking that spark which will twinkle in the eyes of the visitor the moment the website opens. Now, I will list down some of the imperative pointers that must be taken care of while working on a restaurant website design. Read these carefully. These pointers can make or break your restaurant website design!
- Turn OFF the background music – Oh please! I know your taste in music is simply awesome but do you realize that it might not match with the rest of your visitors? Moreover, a customer has the privilege to request music change but the same visitor when on a website might not enjoy that privilege. Please don’t plan a turn off for your visitors.
- Say NO to Flash – I am in no mood to discuss the future of Flash but I guess we are all on the same page when it comes to the various issues that are the reason why flash-based websites don’t work? Flash might be awesome but not when it crosses that “subtle” line.
- No PDF menus please – Why do you even need to upload a PDF menu? Users come to your website for instant information. Asking them to download a 20 MB PDF menu is simply kicking them off. If you really want to upload your PDF menu then leave an option for users. They will check the web-based menu and if they require a copy then they can download the PDF version. Also, please make sure that the size of the PDF file is optimized. Most of your customers might still be on limited dial-up connections. Here are some amazing menu designs for your next restaurant website.
- Reduce the required number of clicks – Do you really think that your visitors have the time to click five times before they are delivered with the information that they are looking for? Really? If the answer was yes then you haven’t yet understood your readers, seriously!
- Optimize the design for mobile – You will be shocked to know that half of your website visitors might be visiting your website using their smartphone. Have you ever tried to visit your own website using various phones? You will be shocked (again) to see how broken your designs are when viewed on phone browsers. Do something! Get a glossy looking mobile version for your website.
- Display original ambiance in your photographs – Imagine if the first impression of your restaurant’s visitor will be – This is not like they show in their photographs. Do you want your visitors to feel cheated? Get some real photographs that display the real ambiance of your restaurant. And, if the photographs display a dull ambiance then there is something wrong with your ambiance! Check the restaurant website photography tutorial at DPS.
- Don’t make the food look delicious in photographs when it actually isn’t – This is the most important pointer. I have ordered food by the looks of it and later on felt cheated because the delivered item never looked like it was shown in photographs. Why do you want the food to look attractive when it really isn’t? Get some real photographs, will you? Here are some food photography tips for you.
- Clearly display payment options – It will be easy for your customers if you tell them in advance if you do or do not (which is rare) accept credit cards. Let them know about every possible payment option that you can boast of but don’t fake it, please!
- Restaurant timings must be displayed – Let the visitors know what all are the restaurant and for how many hours can you stretch after the closing time.
- Smoking area availability – Those who smoke can’t live without one. If you have a smoking area then do let your website visitors know that you have one.
- Drinks permitted or not – Your visitors must be made well aware if you allow alcohol or not.
- Link to Google Maps and smartly use Google Places – From your contact section a link to Google Maps must be displayed. Let this be more easily accessible in your mobile versions as mobile visitors are the ones who look for instant location information.
- Display your social media buttons – Let your visitors RT your appetizing menu and LIKE your offers. Why miss out on the social media reach?
- SEO your website but don’t overdo it – Search Engine Optimization is important for every website. Make sure that your restaurant website design is search engine friendly but make sure that you don’t overdo the same and incur Google’s penalty.
- Show off the reviews (and stars) received on various websites – Users leave star based ratings on various websites for different restaurants. Keep a track of such websites and if you find that you have been rated positively then don’t forget to show off the same on your restaurant website. Make sure that you give preference to the likes of Amazon.
NOTE – If you cover all these pointers in your next restaurant website design then you really are on a roll. Try them once and tell me if the list fails you.
Single Page Restaurants Designs
Single page website designs have really been doing rounds lately and the restaurant industry is untouched. Here, I will list down seven amazing single page restaurant website designs for your inspiration. Explore the option of single page website designs.
Restaurant Website Builders
Now that we done a lot of talking about restaurant websites and we know who are the best in business, I guess it is time to take the first step into this world of restaurant website design. So, here I have collected some of the restaurant website builder tools and applications that will make your first restaurant website design caravan exciting. And, be rest assured that the end results will be jaw dropping if you stick around without losing hope.
Although there are hundreds of website builders out there but why use any website builder when you have niche specific restaurant website design builders at your service?
Gear up and let us know if you are using any other service. We love to explore ..
- Wix is a popular free website builder, which also has nice templates for pubs and bars. Check them out – it’s super easy to get started there.
- Let’s Eat – Let’s Eat is a free restaurant website design builder which targets restaurant owners who cannot (or don’t want to) afford a professional restaurant website designer. The free version will be ad-supported while the pro version will come with a nominal fee which can be afforded by any restaurant owner. The application will take you through a series of steps and will collect a lot of information before they come up with a basic looking design for your restaurant website. The app even creates a page for customers to reserve seats in advance. adasda
- Site Savor – Site Savor makes it super easy for anyone to come up with a restaurant website design. In no time you will be done with your restaurant website design which will bask in glory of various templates that are loaded in Site Savor archives. Go, have some fun building your own restaurant website.
- Bistro Square – Bistro Square helps you come up with your own website design in no time. It won’t test your programming skills and will push in an extra calendar feature for special events. Features like online coupon builder, mobile version of your website and multiple templates to choose from helps Bistro Square stand out from the rest.
- Honey Sites – The cheap restaurant website design builder for those who want plush websites. One might find the pricing of this service a bit over the top but with the kind of service and their own design, I guess they deserve one chance. After all, honey can make any food divine.
For more website builder visit our article Easiest Website Builders with detailed reviews.
Trough this article you have seen some great single page website examples, how to build a great homepage and a guide on building a great restaurant website. Hopefully you have enjoyed the article and learn something new. Oh and of course you have gotten your inspiration. Until next time, good luck!