In recent years, flat design has become increasingly popular and continues to dominate the world of web and graphic design.
What is flat design? In essence, flat design is focused on usability and lack of shadows, bevels, gradients, and other aesthetic elements that take the focus away from what really matters: your content. It’s usually characterized by large and bold typography, line icons, and solid color backgrounds using bright colors.
Flat design was made popular first by Microsoft as they redesigned their entire user interface in Windows 8. It was quickly adopted by Google and Apple, and slowly became mainstream, and is now used in numerous web design templates.
In this tutorial, you'll learn how to create a flat website design of your own quickly using a flat-style WordPress theme. But first, a few awesome examples of flat site design:
5 Great Examples of Flat Website Designs
Before we dive deeper in this tutorial, here are five examples of flat websites to inspire you for your next project:
1. Blocklevel
Blocklevel is a digital design agency from the Netherlands. Their website features a flat website design with a dark background and pops of vivid colors all over their homepage. The site also has plenty of white space around the elements giving the whole site a clean look. Because of this, the site is easy to navigate and visitors are instantly drawn to different sections on the homepage.
2. Made By Fibb
Made by Fibb is another agency example that’s using flat design. You’ll immediately notice the bright yellow color, a navigation menu that’s been pushed aside so it doesn’t clutter up the rest of the page, and bold typography that’s easy to read.
3. Playground Inc.
Playground Inc. opted for a bright red background paired with white typography in their header and a white background with a black and bold font. The site is also using flat style website design with animated icons which are perfect attention grabbers.
4. Geckoboard
Geckoboard’s specialty is creating custom dashboards so business owners and team managers can track important metrics. Their website uses a dark gray background with pops of vivid green and elegant typography in a flat design style.
5. TriplAgent
Travel guide agency TriplAgent opted for a flat style design with purple color and gorgeous photography to illustrate various guides they have on their site. The main menu has been pushed off to the side and white typography paired with ghost buttons make calls to action easy to notice.
How to Use a Flat WordPress Theme Design to Create Your Site
If you want to create a modern website for your business, portfolio, or blog, opting for a flat theme is a great choice. In today’s post, we’ll show you how to use one of our flat WordPress website templates to create a beautiful website that’s sure to attract the attention of your visitors.
I’ll be using the Kirion theme which is a multipurpose WordPress website template with a stylish flat design. Thanks to its versatility, it can be used for business sites as well as portfolio sites. It offers several pre-made demos, an easy-to-use page builder, and plenty of customization options to make it truly yours.
Preparation: Before You Get Started on Your Website Design
Before you start building your flat website design, it’s necessary to choose a domain name and purchase it, as well as get a pro hosting plan that will house all your website files.
It’s also a good idea to pick a WordPress theme and prepare the text and images that will go on your website. This will make it easy to simply copy and paste your content, rather than writing it from scratch as you build your site.
1. Purchase Your Domain Name
Choosing the right domain name is certainly not easy. However, there are a few things that you should keep in mind that will help you narrow down your choices.
Think about the purpose of your site. Is it a business site for an already established company? Are you creating a personal portfolio? Perhaps you want to start your own blog?
For business sites, it’s a good idea to stick with your business name, while personal portfolio owners can usually go with their own name. If you’re a blogger, consider the topics of your blog and choose a name that’s related to what you’ll be writing about. This will make it easy for readers to know what they can expect in terms of content.
Whenever possible, try to go with a .COM extension and remember to keep the name easy to spell and easy to pronounce.
2. Get a Professional Website Hosting Plan
You’ll need to choose a hosting company so you can install WordPress onto their server and make your site available to visitors. There are plenty of hosting companies out there and WordPress even has recommendations for reputable hosts.
You can also consider Envato Hosted. Envato Hosted offers premium managed WordPress hosting for $19USD (+ applicable taxes) per month along with your chosen theme setup, and premium support.
The plan also includes:
- Up to 100,000 monthly visits of incoming traffic, 5GB of disk space, and 100GB of monthly bandwidth.
- Daily backups, server security, and site monitoring, as well as ongoing support from our team of WordPress experts.
3. Grab a Premium WordPress Theme
The next step is to choose and purchase a theme for your site. As mentioned earlier, there are plenty of flat WordPress themes and the best part about choosing a premium WP theme is its guaranteed support from the author. You can also be sure that the theme will be updated on a regular basis so you won’t be stuck with an outdated website theme design.
4. Prep Your Content & Design Elements
The last preparation step is to write out the content and gather all the images and visual assets such as your logo, your favicon, any background images or patterns and have them somewhere easily accessible.
How to Create Your Flat Website With WordPress
Now that you have your domain name, a hosting plan, a pro theme, and all your content ready, it’s time to get started with making your website design. You’ll need to install WordPress, the theme, required plugins, setup your pages, and customize your site. Let’s begin!
1. Install WordPress
When you purchase your hosting plans, the hosting provider will send you a welcome email containing the information about your account. You’ll need the username and password they provided you with so you can log into your account dashboard. Once logged in, scroll to the Website or Scripts section and look for WordPress. Select it and then follow the steps to install WordPress on your site.
In most cases, you’ll need to enter your site title and description, set your desired username and password, as well as fill out your email address. After you have filled out all the information, click the Install button.
The install process usually takes a couple of minutes. After that, you’ll see a message that WordPress has been installed. To login to your dashboard go to www.yoursitename.com/wp-admin and input the username and password you created during installation.
2. Upload Your WordPress Theme
Now that you have logged into your dashboard, you need to install the flat WordPress theme you purchased. Go to Appearance > Themes > Add new. Then, click Upload Theme.
After that, find the zipped folder that contains the WP theme’s files and upload it. Once the installation is done, click Activate.
If you’re using the Kirion theme like in this tutorial, you’ll need to install the parent theme, LayersWP which can be downloaded for free and you don’t need to activate it. Simply upload LayersWP, then upload the Kirion WordPress theme, and activate it.
3. Install the Required WordPress Plugins
Your next step is to install any required plugins. You’ll notice a notification in your dashboard telling you which plugins are required, along with a link taking you directly to the installation screen.
Select all the plugins and choose Install from the dropdown menu. When the plugins have been installed, go to Plugins > All Plugins and select Inactive plugins then choose Activate from the dropdown menu.
How to Customize Your New Flat Website
Now that the WordPress theme design and the plugins have been installed and activated, you can begin setting up your website pages and customizing colors, fonts, and more. In the majority of cases, the best way to speed up your theme setup time and make it easy to edit the contents is to import the demo content.
If you want to make use of the demo content, then you’ll need to go to your dashboard and find the submenu called Tools > Import. There, find WordPress Importer, install it, and then click Run Importer. Usually, your theme folder will have a subfolder called Demo Import or Sample Data. Use the XML files in one of those folders to import all the posts, pages, layouts, and images.
Setting Up Website Pages With the Kirion Theme
Alternatively, if you’re using the Kirion theme, go to Layers > Add New Page. As you can see from the screenshot below, Kirion includes several page templates that you can use to build your website. I chose the Kirion Home Layout One for the homepage.
Enter the page name and then click proceed to Customizer. Your page will instantly be created and you will be redirected to the Customizer screen.
When the Customizer loads, you can see all the available options. You can edit the layout by clicking on the Edit layout option. The editor is rather straightforward and easy to use. All you have to do is select the desired element and replace the content with your own. You can also edit the background, upload your own featured images, replace slider images, and much more.
To create and edit additional pages, go to Layers > Add New Page and choose the layout you’d like to work with.
Editing Visual Appearance and Menus
If you want to edit the styles, select Site Settings. Here, you can edit colors, fonts, upload your own logo, and more.
Finally, you’ll need to create a menu for your site. In the Customizer, click on Menus > Main Menu. First, choose a location for the menu. I’ve chosen header menu. Then, click on Add Items. Add all the pages you’ve created and then save the menu.
5 Tutorial & Courses to Help You Master Flat Design
If you’d like to learn more about flat design and apply its principles to your site, we’ve gathered a few tutorials and courses to help you get started:
1. 10 Top Tips on Creating Flat Design Graphics
This tutorial features the best tips on creating graphics that will work well with any flat type website. You’ll learn a bit about flat design history as well as how to create simple yet impactful icons, how to use colors, and more.
2. Master Flat Design - Envato Tuts+ Course
This course is an in-depth tour of the flat aesthetic, and how to achieve it in your own designs. You’ll learn how to set up your Photoshop file, create a layout for a flat website and design all the elements that will be used such as icons, forms, menus, and more.
3. How to Design Flat Icons in Affinity Designer
If you like working with Affinity Designer, you’ll love this course. You will learn all about the process of creating flat vector icons; useful tips and tricks for working with basic geometric shapes, modifying them, and using various operations to combine the shapes. The course also covers how to align and arrange the objects and the main functions of the program.
4. Flat UI Design and Development
Try this course if you plan on creating UI design elements. The course covers how to create menus, buttons, tabs, video players, date pickers, and other user interface elements using flat design style.
5. Flat Icon Design - Envato Tuts+ Course
This course covers both Adobe Photoshop and Adobe Illustrator, two powerful programs considered the industry standard when it comes to design. In the course, you’ll learn how to create flat icon designs, how to export them, and how to monetize your creative efforts.
Get Started Making Your Flat Website Today
Creating a flat website has never been easier thanks to WordPress and beautiful, premium, high-quality flat themes. Start working on your flat website today by browsing our collection of flat WordPress themes. Don’t forget to check out Envato Hosted if you need an affordable and reliable host for your business or portfolio website.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
