First, think about why you decided to create a website layout yourself. This work requires versatile knowledge from a person in the field of IT and design , analytical and creative thinking at the same time. And also some part of your time. Okay, there are 4 reasons why you might need this. If yours is different, write in the comments, I will add it.
Reason # 1. Interest in developing site layouts
Are your interests very specific? We are not judging anyone here . Once upon a time it became interesting for ourselves, and they began to do it! In addition, the craving for knowledge is our hallmark. I praise your curiosity.
Reason # 2. Website layout development as a form of earnings
If you want to become a web designer in the future, you have to start somewhere, namely with a basic layout of a website page. The quick result of your work motivates like nothing else. Fortunately, this article only offers blitz ways to create a layout .
By the way, the job of a web designer is not a joke. Here below I’ll just leave the salary schedule depending on the length of service (according to DOU data for May-June 2016). I’m not hinting at anything. Just hidden hunting.
Reason # 3. Drawing up a technical assignment for the development of a website layout for a designer
Often, non-designers are faced with the need to show the layout of the website – sometimes just to illustrate their idea, but sometimes to reinforce the technical specification. Of course, this is not necessary, and a competent designer will understand your idea himself and will even do better than you expect. However, if you know exactly what you want, it is better to show it, not tell it.
In KOLORO you can order a website layout and you will get exactly what you expect . How can we do this? We are subtle psychologists.
Reason # 4. You urgently need to draw a website layout, but you don’t even know what it is
By the way, the site layout is a graphic representation of the future site. If you are tasked with quickly showing a site layout (at least some), then you need to do something about it. This was my reason for looking for the best way to go about designing a site design layout . As a result, I chose to work in Photoshop, but I already had the skills to use it.
Before creating a website layout, you will have to think over the structure of the site, make a prototype and choose a color scheme. All this in order.
Phase 1: Site Layout Structure
Be sure to plan in advance the architecture of the site – what and where it will lead and how the elements will be interconnected. You can do this in your head, on paper, or use MindMap to build the structure. Building a MindMap when designing a site will help you determine the number of pages to draw. You will have a detailed understanding of the project as a whole. How to do it? 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 is convenient to share it with colleagues, and the colors of the interface elements are well chosen here. In addition, the right mouse button works, which allows you to customize the map well. I got the following structure for the main page of the site.
At the first stage of designing the layout, a mind-map of the site is created
Stage 2: Prototyping the site
Next, you can immediately start drawing a site layout in Photoshop, but even if you make a layout out of idle curiosity, you should first draw a site prototype. In step-by-step development, prototyping is an essential step that improves the mental health of a 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, since you can see the approximate result and make changes painlessly.
Example of site 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.
Website prototyping online
I usually use two of the most popular online site prototyping tools: Moqups and Mockflow. In both cases, it is possible to create prototypes for free, but with limited functionality. First site rates start at $ 13 / mo. (10 projects, 1 GB), and for the second – from $ 14 / month. (unlimited projects + 25 GB in the cloud). Everyone else recommends Mockingbird. And I will recommend, but only out of respect for Eminem, because here 3 projects will cost you $ 12 / month, and there are fewer free tools.
Now about a personal impression. Moqups is more convenient and intuitive even from the first visit. There are many ready-made blocks and icons here – just what you need to quickly go through the prototyping stage. In addition, it is convenient to center elements relative to the middle of the page or other elements. The limitation of 300 objects for a page in free mode is a little hindering – for a one-page site layout it may not be enough. It is possible to insert elements from the Bootstrap workframe. Mockflow allows you to do a little less, and it takes a couple of minutes to figure it out and get used to it, but more disk space can attract someone.
Site prototypes in Moqups and Mockflow
How to prototype a future site?
Let’s look at Moqups as an example of how you can prototype a text page for a blog.
Step 1. Add a header (the text can be changed).
Step 2. Add a block for the picture and an inscription (article title). Styles allow you to conveniently change the size, font, and other formatting of text.
Step 3. Add text and set the width of the column. 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 large, 500px would be better. Fortunately, you can quickly change it. A big plus: the selected elements shrink relative to each other and my block with the picture shrunk too.
Step 5. Add a sidebar (side column), it will be easy here. We will place a search field and a newsletter subscription block (with an attractive picture and a bright button).
Step 6. Let’s say our article is so small. You can also add a poll and a rating articles. The result is a neat prototype for a blog page. Add other elements to your liking.
Prototyping allows you to see the scale of the page and make decisions about certain blocks. By the way, with the help of these tools you can make prototypes for different devices. For example, if you try, you get something like this. However, usually the prototype is limited to b / w execution.
Smartphone app prototype
Stage 3: Making a beautiful website layout: choosing a color
The perception of the site and the brand by users depends on the successful choice of colors. I do not advise you to rely on yourself – choosing the right shade can take hours. Therefore, I recommend using ready-made color palettes for the web. Google recently released an in-depth guide to color goodness for material design (a web design trend). These colors blend harmoniously and you can be sure of their attractiveness. Using Materialpalette, you can successfully choose two colors – the main one and the accent, and also see how they will look in the interface. A bit more colors in Material Design Colors.
Submit your site? Did you make a prototype? Have you chosen colors? Now you can move on to creating the layout itself. Here are a few ways for you.
Attention! There will be no tips on how to make a website layout in Photoshop – this is a topic for a separate article, here are simpler ways.
or existing sites
This method is for you if you want:
- understand basic Photoshop tools;
- find different references for your future site and put them together;
- feel like a designer for a couple of hours;
- to demonstrate to a web designer or agency (for example, us 🙂 the most detailed vision of the site;
- to support the technical specification for the development of the site not only “here are call buttons, but here is a separator and a lidomagnet”.
Pros of this approach to layout development:
- you can avoid common mistakes by looking at quality sites;
- understand how not to do to make it good;
- web designers will be clear about what you expect;
- this is very fast – in a few hours you will make layouts for all the pages of the site.
- you never fully understand what web design is;
- some of the references that you find, the layout designer does not implement without changing other parts of the site.
How to do it
The easiest and fastest way to make a website layout is to choose a template for a specific CMS and remake it for yourself. Therefore, first you need to decide on the CMS, which will greatly simplify the development of the site. However, please note that the site design will be limited to those elements that are in the template. Of course, you can change the colors, but some interface elements are already prepared and you cannot change them.
! If you are going to make a “stew” from different sites, do not forget to write the source code somewhere in a notebook with a pencil. This will simplify further design development and layout.
Website layouts for WordPress
The most popular CMS is WordPress. For example, here you will find many modern templates for this CMS. What for? The site on the template speeds up the launch of the project at times, but it will not be unique. Although, if you use original illustrations, images and a creative approach, even a template layout can be altered beyond recognition. The main advantage is that your site is guaranteed to be responsive and generally beautiful in terms of display on different devices.
Browse the different templates and choose the one you like best. I searched a little more 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 a corporate website. By clicking on the menu, you can see in more detail what functions the template has, how different pages will look. It’s best to spend half an hour on this and figure out what is in the template.
What’s next? We select the size of the site layout, cut and glue
When you are already familiar with the template, you can start slicing it. It’s great if your screen resolution is 1920 px or more – this will allow you to simply take screenshots of parts of the site and combine them in the editor. Working with the layout starts with the header, then the different blocks (body), and at the end – the footer.
You will need:
- a handy screen capture tool, I use Lightshot – it offers to save the image to a separate file or copy it to the clipboard;
- Photoshop – for gluing cut pieces of images.
Stages of creating a layout for a site based on a template
Step 1. Selecting the width of the site layout
Decide which page you want to make first. Do not start with the main one – it is better to leave it for the last, because this is the most important page of the site and it is better to get your hands on a little first. In the example, I will make a page “About us” – there 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’s your prototype going?
Open Photoshop and set the site layout width to 1920 px. This will be enough to see how the site will look in the browser. If you have a lower resolution, set the width that the monitor allows. Don’t worry about the height yet – it’s hard to guess and you still have to stretch / constrict the area.
Step 2. We continue to create a website layout in Photoshop
Choose the header you like in the template. Cut it out using a handy tool, open the document in Photoshop and paste there (Ctrl + V). Use the Move Tool (V) to place the cap at the top. I like the topbar header that has contact information about the company.
Step 2.A. Make the right website layout right away
Now you have two ways – change the text in the image or write accompanying text in a text file. Which is more convenient? It all depends on your goals. From personal experience, I can say that it is better to do this in the layout, immediately choosing the font and sizes. This is safer and 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. At this stage, you don’t have to play with colors if you don’t have the skills to use Photoshop. To increase the height of the layout, use the Border Tool (C).
After a couple of minutes of thinking, slicing and gluing the pieces I liked the most, I got a structured page layout “About Us”
Things to remember
- Name each layer with a adequate block according to what is there. Otherwise, you will be completely lost later.
- When choosing a font, choose a different size for headings and the main text. It is best to use the Google Fonts web font library for guidance. Don’t forget to filter out Cyrillic fonts.
Method # 2 will suit you, if:
- you don’t have Photoshop (conscience doesn’t allow disk space or not) 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 recommend the awesome free Macaw layout tool. To work with the program, you need to download and install it – it’s a matter of a couple of minutes. In the program, you can practically typeset the layout in visual mode, because you can immediately publish it and see the HTML code and CSS. A little more detail on how the program works. Macaw has a significant drawback – it creates a non-responsive web page. How to deal with this? Here you will already need the skills of a layout designer to connect the framework (for example, if you make a website layout for Bootstrap). However, if you just need to show a working layout to colleagues – Macaw is great.
This is how a non-responsive template looks on different devices. I want to cry
To get started, run the program on your computer. Your attention is presented to a blank document with a page width of 1200 px with a site layout grid. By default, there is padding between the columns, so there will be spacing between the created elements. You only have to draw within the columns, because if you go beyond them, the blocks will be displayed below each other. So keep an eye on them.
You can independently set the width of the columns, their number and distance between them. If you want the elements to “stick” to each other, set the column width to 100% and remove the padding between them. Why do you need this mesh? When HTML coding the site layout, it will be easier to make a responsive template, because modern frameworks use exactly the 12-column grid.
You can change the width of the stage by dragging it from the right, or by setting the size yourself
What’s next? Layout
Set up the work area as it is convenient for you and let’s get to work. I will be creating the same page that I clipped from the Dalton template.
First you need to create a header . This will be a container with a height of 100 px and a bottom border that is 1 px thick.
Inside another container there will be a logo, and inside the next one there will be a menu. There is no need to create separate blocks for individual menu items, it is enough to set an acceptable distance between words (word spacing).
With the header ready, you can proceed to the rest of the blocks. In the next block I will have a background , which I need to separately download .
Step 3. Creating an interactive website layout
I continue dragging and dropping blocks and pasting 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.
Notice the following highlighted elements. They help you switch between different blocks and organize them. For example, the text should be in a specific container, and not just hang out.
If you click File -> Publish, you will receive a ready-made page where you can view HTML-code and CSS in different tabs. This is great if you want to see what the markup looks like.
It turned out something like this. Here, for comparison, on the left is the pasted chunks of the edited template, on the right is the layout created in Macaw. A big plus of the program is that you can insert buttons, add links to them, create different pages and navigate between them. Just don’t forget about the container hierarchy and don’t get lost in them.
Features of this method of creating a site layout:
- to understand the intricacies of the program, you need to spend extra time;
- even when I have already delved into the program, it is still sometimes not clear why it behaves this way and not otherwise;
- you can forget about adaptability if you don’t do it yourself;
- it is really convenient to create a layout and even understand the layout a little – you can see how elements interact and in general what kind of structure;
- styles may contain “width: 16.6666666666%” things that need to be fixed; you just need to understand that this is WYSIWG, not more.
If you are looking for an option on how to create a website layout in an application with the most simple and intuitive interface, I have prepared this method especially for you.
A handy tool for creating infographics that I have 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 will show you some of them.
Also here it is convenient to edit elements , add text (and even make buttons with links!). In general, in just a couple of minutes I already got the same thing as in Macaw, only is more accurate. However, such a layout cannot be made highly interactive. There will be no steps to this method because the service is very intuitive. On the screen, I tried to display as much as possible service capabilities .Features of the Creately service
What I love about Creately is that:
- you can select several objects, distribute and align them relative to each other;
- in order to share the layout with a friend, you can export the image in any convenient format;
- there are out-of-the-box UI elements (such as a browser) to better understand the project.
That’s all. These were the ways that I came to at one stage or another of my creative development. If you find useful in this material – we are happy.
P.S. This article is for guidance only and will not allow you to become a web designer. For serious knowledge, you will have to dig a lot on the Internet.