{"id":4650,"date":"2017-10-14T04:42:54","date_gmt":"2017-10-14T04:42:54","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4650"},"modified":"2017-10-14T04:42:54","modified_gmt":"2017-10-14T04:42:54","slug":"perfect-website-layout-in-2017","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/perfect-website-layout-in-2017\/","title":{"rendered":"Perfect website layout in 2017"},"content":{"rendered":"

01. Define what success means<\/h3>\n
\n

\"\"<\/p>

\n
Talk to your clients to find out what the goals are<\/div>\n<\/figcaption><\/figure>\n

Before starting the work you need to know what is it you are designing for. Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what\u2019s the goal? Is it to make make as many ad impressions as possible or is it to provide the best reading experience? How are those goals going to be measured?<\/p>\n

Good redesigns are not necessarily the most flashy ones but the ones that improve performance over time. Talking to your clients before starting your design is key to define all of this. You need to learn what their concerns and goals beyond the written SOW (statement of work) are.<\/p>\n

02. Put your thoughts on paper first<\/h3>\n
\n
\"Website<\/p>\n
<\/div>\n<\/figure>
\n
Very early sketches of an illustration series about cities around the world (click the top-right icon to enlarge the image)<\/div>\n<\/figcaption><\/figure>\n

This seems very obvious but I’ve found too often that designers jump straight into their work before giving any thought to the problem they are trying to solve. Design is about solving problems, and those problems can’t be resolved through gradients or shadows but rather through a good layout and a clear hierarchy.<\/p>\n

Think about the content, the layout and the functionality before starting to drop shadows. Make sure those thoughts are in line with your client\u2019s goals and feel free to share them. No client ever has complained to me about over-communicating ideas.<\/p>\n

03. Start sketching a top-level framework<\/h3>\n
\n
\"Website<\/p>\n
<\/div>\n<\/figure>
\n
Sketching a basic wireframe will help you structure the layout (click the top-right icon to enlarge the image)<\/div>\n<\/figcaption><\/figure>\n

When I’m asked to create a look and feel for a project, the first thing I do is to come up with a top-level framework that solves all the design problems. The framework is the UI that surrounds the content and helps the user perform actions and navigate through it. It includes the navigation and components like sidebars and bottom bars.<\/p>\n

If you approach your design from this perspective, you will have a clear understanding of what your layout needs will be when designing sections beyond the homepage.<\/p>\n

04. Add a grid<\/h3>\n
\n

\"\"<\/p>

\n
An example of a 978 grid with a 10px baseline<\/div>\n<\/figcaption><\/figure>\n

It’s as simple as it sounds. Before starting to design anything you need a proper grid. There are no valid excuses for starting without a grid \u2013 and if you don’t, I can assure you, the design won’t look as good. A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, so you’re consistent in terms of spacing as well as many other design issues.<\/p>\n

To find out how to do this, take a look at this guide to\u00a0creating a grid that adapts to all screen sizes.<\/p>\n

05. Choose your typography<\/h3>\n
\n

\"Website<\/p>

\n
A general rule of thumb is to use no more than two different typefaces in a website layout<\/div>\n<\/figcaption><\/figure>\n

Exploring different typefaces and colours is part of the discovery phase of a project. I would recommend not using more than two different typefaces in a website, but it really depends on its nature. Overall, choose a font that is easy to read for big chunks of text, and be more playful with titles and calls to action. Don’t be afraid of using big fonts and be creative and consistent when using typography.<\/p>\n

06. Select your colour theme<\/h3>\n
\n

\"Website<\/p>

\n
Tools like Color Hunt are designed to help you pick a palette<\/div>\n<\/figcaption><\/figure>\n
\n
During the process of choosing a set of typefaces, you should start exploring what colours you will use in the UI, backgrounds and text. I recommend using a limited set of colours and tones for the general user interface.<\/div>\n<\/div>\n

It’s important to apply those consistently across the UI depending on the element’s functionality. Think about the layout of sites like Facebook, Twitter, Quora and Vimeo. Besides the UI there shouldn’t be any colour restriction for illustrations or graphic details, as long as they don’t interfere with the functionality of the components.<\/p>\n

If you get stuck, take a look at our list of\u00a0free apps for picking a colour scheme.<\/p>\n

07. Divide the layout<\/h3>\n
\n

\"Website<\/p>

\n
Simple layouts tend to be easier to navigate<\/div>\n<\/figcaption><\/figure>\n
\n
The simpler the structure of the site, the easier it is for users to navigate. Each section in your site needs to tell a story; it needs a reason and a final outcome for the user. The layout should help the content to highlight what are the most important pieces in that story.<\/div>\n<\/div>\n

In reality there shouldn’t be too many calls to action on a page \u2013 everything should drive to that final ‘What can I do here?’ Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. In the end you’ll be surprised how hard is to keep it simple.<\/p>\n

08. Rethink the established<\/h3>\n
\n

\"Website<\/p>

\n
Search buttons are becoming obsolete<\/div>\n<\/figcaption><\/figure>\n

Do we really need a search button any more? In most cases the answer is no. As designers we shape the way users browse the internet, it’s up to us to decide how many steps a simple action will take and how efficient our site will be.<\/p>\n

Some conventions are there because they work, but some are there because no one spent enough time evaluating them. It’s important to rethink the established interactive patterns of all components to see how we can improve them.<\/p>\n

09. Think in motion<\/h3>\n
\n

\"\"<\/p>

\n
Motion is essential when designing interactive experiences<\/div>\n<\/figcaption><\/figure>\n

Motion is essential when designing interactive experiences. No design can be judged on its own or as a static comp any more; every component is defined by its relationship with the system, and that relationship needs motion to be conveyed properly. Motion can illustrate dynamic effects on content or interactive states within your layout. For that second purpose I recommend taking your designs a bit further into prototyping.<\/p>\n

10. Prototype, prototype, prototype<\/h3>\n
\n

\"\"<\/p>

\n
Prototyping is the best way to test interactions<\/div>\n<\/figcaption><\/figure>\n

Prototyping is the best way to test interactions and technology. There are lots of\u00a0prototyping tools\u00a0that make it easy nowadays, and you don\u2019t need to be a coding guru to create effective prototypes. This is yet another way you can get your client excited and on board with concepts and ideas that would otherwise need a lot of explanation.<\/p>\n

11. Challenge yourself<\/h3>\n

I encourage every designer out there to challenge themselves on every project. Innovation isn’t always a requirement for the project, so it’s up to us to come up with something fresh. Examples of different challenges could include using a new grid system, creating a new component, or even minor challenges like avoiding blend modes or using a specific colour.<\/p>\n

12. Pay attention to the details<\/h3>\n
\n

\"Website<\/p>

\n
Work in progress: detail view<\/div>\n<\/figcaption><\/figure>\n

This statement has been overused lately but it’s not always visible in the final product. Depending on the concept behind the project, that ‘attention to detail’ can mean different things.<\/p>\n

It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential \u2013 and it will come naturally if you really enjoy what you do.<\/p>\n","protected":false},"excerpt":{"rendered":"

01. Define what success means Talk to your clients to find out what the goals are Before starting the work you need to know what is it you are designing for. Besides the description of the site, you need to know what the expectations are for it. Take a news site for example, what\u2019s the […]<\/p>\n","protected":false},"author":1,"featured_media":4651,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[9,3,7],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4650"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4650"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4650\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4651"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}