{"id":4872,"date":"2018-02-13T09:22:08","date_gmt":"2018-02-13T09:22:08","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4872"},"modified":"2018-02-13T09:22:08","modified_gmt":"2018-02-13T09:22:08","slug":"crucial-web-design-tips-for-a-professional-site","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/crucial-web-design-tips-for-a-professional-site\/","title":{"rendered":"Crucial Web Design Tips for a Professional Site"},"content":{"rendered":"<p>A website cannot succeed solely through compelling design or thought-provoking content. It needs to have a style that feeds into your website\u2019s user experience and functionality while being easy to understand at first glance.<\/p>\n<p>You know what they always say, \u201cBeauty is in the eye of the mouse-holder.\u201d We understand that different people prefer different styles, but that doesn\u2019t mean that there aren\u2019t a few ground rules you should follow when deciding on the appearance of your website.<\/p>\n<p>Here are 5 quick tips to ensure that you\u2019re heading in the right direction and aren\u2019t turning customers away:<\/p>\n<h3><span class=\"num\">01.<\/span>\u00a0Keep your homepage minimalistic and free of clutter<\/h3>\n<p>We rarely read every word on a website. Instead, we quickly scan pages, picking out keywords and sentences. With these known behaviors in mind, it\u2019s better to appeal to emotions rather than word count. The less someone looking at your site has to read, click on or remember, the better they\u2019ll be able to process and evaluate what\u2019s going on in front of them. That makes it more likely for them to do what you wanted them to do in the first place. Text and\u00a0Calls To Action\u00a0are necessary, of course, but make sure to break them up with larger subheadings and legible paragraphs. We also suggest using images or icons as alternative ways to communicate your point.<\/p>\n<p><a href=\"https:\/\/www.pokebowlz.com\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" class=\"aligncenter wp-image-65940 size-full\" title=\"Web design tips: keep your homepage free of clutter\" src=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/1.-Keep-your-homepage-minimalistic-and-free-of-clutter-copy1.png\" sizes=\"(max-width: 924px) 100vw, 924px\" srcset=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/1.-Keep-your-homepage-minimalistic-and-free-of-clutter-copy1.png 924w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/1.-Keep-your-homepage-minimalistic-and-free-of-clutter-copy1-337x300.png 337w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/1.-Keep-your-homepage-minimalistic-and-free-of-clutter-copy1-768x683.png 768w\" alt=\"Web design tips: keep your homepage free of clutter\" width=\"924\" height=\"822\" \/><\/a><\/p>\n<h3><span class=\"num\">02.<\/span>\u00a0Design with visual hierarchy in mind<\/h3>\n<p>We\u2019ve come a long way from stone tablets. With computer screens and smartphones, as the technology to display information evolves, it remains the designer\u2019s job to arrange the content in a clear manner. You only have a few seconds to grab someone\u2019s attention and tell them what your site is about. If you establish a clear hierarchy to your information, readers can\u2019t help but unconsciously follow the breadcrumbs you have left for them. Then apply color, contrast, size and spacing for further accentuation, remaining conscious of what is drawing attention on your page and making sure that it\u2019s always intentional. One of the best design elements we have found for creating a strong visual hierarchy are\u00a0strips: These will help\u00a0organize your website into clear, digestible pieces of content.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-65931 size-full\" title=\"Web design tips: design with visual hierarchy\" src=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/2.-Design-with-visual-hierarchy-in-mind.png\" sizes=\"(max-width: 924px) 100vw, 924px\" srcset=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/2.-Design-with-visual-hierarchy-in-mind.png 924w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/2.-Design-with-visual-hierarchy-in-mind-432x300.png 432w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/2.-Design-with-visual-hierarchy-in-mind-768x533.png 768w\" alt=\"Web design tips: design with visual hierarchy\" width=\"924\" height=\"641\" \/><\/p>\n<h3><span class=\"num\">03.<\/span>\u00a0Create easy to read website content<\/h3>\n<p>\u201cReadability\u201d measures how easy it is for people to recognize words, sentences, and phrases. When your site\u2019s readability is high, users will be able to efficiently scan your site and take in the information in the text without much effort.<\/p>\n<p><strong>Achieving website readability is relatively easy; try these key rules:<\/strong><\/p>\n<ul>\n<li><strong>Contrast is key<\/strong><br \/>\nIt\u2019s very important to have sufficient contrast between your text and its background so that the text is clear. You most likely have carefully selected colors that are part of your brand identity and they should be represented on your website. Feel free to play with colors, just don\u2019t sacrifice readability for creativity.<\/li>\n<li><strong>You can\u2019t read what you can\u2019t see<\/strong><br \/>\nEarly websites had small fonts, but, over time, people realized that 12pt fonts are hard to read online. When a screen is 24 inches from someone\u2019s face, most people will struggle to see smaller fonts. A typical rule of thumb you\u2019ll see on the web is to keep your body text at least 16pt. That\u2019s a good place to start, but keep in mind that this number completely depends on\u00a0which font you\u2019re using.<\/li>\n<li><strong>Serif vs. Sans Serif<br \/>\n<\/strong>You might not choose your family,\u00a0but you do choose the type of font family you use. Serifs are those little projecting points or lines that some fonts have on the ends of their letters \u2013 Times New Roman, for instance, is from the Serif fonts family. Sans Serif literally means \u201cwithout serif\u201d. These fonts are typically the best choice for online texts \u2013 like the one you\u2019re currently reading. Side note: We know that script fonts (The ones that look like handwriting) are really cool with all the fancy curves and stuff, but please consider your visitors\u2019 eyes \u2013 give them a break!<\/li>\n<li><strong>There is such a thing as too many fonts<\/strong><br \/>\nAs a rule, don\u2019t use more than three different typefaces throughout a single website. Some projects may call for more elaborate font combinations, but if you do choose to use a variety of fonts, the overall effect should be harmonious, not cluttered.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-65932 size-full\" title=\"Web design tips: create easy to read content\" src=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/3.-Create-easy-to-read-website-content.png\" sizes=\"(max-width: 924px) 100vw, 924px\" srcset=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/3.-Create-easy-to-read-website-content.png 924w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/3.-Create-easy-to-read-website-content-331x300.png 331w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/3.-Create-easy-to-read-website-content-768x696.png 768w\" alt=\"Web design tips: create easy to read content\" width=\"924\" height=\"837\" \/><\/p>\n<h3><span class=\"num\">04.<\/span>\u00a0Ensure your site is easy to navigate<\/h3>\n<p>It may be of your design nature to break the mold, but website navigation is not the place to be avant-garde. Don\u2019t\u00a0send visitors on a wild goose hunt when wandering through your site. A site with a solid navigation helps search engines index your content while improving the viewers\u2019 experience:<\/p>\n<ul>\n<li>Link your logo to your homepage: It\u2019s a common practice that your visitors are used to and will save them some precious clicks. If you don\u2019t have one, here\u2019s a great tool you can use to\u00a0create a logo\u00a0as part of your branding efforts.<\/li>\n<li>Mind your menu: It should be on the top (in the header) of your website and structured\u00a0according to the importance of each section.<\/li>\n<li>Offer some vertical navigation: If your site is of the long-scrolling variety, try to use an\u00a0anchor menu.\u00a0With one click, viewers will be able to quickly go back to the\u00a0top, down to the bottom or directly to any section of the site.<\/li>\n<li>Work on your footer: Your footer is probably the last thing to be seen on your site, so remember to include all the important links there. This may include a shortened version of your menu, social icons and additional important links (terms of use\/FAQ\/contact\/blog etc.) your visitors may need.<\/li>\n<li>Keep your important content \u201cAbove-The-Fold\u201d: This is less of a \u201cnavigation\u201d tip per say, but it is still important to that matter. Remember that your visitors should understand what your website is about without having to scroll.<strong>\u00a0\u00a0<\/strong><\/li>\n<\/ul>\n<h3><span class=\"num\">05.<\/span>\u00a0Stay mobile friendly<\/h3>\n<p>We live in a mobile society, which makes it important to ask the question: What do my visitors see when they access my website on the go? Never fear! automatically creates a\u00a0mobile-friendly version of your site\u00a0for you so that you can keep pace with the increasingly mobile world. Be sure to put yourself in the position of the user, and test out every page, user action and button. If you want to ensure your mobile-friendly site is running on all cylinders, check out our\u00a0Mobile Website Best Practices.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-65934 size-full\" title=\"Web design tips: stay mobile friendly\" src=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/5.-stay-mobile-friendly.png\" sizes=\"(max-width: 924px) 100vw, 924px\" srcset=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/5.-stay-mobile-friendly.png 924w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/5.-stay-mobile-friendly-433x300.png 433w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/5.-stay-mobile-friendly-768x532.png 768w\" alt=\"Web design tips: stay mobile friendly\" width=\"924\" height=\"640\" \/><\/p>\n<p><strong>One last tip for the road:<\/strong>\u00a0Never stop looking for inspiration!\u00a0When it comes to web design, inspiration is an essential part of the creative process. It\u2019s important to be familiar with what\u2019s possible. Need a place to start?<\/p>\n<p><a href=\"https:\/\/www.wix.com\/explore\/websites\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" class=\"aligncenter wp-image-65933 size-full\" title=\"Web design tips: never stop exploring\" src=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/4.-Never-stop-looking-for-inspiration..png\" sizes=\"(max-width: 924px) 100vw, 924px\" srcset=\"https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/4.-Never-stop-looking-for-inspiration..png 924w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/4.-Never-stop-looking-for-inspiration.-460x300.png 460w, https:\/\/static-wix-blog.wix.com\/blog\/wp-content\/uploads\/2017\/10\/4.-Never-stop-looking-for-inspiration.-768x501.png 768w\" alt=\"Web design tips: never stop exploring\" width=\"924\" height=\"603\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A website cannot succeed solely through compelling design or thought-provoking content. It needs to have a style that feeds into your website\u2019s user experience and functionality while being easy to understand at first glance. You know what they always say, \u201cBeauty is in the eye of the mouse-holder.\u201d We understand that different people prefer different [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4629,"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":[21,7],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4872"}],"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=4872"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4629"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}