To begin with, think about why you decided to create a website layout yourself. This work requires versatile knowledge of a person in the field of IT and design, analytical and creative thinking at the same time. It also requires a certain amount of your time. Okay, there are 4 reasons why you might want to do this. If you have a different one – write in the comments, I’ll add more.
Creating website layouts: entertainment for a select few
Reason #1. Interest in developing website layouts
Your interests are very specific? We’re not judging anyone here. We ourselves became interested in it once, so we started doing it! Besides, the urge to learn is our hallmark. I commend your curiosity.
Reason #2. Designing a website layout as a form of income
If you want to become a web designer in the future, you have to start somewhere, namely with the elementary layout of a website page. A quick result of your work motivates you more than anything else. Fortunately, in this article I offer only blitz methods of creating a layout.
By the way, web designer jobs are no joke. Right here below, I’ll just leave a chart of salaries based on seniority (based on DOU data for May-June 2016). Not hinting at anything. Just covert hunkering down.
Reason #3. Drawing up the TOR for the designer to develop the layout of the site
Often non-designers are faced with the need to show the layout of a website – sometimes just to illustrate their idea, but sometimes to reinforce the TOR. Of course, this is not necessary and a competent designer will understand your idea and even do better than you expect. However, if you know exactly what you want, it is better to show it rather than tell it.
At KOLORO you can order a website layout and you will get exactly what you expect. How do we do that? We are subtle psychologists.
Reason #4. You urgently need to draw the layout of the site, and you do not even know what it is
By the way, a site layout is a graphical image of a representation of a future site. If you are given the task to quickly show the layout of the site (at least some), then you need to do something about it. This was exactly my reason for searching for the best way to develop a website design layout. As a result, I chose to work in Photoshop, but I already had the skills to use it.
Website layout development: stages
Before creating the layout of the site you will have to think about the structure of the site, make a prototype and choose a color scheme. About all of this in order.
Step 1: structure of the website layout
Be sure to plan the architecture of the site in advance – what and where it will lead and how the elements will be interconnected. You can do it in your head, on paper or use MindMap to build the structure. Building MindMap in designing site will help you decide how many pages to draw. You will have a detailed idea of the project as a whole. How do you do that? You can use the online tools MindMup or Bubblus.
It’s also convenient to use the Coggle app, which you can connect to Google Drive.
I like Coggle because the mind map is always at hand, it’s convenient to share with colleagues, and the colors of the interface elements are well chosen. Plus, the right mouse button works, which allows for good customization of the map. I got this structure for the main page of the site.
In the first stage of layout design, a mind-map of the site is created
Step 2: Creating a prototype site
Next, you can immediately start drawing the layout of the site in photoshop, but, even if doing the layout out of idle curiosity, you should first draw a prototype of the site. In step-by-step development, prototyping is an integral step that strengthens the mental health of the web designer. When creating a prototype, the key blocks of the future site are outlined (header, slider, buttons, contacts, material structure, etc.). This allows you to significantly save time at the stage of rendering the layout because you can see the approximate result and painlessly make changes.
An example of a website structure: here.
Tired? Make life easier and order website development from KOLORO. We will take into account your wishes and you will get exactly what you wanted.
Creating a prototype website online
I usually use two of the most popular online tools for prototyping a website: Moqups and Mockflow. Both offer the option to create prototypes for free, but with limited functionality. Rates for a first website start at $13/month. (10 projects, 1 GB), and for the second – from $14/month. (unlimited projects + 25 GB in the cloud). Everyone also recommends Mockingbird. And I will recommend it, but only out of respect for Eminem, because here 3 projects will cost $12/month, and there are fewer free tools.
Now for a personal impression. Moqups is more convenient and intuitive even from the first visit. There are a lot of ready-made blocks and icons here – just what you need to quickly pass the prototyping stage. Besides, it is convenient to center elements relative to the middle of the page or other elements. A little hindered by the limitation of 300 objects for a page in free mode – for the layout of a single-page site may be a little too small. It’s possible to insert elements from Bootstrap framework. Mockflow allows you to do a little less, and it takes a couple of minutes to figure out and get used to it, but the larger amount of disk space may appeal to some.
Site prototypes in Moqups and Mockflow
How to prototype a future site?
Let’s take a look at Moqups as an example of how you can prototype a page of text for a blog.
Step 1. Add a header (you can change the text).
Step 2. Add a block for a picture and a caption (article title). With the help of styles you can conveniently change the size, font and other formatting of the text.
Step 3. Add text and set the column width. All blocks are conveniently centered relative to the middle of the page.
Step 4: The text should be broken up with a picture. And the column width is too big, 500px would be better. Fortunately, you can change it quickly. Big plus: selected elements are reduced relative to each other and my block with a picture was reduced too.
Step 5: Add a sidebar (side column), it will be easy here. Let’s place a search field and a block for subscribing to the newsletter (with an attractive picture and a bright button).
Step 6. Let’s assume that our article turned out to be so small. You can also add a poll and rating of the article. We have a neat prototype of a page for a blog. Add other elements to your taste.
Prototyping allows you to see the scale of the page and make decisions about certain blocks. By the way, you can use these tools to make prototypes for different devices. For example, if you try hard enough, you can make something like this. However, the prototype is usually limited to a b/w version.
Prototype smartphone application
Step 3: Make a beautiful website layout: choose a color
The perception of the site and brand by users depends on the successful choice of colors. I do not advise you to rely on your own strength – it can take hours to find the right shade. Therefore, I recommend using ready-made color palettes for the web. Google recently released a detailed guide to successful colors for material design (a trend in web design). These colors blend harmoniously and you can be sure of their appeal. With Materialpalette, you can successfully pick two colors – main and accent – and see how they will look in the interface. A bit more colors on Material Design Colors.
Have you visualized the site? Have you made a prototype? Have you chosen the colors? Now you can move on to creating the layout itself. I offer you a few ways.
Attention! Here will not be advice on how to make the layout of the site in Photoshop – this is a topic for a separate article, here are more simple ways.
Method No. 1: Cutting the layout from a website template
or existing sites
This method will work for you if you want to:
- understand the basic tools of Photoshop;
- find different references for your future site and put them together;
- feel like a designer for a couple hours;
- Demonstrate to a web designer or agency (like us 🙂 the most detailed vision of the site;
- To support the TOR for the development of the site not only “here are the call-to-action buttons, and here is the divider and lidomagnet”.
The pros of this approach to layout design:
- you can avoid common mistakes by looking at quality websites;
- you’ll know what not to do to make it good;
- Web design performers will be clear about what you expect;
- it is very fast – in a few hours you will make layouts for all pages of the site.
Minuses:
- you’ll never fully understand what web design is;
- some references you find, the layout designer will not implement without changing other parts of the site.
How it’s done
The easiest and fastest way to make the layout of the site – choose a template for a particular CMS and remake it for yourself. Therefore, first you need to determine the CMS, which will greatly simplify the development of the site. However, note that the design of the site will be limited to those elements that are in the template. Of course, you will be able to change the colors, but some elements of the interface are already ready and you can not change them.
! If you will make a “stew” of different sites, do not forget somewhere in a notebook pencil pencil write the sources. This will simplify further design development and layout layout.
Site layouts for WordPress
The most popular CMS is WordPress. For example, here you will find many modern templates for this CMS. Why? A website on a template accelerates the launch of the project in times, but it will not be unique. Although, if you use original illustrations, images and creative approach – even a template layout can be remade beyond recognition. The main advantage is that your site is guaranteed to be adaptive and generally beautiful in terms of display on different devices.
Browse through the different templates and choose the one you like best. I did some more searching on Envato Market and found the Dalton template that I liked the most. Going to the demo version of the template, you will immediately see the concept of the corporate website. By clicking on the menu, you can see in more detail what features the template has, how different pages will look like. It is best to give it half an hour and properly understand what is in the template.
What’s next? Sizing the website layout, cutting and gluing
When you’ve gotten comfortable with the template, you can start slicing it. It’s great if your screen resolution is 1920px or more – this will allow you to simply take screenshots of parts of the site and connect them in the editor. Work with the layout starts with the header, then the different blocks (body), and finally the basement (footer).
You’ll need:
- a handy tool to capture a selected area (screen capture tool), I use Lightshot – it offers to save the image to a separate file or copies it to the clipboard;
- Photoshop – for gluing together sliced parts of images.
Stages of creating a layout for a website based on a template
Step 1. Choosing the width of the site layout
Decide which page you will do first. Don’t start with the main page – it’s better to leave it for last, as it’s the most important page on the site and it’s better to get a bit of a head start first. In the example, I’ll be doing the “About Us” page – this will be interesting information about the company and its employees. I already have a prototype of the site, so I know what I’m doing. By the way, how is your prototype?
Open Photoshop and set the width of the site layout to 1920px. This will be enough to see how the site will look in the browser. If you have a smaller resolution – set the width that the monitor allows. Don’t worry about the height yet – it’s hard to guess here and you’ll have to stretch/narrow the area anyway.
Step 2 . Continue creating the layout of the website in Photoshop
Select such a hat in the template that you like. Cut it out using a convenient tool, open a document in Photoshop and paste it there (Ctrl+V). Use the move tool (V) to place the hat at the top. I like the topbar hat with the company contact information.
Step 2.A. Do a proper website layout right away
Now you have two ways – modify the text in the image or write the accompanying text in a text file. Which is more convenient? It all depends on your goals. I can tell you from personal experience that it’s better to do it in the layout, choosing the font and sizes right away. This is safer and it will be WYSIWYG in action (What You See Is What You Get).
Step 3. Let’s go to success
Fill your layout with different blocks and edit them according to your needs. You don’t have to play with colors at this stage if you don’t have Photoshop skills. To increase the height of the layout, use the Frame tool (C).
What we got
After a couple minutes of thinking, cutting and pasting together the pieces I liked best, I had a structured layout for the “About Us” page
What not to forget
- Name each layer with a block adequately, according to what is there. Otherwise, you will get completely lost.
- When selecting a font, you should choose a different size for headings and body text. It is better to use the Google Fonts web font library. Don’t forget to filter out Cyrillic fonts.
Method No. 2: Creating a website layout in Photoshop
Method #2 will work for you if:
- you don’t have Photoshop (your conscience doesn’t allow it or you don’t have disk space) or you haven’t learned how to use it yet;
- you want to familiarize yourself with HTML code and CSS styles without interfering with the markup;
- you need an interactive website layout.
I advise you to use Macaw, a great free tool for creating layouts. To work with the program, you need to download and install it – a matter of a couple of minutes. In the program you can practically layout in visual mode, because you can immediately publish it and see the HTML code and CSS. A little more about the work of the program. Macaw has a significant disadvantage – it creates a non-adaptive web page. How to deal with it? Here you will need skills of a layout designer to connect the framework (for example, if you make the layout of the site under Bootstrap). However, if you just need to show a working layout to your colleagues, Macaw will be perfect.
This is what a non-adaptive template looks like on different devices. I want to cry
To get started, run the program on your computer. You are presented with a blank document with a page width of 1200px with a grid layout of the site. By default, there is a padding between columns, so there will be a distance between the created elements. You will only have to draw within the columns, because if you go beyond them, the blocks will appear under each other. So keep an eye on them.
You can set the width of the columns, their number and the distance between them. If you want the elements to “stick” to each other, set 100% column width and remove the indentation between them. Why do you need this grid? When HTML layout of the site layout will be easier to make an adaptive template, because modern frameworks use exactly 12-column grid.
You can change the width of the workspace by pulling it to the right, or by setting the size yourself
What’s next? Layout
Customize the workspace as you like and let’s get to work. I will create the same page that I cut from the Dalton template.
Step 1.
First of all, you need to create a header. This will be a container with a height of 100px and a bottom border that is 1px thick.
Inside another container will be the logo, and inside the next container will be the menu. You don’t need to create separate blocks for individual menu items, just set an acceptable word spacing.
Step 2
With the hat ready, you can proceed to the rest of the blocks. In the next block I will have a background, which needs to be uploaded separately.
Step 3. Creating an interactive website layout
I continue dragging blocks and inserting text into them. I create a button using a special tool “Button” (logic!). Macaw allows you to create an interactive layout with different button states and the ability to switch between pages.
Note the following highlighted elements. They help you switch between different blocks and organize them. For example, text should be in a specific container, not just hanging around.
If you click File -> Publish, you will get a finished page, where you can view the HTML code and CSS in different tabs. This is very convenient if you want to see what the markup looks like.
What we got
It turned out like this. Here for comparison, on the left are glued pieces of the edited template, on the right is the layout created in Macaw. A big plus of the program – you can insert buttons, add links to them, create different pages and navigate between them. Just don’t forget about the hierarchy of containers and don’t get lost in them.
Features of this way of creating the layout of the site:
- to understand the subtleties of the program, you need to spend extra time;
- even when you get into the program, you still sometimes don’t understand why it behaves the way it does and not the other way around;
- You can forget about adaptability if you don’t do it yourself;
- it’s really convenient to create a layout and even to understand a little bit about the layout – you can see how elements interact and generally what the structure is like;
- things like “width: 16.6666666666%” may show up in the styles, which you’ll need to fix; you just need to realize that it’s WYSIWG here, not more.
Method #3. Online tool for creating layouts
If you’re looking for an option on how to create a website layout in an app with the simplest and most intuitive interface possible, this method I’ve prepared especially for you.
A handy tool for creating infographics that I’ve been using for a long time is the Creately service. There are dozens and hundreds of components for creating UI design for different devices (more for mobile). You will definitely like it, I’ll show you some of them.
It’s also easy to edit elements, add text (and even make buttons with links!). In general, in just a couple of minutes I already had the same layout as in Macaw, only neater. However, you can’t make a layout like this highly interactive. There will be no steps to this method as the service is well intuitive. On the screen I tried to maximize the possibilities of the service.
Creately service features
What I like about Creately is that:
- you can select several objects, distribute and align them relative to each other;
- If you want to share your layout with a friend, you can export the image in any convenient format;
- there are ready-made user interface elements (e.g. browser), which allows for a better understanding of the project.
That was it. These were the ways I came to at one stage or another of creative development. If you found usefulness in this material – we are happy.
P.S. This article is introductory and will not allow you to become a web designer. For serious knowledge you will have to do a lot more digging in the Internet.
