![\"flower\"](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2021\/05\/flower_700.jpg\")
<\/p>\nA successful website combines great content with great design. While you might have the content on lock and a great product, web design is a whole other animal.<\/p>\n
You have to consider the user experience, the color scheme, and of course, whether the site works well on the iPhone.<\/p>\n
It\u2019s a lot for the budding business owner to take in.<\/p>\n
These aren’t necessarily the top web design trends for 2019. But, clear navigation, hi-res pics, and a winning color scheme never go out of style.<\/p>\n
<\/p>\n
Visual assets are one of the key elements that make or break a website. But not everyone has access to a personal photographer or high-end equipment.<\/p>\n
Original photos:<\/strong><\/p>\n You might want to look into hiring someone for a few hours for some specific elements. There are some things that you need to produce yourself \u2014 or get a pro to do it for you.<\/p>\n Outsource, if possible:<\/strong><\/p>\n That said, if it\u2019s totally out of your budget, a recent smartphone and some choice editing apps can do the trick. VSCO<\/a>, Lightroom<\/a>, Snapseed<\/a>\u2014all great for editing Instagram pics \u2014 extends to your own site, too.<\/p>\n Stock photos are your best friend, especially if you have some photo editing capabilities. Fill in the blanks by adding stock shots that represent content.<\/p>\n Sites like Pexels<\/a>, Unsplash<\/a>, and Snappa<\/a> are our top picks, as they allow you to simply “click to download” so you can get right to work.<\/p>\n But, tread carefully. We recommend avoiding stock shots with recognizable models. It\u2019s a dead giveaway that you\u2019re using stock photos.<\/p>\n One that comes to mind is that guy with the big beard and whimsical mustache\u2014he seems to come up in all kinds of workplace content.<\/p>\n 7 best websites to find copyright-free images<\/p>\r\n Read Now \u25ba<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n <\/div>\r\n<\/div>\n Beyond sourcing photos, everything should have a similar look and feel. A good way to get a sense of this is by looking at popular Instagram feeds.<\/p>\n You\u2019ll notice they use the same filters and color schemes<\/a> \u2014 which creates a cohesive feel. Doing this with your own photos and stock photos allows you to make all visual assets feel like they belong in the same collection.<\/p>\n Size should be uniform, too. So, if you\u2019re posting blog content \u2014 all blogs should come with the same size photo header and formatting rules for embedded images and videos.<\/p>\n Website navigation allows users to follow a map that gets them from one point to the next. As such, the fewer twists and turns, the better the user experience.<\/p>\n This example below is confusing. There\u2019s no direct path from point A to B to Z.<\/p>\n Alternatively, here\u2019s a good example of clean, clear design. They\u2019re not trying to get cute with the layout. Instead, visual interest lies in the products, not some crazy menu.<\/p>\n Navigation questions to ask yourself:<\/strong><\/p>\n A few extras to keep in mind:<\/strong><\/p>\n You\u2019re likely reading this because you aren\u2019t some natural web design pro. That\u2019s okay. Luckily today\u2019s prevailing aesthetics are relatively clean and uncluttered\u2014not much to do on your end.<\/p>\n A grid system<\/span><\/a> allows you to plot out every photo, button, and text block so that all elements are aligned correctly.<\/p>\n The grid system has been around since the early days of print \u2014 and there are two types: landscape and portrait.<\/p>\n The main benefit is, you can easily make decisions about where to add images and content, as the grid inherently limits where you can place these elements.<\/p>\n White space is like a fresh drink of water when you\u2019re taking on a big chunk of text.<\/p>\n Even the most avid readers prefer to scan their content, not take it in all at once. As a visual element, a wall of text isn\u2019t pretty. It adds a visual texture that can create friction.<\/p>\n Don\u2019t feel compelled to fill every square inch of site space. Let each element speak for itself, with enough space on each side for some visual breathing room.<\/p>\n Even websites can make people feel claustrophobic. Apply the same principles to your new site as you would your home \u2014 it\u2019s not wall to wall stuff \u2014 it\u2019s a few choice pieces here and there.<\/p>\n When it comes to color, less is always more. A three-color palette on a white background is a good starting point. Think a neutral with a strong accent color to add some interest.<\/p>\n What those colors are is a whole other story. Failing to add color means you\u2019re going to be looking at a website with minimal interest. Too much color and you risk making a poor impression. Web visitors won\u2019t want to enter the fun house.<\/p>\n Hubspot put together this handy guide <\/a><\/span>for those who want to dive a little deeper into color theory and how it relates to the web.<\/p>\n Finally, you\u2019ll want to make sure that you keep the same color scheme throughout the site. Consistency builds trust, and color is one of the easiest ways to keep the same look going across pages and onto other platforms.<\/p>\n The more fonts added to the mix, the messier your site will look. The rule of thumb here is to use no more than three fonts.<\/strong><\/p>\n Use one for headers, one for body content, and one accent font. An accent font should be used sparingly — generally, you’d see this in branded graphics, a logo, and other pieces of marketing collateral.<\/p>\n If you’re new to the world of typeface, Google Design is a really solid resource. They’ve put together a beginner’s guide<\/a> to picking the right web fonts.<\/p>\n Prefer something more visual? Canva offers a different approach <\/a>with several examples, like this one:<\/p>\n\n
![\"unsplash](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/02\/Stock-photo-repeat-models-300x153.jpg\")
<\/p>\n\r\n \r\n \r\n \r\n ![](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/03\/ladybugs-192.jpg\")
\r\n <\/div>\r\n \r\n 2. Navigation needs to be clear<\/h3>\n
![\"website](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/02\/bad-navigation-300x151.jpg\")
<\/p>\n![\"simple](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/02\/good-navigation-example-300x178.jpg\")
<\/p>\n\n
\n
3. Design on a grid<\/h3>\n
![\"how](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/02\/grid-example-300x196.jpg\")
<\/p>\n![\"different](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/02\/grid-landscape-layout-300x294.jpg\")
<\/p>\n4. Embrace the (white) space<\/h3>\n
5. Coordinate your colors<\/h3>\n
6. Limit fonts<\/h3>\n
![\"canva](\"https:\/\/articles-img.sftcdn.net\/sft\/articles\/auto-mapping-folder\/sites\/3\/2019\/02\/Canva-three-font-formula1-300x231.jpg\")
<\/p>\n\r\n \r\n \r\n \r\n ![\"Canva\"](\"https:\/\/images.sftcdn.net\/images\/t_app-logo-l,f_auto,dpr_auto\/p\/d3242da8-4592-4675-a781-69902bbae63a\/294841928\/canva-294841928.png\"){kind=logo}
\r\n <\/div>\r\n \r\n Canva<\/span>\r\n Download Free<\/a>\r\n <\/div>\r\n