{"id":723,"date":"2020-09-30T12:03:54","date_gmt":"2020-09-30T12:03:54","guid":{"rendered":"https:\/\/www.webdesign-inspiration.com\/blog?p=723"},"modified":"2020-09-30T12:05:35","modified_gmt":"2020-09-30T12:05:35","slug":"web-design-basics-for-non-designers","status":"publish","type":"post","link":"https:\/\/www.webdesign-inspiration.com\/blog\/web-design-basics-for-non-designers","title":{"rendered":"Web Design Basics For Non-Designers"},"content":{"rendered":"<p>For those of you who aren&#8217;t designers, creating a website is an enormous undertaking, one that can often leave you feeling lost before you&#8217;ve even begun.<\/p>\n<p>I know this because I&#8217;ve been where you are right now, so trust me, I get it.<\/p>\n<p>You might be designing it yourself because you can&#8217;t afford a professional developer, or perhaps you just like a challenge.<\/p>\n<p>Whatever your reason, if you don&#8217;t know where to start or which design elements you require for creating a modern website, chances are you&#8217;ll never finish!<\/p>\n<p>It&#8217;s for this reason I&#8217;ve written this post; I want to help you navigate the course and get you to where you want to go.<\/p>\n<p>You&#8217;ll find the tips needed for creating a modern and user-friendly website.<\/p>\n<h2>Begin by keeping it simple<\/h2>\n<p>Your primary focus throughout the design process is to reduce visual clutter.<\/p>\n<p>It&#8217;s what designers call &#8220;White Space.&#8221; It&#8217;s a powerful tactic for creating a beautifully balanced website that flows and performs.<\/p>\n<p>So, what is it?<\/p>\n<p>It&#8217;s the intentional use of the negative space between your content, the bits you aren&#8217;t using, and it gives your site room to breathe when used correctly.<\/p>\n<p>But it not only aesthetically pleasing; there are tangible qualities too:<\/p>\n<p>White space creates tension around your content, a visual frame, so they resonate at a higher level of legibility and comprehension; this grabs the viewer&#8217;s attention and makes your intended message stand out and get noticed.<\/p>\n<p>But that&#8217;s not all!<\/p>\n<p>The design trends for 2020 are all about simplicity, so by using the white space, you&#8217;re not only creating a clean functioning website that connects with your audience but one that&#8217;s as up to date as a Space X rocket.<\/p>\n<h2>Start with a sketch<\/h2>\n<p>This tip is crucial for your website&#8217;s design as it provides you with a blueprint of your intended layout, one that you can then rely on when choosing your template.<\/p>\n<p>You can use a whiteboard, a sketch pad, or a napkin; your goal is to get your creative juices flowing and put down on paper what&#8217;s already in your head, IE, your vision.<\/p>\n<p>Start with what&#8217;s known as a &#8220;wireframe&#8221; it&#8217;s a layout of your site that highlights the elements you&#8217;ll use on each page.<\/p>\n<p>Simplicity&#8217;s once again the key to your success:<\/p>\n<ul>\n<li>Use squares for images<\/li>\n<li>Circles for logos and icons<\/li>\n<li>Lines for written text<\/li>\n<\/ul>\n<p>A useful tool for discovering design options and taking your sketch to the next level is <a href=\"https:\/\/www.adobe.com\/ie\/products\/illustrator.html?gclid=EAIaIQobChMIga_JuduB7AIVDLh3Ch3vWAxGEAAYASAAEgIO3vD_BwE&amp;sdid=88X75SKS&amp;mv=search&amp;ef_id=EAIaIQobChMIga_JuduB7AIVDLh3Ch3vWAxGEAAYASAAEgIO3vD_BwE:G:s&amp;s_kwcid=AL!3085!3!340726104188!e!!g!!adobe%2520illustrator%2520free!1423511189!56665115460\">Adobe Illustrator<\/a>. It&#8217;s a design app that enables you to capture your vision using typography, shapes, and colors.<\/p>\n<p>Whether you keep it on the paper or move to the screen, your goal is to create a visual outline of your content, so you already know what you need before you begin.<\/p>\n<h2>Create a usable brand style guide<\/h2>\n<p>Big or small, your website&#8217;s size doesn&#8217;t matter; once you go online, you&#8217;re a brand, which means you can compete with your niches brand leaders.<\/p>\n<p>But only if you follow some golden rules of brand design!<\/p>\n<ul>\n<li>Personality \u2013 Your business has one, and for customers to connect with your brand, you have to show it. It&#8217;s the reason you started your business, the problem your product or service is trying to solve, your goal, your vision.<\/li>\n<li>Voice \u2013 This is everything you use to promote your company online, images, video, content, and which platforms you do it on. It&#8217;s how the world will hear and see you.<\/li>\n<li>Consistency \u2013 Most notably, everything you do has to be consistent with your personality and voice; this creates brand recognition, which you&#8217;ll need to succeed.<\/li>\n<\/ul>\n<p>It&#8217;s now that you can start looking for color templates and fonts that suit your brand&#8217;s personality, and icons or logos that can adorn your website&#8217;s header. You can use a\u00a0<a href=\"http:\/\/www.tailorbrands.com\/logo-maker\">logo creator<\/a> to help you find designs related to your niche and market places. Once you have your logo in place, you can expand your brand across all your marketing platforms.<\/p>\n<h2>High-quality images<\/h2>\n<p>2020 is the year of simplicity, but it&#8217;s also the year to use high-quality images to promote your content and products.<\/p>\n<p>Images, infographics, icons, logos, and social media avatars are all ways of using simplicity to promote your website&#8217;s content with striking results.<\/p>\n<p>A high-quality image shows that you&#8217;re a modern brand, and if you get them right, your audience will like and share them throughout social media, and that&#8217;s free advertising! What&#8217;s more, you don&#8217;t need a camera to create them; use an image provider like <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>. They offer both a free and professional version and the free ones more than adequate for getting your website started.<\/p>\n<h2>Say it with the right fonts<\/h2>\n<p>You can continue the simplicity theme by reducing the number of fonts you use, but whichever ones you choose, ensure they&#8217;re eligible at all scales.<\/p>\n<p>And here&#8217;s why:<\/p>\n<p>Your audience will be looking at your website on numerous sized screens, and if they can&#8217;t read your content, they won&#8217;t like or share it; even worse, they&#8217;ll bounce from your website.<\/p>\n<p>There&#8217;s a vast range of fonts available and an equal number of guidelines for choosing them. But for now, just follow the following tips:<\/p>\n<ul>\n<li>Use no more than two fonts per design.<\/li>\n<li>And avoid display fonts to ensure legibility.<\/li>\n<\/ul>\n<p>You can find the fonts you need for free on <a href=\"http:\/\/fonts.google.com\/\">Google Fonts<\/a>; these guidelines will help you:<\/p>\n<ul>\n<li>Select fonts that suit your market.<\/li>\n<li>To create visual interest, use contrasting fonts.<\/li>\n<li>Serif works well for headings.<\/li>\n<li>Helvetica for body text.<\/li>\n<\/ul>\n<h2>Convey your message with colors<\/h2>\n<p>Colors and the psychology that accompanies them require your attention, and I advise you read a post that&#8217;s dedicated solely to explaining them so you grasp a real understanding. However, let&#8217;s break it down to what you need for your website to function.<\/p>\n<p>You can save yourself a lot of time using a shortcut when choosing colors, one being websites that provide <a href=\"https:\/\/coolors.co\/generate\">pre-designed color palettes<\/a> from one bass color.<\/p>\n<p>All you do to start is find the color that suits your market place (look at your competitors), and the website provides you with a matching color palette.<\/p>\n<p>You can continue reducing clutter by using no more than two colors and make your website pop by choosing contrasting ones. Remember, every color has a meaning, and for yours to work in every setting, you need to do your research.<\/p>\n<h2>Most of all, be mobile friendly<\/h2>\n<p>While simplicity is the first step for creating a site, adaptivity is possibly the most important one.<\/p>\n<p>An adaptive website design (AWD) creates multiple versions of each page on your site to fit the user&#8217;s device, and today that means mobiles. If you don&#8217;t choose an adaptive website template, your pages won&#8217;t conform to the screen size, meaning content will be lost, or incorrectly displayed.<\/p>\n<p>It&#8217;s crucially important that you use an (AWD) as 76% of smartphone owners use their device to research and purchase products, and that trend is only going to rise in the coming years.<\/p>\n<h2>The last word<\/h2>\n<p>Now you have a starting point and steps that all website designers take when creating a website.<\/p>\n<p>Start by drawing up your wireframe, keep the elements to a minimum, and then choose a template that suits your design.<\/p>\n<p>By keeping things simple, you&#8217;ll get to where you need to go.<\/p>\n<!--Yasr Overall Rating Shortcode--><div class='yasr-custom-text-before-overall' id='yasr-custom-text-before-overall'>Our Score<\/div><div class=\"yasr-overall-rating\"><div class=' yasr-rater-stars'\r\n                           id='yasr-overall-rating-rater-a0504ad669e5a'\r\n                           data-rating='4.9'\r\n                           data-rater-starsize='24'>\r\n                       <\/div><\/div><!--End Yasr Overall Rating Shortcode-->\n","protected":false},"excerpt":{"rendered":"<p>For those of you who aren&#8217;t designers, creating a website is an enormous undertaking, one that can often leave you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":724,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"yasr_overall_rating":4.9,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[6],"tags":[],"class_list":["post-723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"_links":{"self":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":2,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"predecessor-version":[{"id":727,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions\/727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/media\/724"}],"wp:attachment":[{"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webdesign-inspiration.com\/blog\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}