{"id":40265,"date":"2025-05-21T18:33:18","date_gmt":"2025-05-21T17:33:18","guid":{"rendered":"https:\/\/inkbotdesign.com\/?p=40265"},"modified":"2025-11-29T17:27:57","modified_gmt":"2025-11-29T17:27:57","slug":"website-design-tips","status":"publish","type":"post","link":"https:\/\/inkbotdesign.com\/website-design-tips\/","title":{"rendered":"21 Website Design Tips for Beginners (That Pros Still Use)"},"content":{"rendered":"\n<p><strong>21 Website Design Tips for Beginners (That Pros Still Use)<\/strong><\/p>\n\n\n\n<p>I've spent years watching beginners make the same mistakes\u2014and truthfully, seeing pros fall into similar traps despite their experience.<\/p>\n\n\n\n<p>Great websites aren't just pretty interfaces. They're carefully crafted experiences that guide visitors toward specific actions while making them feel comfortable throughout the journey.<\/p>\n\n\n\n<p>Whether you're building your first or fiftieth site, these principles will help you create designs that convert, engage, and delight your users. I've pulled together 21 tips consistently delivering results across hundreds of projects.<\/p>\n\n\n\n<p>The coffee machine sputters. You check your watch. Late again. But these website design tips will save countless hours of frustration and revision cycles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Start With a Clear Purpose<\/h2>\n\n\n\n<p>Before touching any design tool, ask yourself: &#8220;What's the primary goal of this website?&#8221;<\/p>\n\n\n\n<p>Every effective website serves a specific purpose. Is it to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sell products directly<\/li>\n\n\n\n<li>Generate leads for your business<\/li>\n\n\n\n<li>Showcase a <a href=\"https:\/\/inkbotdesign.com\/portfolio\/\"   title=\"Graphic Design Portfolio\"  data-wpil-monitor-id=\"113\">portfolio<\/a><\/li>\n\n\n\n<li>Provide information or <a href=\"https:\/\/inkbotdesign.com\/resources\/\"   title=\"Designer Resources\"  data-wpil-monitor-id=\"115\">resources<\/a><\/li>\n\n\n\n<li>Build a community<\/li>\n<\/ul>\n\n\n\n<p>Your purpose should influence every design decision that follows. For instance, an e-commerce site needs prominent product images, transparent pricing, and an obvious path to purchase. A portfolio site, however, might prioritise visual impact and creative navigation.<\/p>\n\n\n\n<p>&#8220;The most common mistake I see with new designers is trying to make one website do everything. Focus on doing one thing exceptionally well before expanding.&#8221;<\/p>\n\n\n\n<p>Knowing your site's core purpose helps you resist adding unnecessary features that dilute your message and confuse visitors.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Embrace White Space<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Embrace-White-Space-in-web-design-2025-1024x476.webp\" alt=\"Embrace White Space In Web Design 2025\" class=\"wp-image-304166\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Embrace-White-Space-in-web-design-2025-1024x476.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Embrace-White-Space-in-web-design-2025-300x140.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Embrace-White-Space-in-web-design-2025.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/inkbotdesign.com\/white-space-in-web-design\/\" title=\"White Space in Web Design: The Power of Nothing\"  data-wpil-monitor-id=\"131\">White space<\/a> (or negative space) isn't wasted space\u2014it's an essential design element that gives your content room to breathe.<\/p>\n\n\n\n<p>Novice designers feel compelled to fill every pixel with content, believing it maximises value. The opposite is true. Cluttered designs overwhelm visitors and make it harder for them to focus on what matters.<\/p>\n\n\n\n<p>Strategic white space:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Improves readability<\/li>\n\n\n\n<li>Creates a <a href=\"https:\/\/inkbotdesign.com\/visual-hierarchy\/\" title=\"You've Got 3 Seconds: Make Visual Hierarchy Count\"  data-wpil-monitor-id=\"130\">visual hierarchy<\/a><\/li>\n\n\n\n<li>Gives the eyes a rest point<\/li>\n\n\n\n<li>Makes content feel more premium<\/li>\n\n\n\n<li>Highlights calls-to-action<\/li>\n<\/ul>\n\n\n\n<p>Think of white space as the pauses in a conversation. Without them, you'd just have noise.<\/p>\n\n\n\n<p>Look at Apple's website for inspiration\u2014they use abundant white space to create a sense of simplicity and elegance while directing attention precisely where they want it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Design With Mobile in Mind First<\/h2>\n\n\n\n<p>The days of designing for desktops and then adapting to mobile devices are long gone. In 2025, over <a target=\"_blank\" href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\" rel=\"noopener\">70%<\/a> of web traffic comes from mobile devices.<\/p>\n\n\n\n<p><a href=\"https:\/\/inkbotdesign.com\/mobile-first-design\/\" title=\"Why Your Website Needs a Mobile-First Design\" data-wpil-monitor-id=\"123\">Mobile-first design<\/a> means:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Prioritising content ruthlessly<\/li>\n\n\n\n<li>Designing for touch interactions (larger buttons, swipe-friendly interfaces)<\/li>\n\n\n\n<li>Simplifying navigation systems<\/li>\n\n\n\n<li>Optimising images and media for faster loading<\/li>\n\n\n\n<li>Considering limited bandwidth scenarios<\/li>\n<\/ul>\n\n\n\n<p>When you start with mobile constraints, you focus on what's essential. This clarity carries through to larger screens, where you can enhance the experience without struggling to compress it.<\/p>\n\n\n\n<p>Remember, mobile users often have different intentions than desktop users. They frequently look for specific information (opening hours, contact details, directions) rather than browsing extensively.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Create a Visual Hierarchy That Guides the Eye<\/h2>\n\n\n\n<p>Visual hierarchy determines what visitors notice on your page first, second, and third. It's how you guide them through your content in a specific order.<\/p>\n\n\n\n<p>You control this hierarchy using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Size<\/strong>: Larger elements grab attention first<\/li>\n\n\n\n<li><strong>Colour<\/strong>: Bright or contrasting colours stand out<\/li>\n\n\n\n<li><strong>Spacing<\/strong>: Isolated elements receive more focus<\/li>\n\n\n\n<li><strong>Typography<\/strong>: Bold, unique <a href=\"https:\/\/inkbotdesign.com\/go\/bestfonts\" title=\"Myfonts Bestsellers\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">fonts<\/a> draw the eye<\/li>\n\n\n\n<li><strong>Position<\/strong>: Elements at the top and left receive priority (in Western cultures)<\/li>\n<\/ul>\n\n\n\n<p>The F-pattern <a href=\"https:\/\/inkbotdesign.com\/layout-design\/\" title=\"Strategic Layout Design: Making Every Element Count\" data-wpil-monitor-id=\"140\">design layout<\/a> works brilliantly for content-heavy sites. Users typically scan pages in an F-shaped pattern: across the top, down a bit, across again (though less far), and then down the left side.<\/p>\n\n\n\n<p>The Z-pattern often proves more effective for <a href=\"https:\/\/inkbotdesign.com\/landing-page-optimisation\/\" title=\"Boost Your Conversions with Landing Page Optimisation\" data-wpil-monitor-id=\"127\">landing pages<\/a>, guiding the eye from top-left to top-right, diagonally to bottom-left, and finally to bottom-right (usually where your CTA lives).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Choose Colours Strategically, Not Emotionally<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"480\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Choose-Colours-Strategically-Not-Emotionally-1024x480.webp\" alt=\"Choose Colours Strategically, Not Emotionally\" class=\"wp-image-304167\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Choose-Colours-Strategically-Not-Emotionally-1024x480.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Choose-Colours-Strategically-Not-Emotionally-300x141.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Choose-Colours-Strategically-Not-Emotionally.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We've all been there\u2014selecting colours because &#8220;they look nice together&#8221; or &#8220;blue is my favourite.&#8221; But colour is a powerful psychological tool that deserves strategic consideration.<\/p>\n\n\n\n<p><a href=\"https:\/\/inkbotdesign.com\/colour-theory\/\" title=\"An In-Depth Look at Colour Theory\" data-wpil-monitor-id=\"136\">Colour theory<\/a> in UI isn't just about aesthetics\u2014it's about communication:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Limit your palette<\/strong>: Use 2-3 primary colours plus 2-3 secondary\/accent colours<\/li>\n\n\n\n<li><strong>Follow the 60-30-10 rule<\/strong>: Main colour (60%), secondary colour (30%), accent colour (10%)<\/li>\n\n\n\n<li><strong>Consider colour psychology<\/strong>: Blues convey trust, reds create urgency, and greens suggest growth<\/li>\n\n\n\n<li><strong>Check contrast ratios<\/strong>: Ensure text remains readable against all backgrounds<\/li>\n\n\n\n<li><strong>Test for colour blindness<\/strong>: Approximately 8% of men have some form of colour vision deficiency<\/li>\n<\/ul>\n\n\n\n<p>Your brand colours should influence your website palette, but not at the expense of usability. Find a compromise if your brand purple makes text unreadable on specific backgrounds.<\/p>\n\n\n\n<p>Grab a cuppa and try this first: create three different <a href=\"https:\/\/inkbotdesign.com\/colour-schemes-in-design\/\" title=\"Mastering the Art of Colour Schemes in Design\" data-wpil-monitor-id=\"133\">colour schemes<\/a> and test them with actual users before finalising your decision.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Make Typography Readable, Not Just Beautiful<\/h2>\n\n\n\n<p>Typography can make or break your website's usability. Those stunning decorative <a href=\"https:\/\/inkbotdesign.com\/go\/bestfonts\" title=\"Myfonts Bestsellers\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">fonts<\/a> might look brilliant in headlines, but become a nightmare when used for body text.<\/p>\n\n\n\n<p>For optimal readability:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Limit font families<\/strong>: Use 2-3 maximum across your site<\/li>\n\n\n\n<li><strong>Size matters<\/strong>: Body text should be at least 16px (preferably 18-20px in 2025)<\/li>\n\n\n\n<li><strong>Line height<\/strong>: Set to 1.5-1.6 times your font size<\/li>\n\n\n\n<li><strong>Line length<\/strong>: Aim for 50-75 characters per line<\/li>\n\n\n\n<li><strong>Contrast<\/strong>: Ensure sufficient contrast between text and background<\/li>\n\n\n\n<li><strong>Hierarchy<\/strong>: Differentiate headings, subheadings, and body text<\/li>\n<\/ul>\n\n\n\n<p>Great <a href=\"https:\/\/inkbotdesign.com\/font-pairing\/\" title=\"Font Pairing for Beginners: The 20 Best Font Combinations\" data-wpil-monitor-id=\"132\">font pairings<\/a> for the web include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Playfair Display (headings) with Source Sans Pro (body)<\/li>\n\n\n\n<li>Montserrat (headings) with Merriweather (body)<\/li>\n\n\n\n<li>Roboto (headings) with Open Sans (body)<\/li>\n<\/ul>\n\n\n\n<p>Remember that <a href=\"https:\/\/inkbotdesign.com\/best-serif-fonts\/\" title=\"Top 10 Best Serif Fonts of All Time\" data-wpil-monitor-id=\"135\">serif fonts<\/a> (with the little feet at the end of strokes) were traditionally considered harder to read on screens. Still, with today's high-resolution displays, this distinction has largely disappeared.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Optimise Images Properly<\/h2>\n\n\n\n<p>Images often account for the most significant portion of a webpage's file size. Unoptimised images create sluggish sites that frustrate visitors and harm <a href=\"https:\/\/inkbotdesign.com\/seo-ranking-factors\/\" title=\"11 SEO Ranking Factors for the Top of Search Results\" data-wpil-monitor-id=\"139\">SEO rankings<\/a>.<\/p>\n\n\n\n<p>Follow these <a href=\"https:\/\/inkbotdesign.com\/image-optimisation\/\" title=\"Guide to Image Optimisation for Web Performance\" data-wpil-monitor-id=\"118\">image optimisation<\/a> techniques:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Choose the correct format<\/strong>: Use JPEG for photographs, PNG for transparent graphics, SVG for icons and simple illustrations, and WebP where broader support exists.<\/li>\n\n\n\n<li><strong>Scale appropriately<\/strong>: Resize images to the maximum dimensions needed before uploading<\/li>\n\n\n\n<li><strong>Compress everything<\/strong>: Use tools like TinyPNG, ShortPixel, or Squoosh to <a href=\"https:\/\/inkbotdesign.com\/optimise-images\/\" title=\"How to Reduce Images and Videos File Sizes for the Web\" id=\"137\">reduce file sizes<\/a>.<\/li>\n\n\n\n<li><strong>Use responsive images<\/strong>: Implement srcset and size attributes to serve different image sizes to other devices.<\/li>\n\n\n\n<li><strong>Add descriptive alt text<\/strong>: Help screen readers and <a href=\"https:\/\/inkbotdesign.com\/search-engine-optimisation\/\" title=\"What Is SEO &#8211; Search Engine Optimisation?\" data-wpil-monitor-id=\"138\">search engines<\/a> understand your images.<\/li>\n\n\n\n<li><strong>Lazy load non-critical images<\/strong>: Defer loading images that appear below the fold<\/li>\n<\/ul>\n\n\n\n<p>I crunched the numbers from 50 sites and found that properly <a href=\"https:\/\/inkbotdesign.com\/optimising-images-for-seo\/\" title=\"Optimising Images for SEO: Design Agency Tips\" data-wpil-monitor-id=\"119\">optimised images reduced<\/a> overall page weight by 70% on average. That's the difference between a 2-second and a 7-second load time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Create Intuitive Navigation Systems<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Intuitive-Navigation-Systems-1024x511.webp\" alt=\"Create Intuitive Navigation Systems\" class=\"wp-image-304168\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Intuitive-Navigation-Systems-1024x511.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Intuitive-Navigation-Systems-300x150.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Intuitive-Navigation-Systems.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Navigation is the map of your website. If visitors can't figure out how to get around, they'll leave, no matter how pretty everything looks.<\/p>\n\n\n\n<p>Ah, here's where it gets interesting. The best navigation systems follow these principles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keep it simple<\/strong>: Limit main navigation items to 5-7 options<\/li>\n\n\n\n<li><strong>Use clear labels<\/strong>: Avoid clever or ambiguous menu items<\/li>\n\n\n\n<li><strong>Make it consistent<\/strong>: Keep navigation in the same place across all pages<\/li>\n\n\n\n<li><strong>Provide visual feedback<\/strong>: Highlight the active page\/section<\/li>\n\n\n\n<li><strong>Include search functionality<\/strong>: For sites with lots of content<\/li>\n\n\n\n<li><strong>Consider secondary navigation<\/strong>: Footer menus can house important but less-frequently accessed links<\/li>\n<\/ul>\n\n\n\n<p>Many sites now use &#8220;hamburger&#8221; menus on mobile. While these save space, they hide navigation options. If critical paths to conversion exist, consider keeping them visible rather than tucking them behind a menu icon.<\/p>\n\n\n\n<p>For e-commerce sites, mega menus can be effective, but ensure they remain organised and don't overwhelm users with too many options.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Embrace Simplicity in User Flows<\/h2>\n\n\n\n<p>The more steps between a user and their goal, the fewer people will complete the process. This is why simplicity in user flows is crucial.<\/p>\n\n\n\n<p>For forms and checkout processes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Remove unnecessary fields<\/strong>: Ask only for essential information<\/li>\n\n\n\n<li><strong>Break complex processes into steps<\/strong>: Show progress indicators<\/li>\n\n\n\n<li><strong>Provide clear error messages<\/strong>: Help users understand and fix problems<\/li>\n\n\n\n<li><strong>Allow guest checkout options<\/strong>: Don't force account creation<\/li>\n\n\n\n<li><strong>Save user data when possible<\/strong>: Remember information for returning visitors<\/li>\n\n\n\n<li><strong>Test on actual users<\/strong>: What seems logical to you might confuse others<\/li>\n<\/ul>\n\n\n\n<p>We've all faced that &#8216;where's the save button?' panic. That's precisely what we need to eliminate from <a href=\"https:\/\/inkbotdesign.com\/user-experience-design\/\" title=\"User Experience Design: The Ultimate UX Guide\" data-wpil-monitor-id=\"124\">user experiences<\/a>.<\/p>\n\n\n\n<p>Remember, each additional step in a process typically results in a 10-15% drop-off rate. Be ruthless about simplifying user journeys.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Prioritise Page Loading Speed<\/h2>\n\n\n\n<p>In 2025, users expect lightning-fast websites. Each second of delay in page load time reduces conversions by approximately 7%.<\/p>\n\n\n\n<p>To optimise site loading speed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minimise HTTP requests<\/strong>: Combine CSS and JavaScript files where possible<\/li>\n\n\n\n<li><strong>Enable browser caching<\/strong>: Store resource files locally in users' browsers<\/li>\n\n\n\n<li><strong>Compress files<\/strong>: Use Gzip compression for HTML, CSS, and JavaScript<\/li>\n\n\n\n<li><strong>Implement a CDN<\/strong>: Distribute content across multiple geographic locations<\/li>\n\n\n\n<li><strong>Reduce server response time<\/strong>: Choose quality <a href=\"https:\/\/inkbotdesign.com\/go\/krystal\" title=\"Krystal\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">hosting<\/a> appropriate for your traffic<\/li>\n\n\n\n<li><strong>Optimise code<\/strong>: Remove unnecessary characters, comments, and unused code<\/li>\n\n\n\n<li><strong>Defer non-critical JavaScript<\/strong>: Load it after essential content has rendered<\/li>\n<\/ul>\n\n\n\n<p>Use Google's PageSpeed Insights and GTmetrix to identify specific areas for improvement on your site. Walking fast, the document looks loaded quickly, but mobile users on 3G connections might have a completely different experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">11. Design Effective Call-to-Action Buttons<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-Effective-Call-to-Action-Buttons-1024x508.webp\" alt=\"Design Effective Call To Action Buttons\" class=\"wp-image-304169\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-Effective-Call-to-Action-Buttons-1024x508.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-Effective-Call-to-Action-Buttons-300x149.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-Effective-Call-to-Action-Buttons.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>CTAs are the signposts that guide users toward conversion. Their design can dramatically impact click-through rates.<\/p>\n\n\n\n<p>For high-performing CTA buttons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use action-oriented text<\/strong>: &#8220;Get Started&#8221; works better than &#8220;Submit&#8221;<\/li>\n\n\n\n<li><strong>Create colour contrast<\/strong>: Make buttons stand out from surrounding elements<\/li>\n\n\n\n<li><strong>Size appropriately<\/strong>: Buttons should be large enough to be easily tapped on a mobile<\/li>\n\n\n\n<li><strong>Position strategically<\/strong>: Place primary CTAs <a href=\"https:\/\/inkbotdesign.com\/above-the-fold\/\" title=\"Above The Fold: Best Practices for Web Design\" data-wpil-monitor-id=\"117\">above the fold<\/a> and at logical decision points<\/li>\n\n\n\n<li><strong>Add white space around them<\/strong>: Give CTAs room to breathe<\/li>\n\n\n\n<li><strong>Limit the number per page<\/strong>: Too many competing CTAs create decision paralysis<\/li>\n\n\n\n<li><strong>Consider directional cues<\/strong>: Arrows, photos of people looking toward the CTA, or other subtle pointers can increase clicks<\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/inkbotdesign.com\/ux-design-ab-testing\/\" title=\"A\/B Testing in UX Design: Boosting User Experience and Engagement\" data-wpil-monitor-id=\"128\">A\/B testing<\/a> different CTA variations can reveal surprising preferences among your specific audience. What works on one site might fail on another.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">12. Implement Responsive Design Properly<\/h2>\n\n\n\n<p>Responsive design isn't just about making things fit on different screens\u2014it's about creating optimal experiences across all devices.<\/p>\n\n\n\n<p>Beyond basic responsive techniques:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Test on actual devices<\/strong>: Simulators don't always reveal real-world issues<\/li>\n\n\n\n<li><strong>Consider touch targets<\/strong>: Fingers need more space than mouse pointers (minimum 44\u00d744 pixels)<\/li>\n\n\n\n<li><strong>Adjust typography for readability<\/strong>: Font sizes might need to be larger on mobile<\/li>\n\n\n\n<li><strong>Rethink navigation for different screens<\/strong>: What works on desktop might fail on mobile<\/li>\n\n\n\n<li><strong>Optimise images for different viewports<\/strong>: Don't make mobile users download desktop-sized images<\/li>\n\n\n\n<li><strong>Test loading speeds across devices<\/strong>: Mobile networks can be significantly slower<\/li>\n<\/ul>\n\n\n\n<p>Responsive design isn't a one-time implementation\u2014it requires ongoing testing as new devices and screen sizes enter the market.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">13. Use Grid Systems for Layout Consistency<\/h2>\n\n\n\n<p><a href=\"https:\/\/inkbotdesign.com\/grid-systems-in-graphic-design\/\" title=\"Grid Systems in Graphic Design: Tips for Designers\" data-wpil-monitor-id=\"122\">Grid systems<\/a> provide the invisible structure that holds your design together. They create alignment and consistency while speeding up the design process.<\/p>\n\n\n\n<p>Benefits of using grid systems:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Creates visual harmony<\/strong>: Elements align consistently<\/li>\n\n\n\n<li><strong>Speeds up design decisions<\/strong>: Predefined placements reduce guesswork<\/li>\n\n\n\n<li><strong>Improves responsiveness<\/strong>: Grids adapt naturally to different screen sizes<\/li>\n\n\n\n<li><strong>Enhances professionalism<\/strong>: Aligned elements feel more polished<\/li>\n\n\n\n<li><strong>Facilitates collaboration<\/strong>: Teams can work within a shared framework<\/li>\n<\/ul>\n\n\n\n<p>The 12-column grid remains the industry standard, but don't feel constrained by tradition. Modern CSS Grid and Flexbox allow for more creative layouts while maintaining order.<\/p>\n\n\n\n<p>For beginners, Bootstrap or similar frameworks can provide ready-made grid systems to build on. As you gain experience, you might develop custom grids that are better suited to your specific projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">14. Create Accessible Designs<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Accessible-Designs-1024x541.webp\" alt=\"Create Accessible Designs\" class=\"wp-image-304170\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Accessible-Designs-1024x541.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Accessible-Designs-300x159.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Create-Accessible-Designs.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Accessibility isn't just about compliance\u2014it's about designing for everyone, regardless of their abilities or how they <a href=\"https:\/\/inkbotdesign.com\/web-accessibility-guidelines\/\" title=\"Web Accessibility Guidelines: Guide to Inclusive Design\" data-wpil-monitor-id=\"142\">access the web<\/a>.<\/p>\n\n\n\n<p>Key accessibility principles include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Provide sufficient colour contrast<\/strong>: WCAG guidelines recommend a minimum ratio of 4.5:1 for standard text.<\/li>\n\n\n\n<li><strong>Use semantic HTML<\/strong>: Proper heading structure, lists, and landmarks help screen readers.<\/li>\n\n\n\n<li><strong>Make forms accessible<\/strong>: Labels, error messages, and keyboard navigation are essential.<\/li>\n\n\n\n<li><strong>Provide text alternatives<\/strong>: All images need descriptive alt text.<\/li>\n\n\n\n<li><strong>Enable keyboard navigation<\/strong>: All interactive elements should be accessible without a mouse.<\/li>\n\n\n\n<li><strong>Consider reading order<\/strong>: The visual layout should match the logical content sequence.<\/li>\n\n\n\n<li><strong>Test with actual assistivity tools<\/strong>: Use screen readers and keyboard-only navigation to experience your site as others might<\/li>\n<\/ul>\n\n\n\n<p>Beyond altruism, accessibility makes business sense\u201415-20% of the population has some form of disability, representing a massive potential audience you might otherwise exclude.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">15. Implement Dark Mode Options<\/h2>\n\n\n\n<p>Dark mode has evolved from a trend to an expected feature, particularly as users become more aware of eye strain and battery consumption.<\/p>\n\n\n\n<p>When <a href=\"https:\/\/inkbotdesign.com\/dark-mode\/\" title=\"Dark Mode: Implementing Dark UI in Your Web Design Strategy\" data-wpil-monitor-id=\"121\">implementing dark mode<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Don't just invert colours<\/strong>: Properly designed dark themes adjust contrast, saturation, and brightness<\/li>\n\n\n\n<li><strong>Respect user preferences<\/strong>: Use the prefers-colour-scheme media query to detect system settings<\/li>\n\n\n\n<li><strong>Maintain readable contrast ratios<\/strong>: Dark backgrounds often require adjustments to text colours<\/li>\n\n\n\n<li><strong>Consider imagery<\/strong>: Photos and illustrations might need different treatments in dark mode<\/li>\n\n\n\n<li><strong>Test for both themes<\/strong>: Dark mode should receive equal attention in your testing process<\/li>\n\n\n\n<li><strong>Allow manual toggling<\/strong>: Some users prefer dark mode only at certain times<\/li>\n<\/ul>\n\n\n\n<p>That's proper dodgy,&#8221; says my London friend about sites that implement dark mode by simply inverting the <a href=\"https:\/\/inkbotdesign.com\/colour-schemes-for-websites\/\" title=\"Choosing The Best Colour Schemes For Websites\" data-wpil-monitor-id=\"141\">colour scheme<\/a> without considering the whole experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">16. Utilise Social Proof Elements<\/h2>\n\n\n\n<p>Humans are social creatures who look to others for guidance. <a href=\"https:\/\/inkbotdesign.com\/social-proof-website-design\/\" title=\"From Visitors to Converts: The Influence of Social Proof in Web Design\" data-wpil-monitor-id=\"125\">Social proof<\/a> elements leverage this psychology to build trust and encourage conversion.<\/p>\n\n\n\n<p>Adequate social proof includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Customer testimonials<\/strong>: Real quotes from satisfied clients<\/li>\n\n\n\n<li><strong>Reviews and ratings<\/strong>: Star ratings and written feedback<\/li>\n\n\n\n<li><strong>Trust badges<\/strong>: Security certifications, industry associations<\/li>\n\n\n\n<li><strong>Client logos<\/strong>: Recognisable brands you've worked with<\/li>\n\n\n\n<li><strong>Usage statistics<\/strong>: Number of customers, downloads, etc.<\/li>\n\n\n\n<li><strong>Social media evidence<\/strong>: Embedded posts showing positive mentions<\/li>\n\n\n\n<li><strong>Case studies<\/strong>: Detailed success stories from real customers<\/li>\n<\/ul>\n\n\n\n<p>The key to adequate social proof is authenticity. Fake <a href=\"https:\/\/inkbotdesign.com\/services\/testimonials\/\" title=\"Testimonials\" data-wpil-monitor-id=\"116\">testimonials<\/a> or inflated numbers will ultimately damage trust rather than build it. Use real examples, real numbers, and, where possible, include photos of real people.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">17. Design for Scanners, Not Readers<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"544\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-for-Scanners-Not-Readers-1024x544.webp\" alt=\"Design For Scanners, Not Readers\" class=\"wp-image-304171\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-for-Scanners-Not-Readers-1024x544.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-for-Scanners-Not-Readers-300x160.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Design-for-Scanners-Not-Readers.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Most website visitors don't read\u2014they scan. Design accordingly.<\/p>\n\n\n\n<p>To make content scannable:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use descriptive headings and subheadings<\/strong>: These act as signposts<\/li>\n\n\n\n<li><strong>Employ bullet points and numbered lists<\/strong>: They're easier to scan than paragraphs<\/li>\n\n\n\n<li><strong>Bold key information<\/strong>: Highlight essential points<\/li>\n\n\n\n<li><strong>Keep paragraphs short<\/strong>: 2-3 sentences maximum<\/li>\n\n\n\n<li><strong>Use descriptive link text<\/strong>: &#8220;Learn more about our services&#8221; is better than &#8220;Click here&#8221;<\/li>\n\n\n\n<li><strong>Employ meaningful images<\/strong>: Visuals can communicate concepts faster than words<\/li>\n\n\n\n<li><strong>Create clear sections<\/strong>: Use dividers, background colours, or spacing to separate content blocks<\/li>\n<\/ul>\n\n\n\n<p>We tried the new approach; it worked surprisingly well, with bounce rates dropping by 23% when we restructured content for scannability.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">18. Optimise Forms for Conversion<\/h2>\n\n\n\n<p>Forms are often the final hurdle between visitors and conversion. Their design deserves special attention.<\/p>\n\n\n\n<p>Form design best practices:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Keep them short<\/strong>: Every field you remove typically increases completion rates<\/li>\n\n\n\n<li><strong>Use single-column layouts<\/strong>: They're easier to navigate visually<\/li>\n\n\n\n<li><strong>Group related fields<\/strong>: Create logical sections for longer forms<\/li>\n\n\n\n<li><strong>Show progress for multi-step forms<\/strong>: Let users know how much remains<\/li>\n\n\n\n<li><strong>Use appropriate input types<\/strong>: Email fields should validate email formats, etc.<\/li>\n\n\n\n<li><strong>Provide helpful error messages<\/strong>: Explain what's wrong and how to fix it<\/li>\n\n\n\n<li><strong>Consider inline validation<\/strong>: Immediate feedback helps users correct mistakes<\/li>\n\n\n\n<li><strong>Make buttons descriptive<\/strong>: &#8220;Complete Purchase&#8221; is better than &#8220;Submit&#8221;<\/li>\n<\/ul>\n\n\n\n<p>Common form fields like name, email, and address can be autocompleted by browsers, saving users time and increasing completion rates. Ensure your form markup supports this functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">19. Create a Cohesive Brand Experience<\/h2>\n\n\n\n<p>Your website is likely one touchpoint in a broader brand ecosystem. Design should reflect and enhance your overall <a href=\"https:\/\/inkbotdesign.com\/services\/brand-identity\/\" title=\"Brand Identity Design\" data-wpil-monitor-id=\"114\">brand identity<\/a>.<\/p>\n\n\n\n<p>For brand cohesion:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use consistent colours<\/strong>: Match your established brand palette<\/li>\n\n\n\n<li><strong>Maintain typographic hierarchy<\/strong>: Use the same fonts and sizing relationships<\/li>\n\n\n\n<li><strong>Apply the same visual style<\/strong>: Photography, illustration, and graphic elements should share an aesthetic<\/li>\n\n\n\n<li><strong>Adopt a consistent voice<\/strong>: Content tone should align with your <a href=\"https:\/\/inkbotdesign.com\/brand-personality\/\" title=\"Brand Personality: How to Build an Unforgettable Brand\" data-wpil-monitor-id=\"126\">brand personality<\/a><\/li>\n\n\n\n<li><strong>Incorporate familiar elements<\/strong>: Carry design motifs across all touchpoints<\/li>\n\n\n\n<li><strong>Use your logo appropriately<\/strong>: Consistent placement and treatment build recognition<\/li>\n\n\n\n<li><strong>Consider multi-channel journeys<\/strong>: How does the site experience connect with other touchpoints?<\/li>\n<\/ul>\n\n\n\n<p>While innovative and unique website features can be tempting, they shouldn't come at the expense of <a href=\"https:\/\/inkbotdesign.com\/brand-consistency\/\" title=\"Brand Consistency: The Cornerstone of Memorable Brands\" data-wpil-monitor-id=\"129\">brand consistency<\/a>. Your site should be a natural extension of your other marketing materials.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">20. Implement Microinteractions for Delight<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Implement-Microinteractions-for-Delight-1024x502.webp\" alt=\"Implement Microinteractions For Delight\" class=\"wp-image-304172\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Implement-Microinteractions-for-Delight-1024x502.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Implement-Microinteractions-for-Delight-300x147.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2022\/11\/Implement-Microinteractions-for-Delight.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Microinteractions are small, subtle animations or feedback moments that make interfaces feel more alive and responsive.<\/p>\n\n\n\n<p>Effective microinteractions include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button hover states<\/strong>: Visual feedback when users interact<\/li>\n\n\n\n<li><strong>Form field focus<\/strong>: Highlighting the active input area<\/li>\n\n\n\n<li><strong>Loading indicators<\/strong>: Showing progress during delays<\/li>\n\n\n\n<li><strong>Success animations<\/strong>: Confirming completed actions<\/li>\n\n\n\n<li><strong>Toggles and switches<\/strong>: Making state changes obvious<\/li>\n\n\n\n<li><strong>Scroll-triggered animations<\/strong>: Revealing content as users move down the page<\/li>\n\n\n\n<li><strong>Subtle page transitions<\/strong>: Creating a sense of navigation between sections<\/li>\n<\/ul>\n\n\n\n<p>The keyword is &#8220;subtle&#8221;\u2014microinteractions should enhance the experience without becoming distractions. Animation should serve a purpose, not merely decorate.<\/p>\n\n\n\n<p>We all know nothing says &#8220;cutting-edge&#8221; like excessive parallax scrolling and flying elements, right? (That's sarcasm, folks\u2014restraint is your friend here).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">21. Test, Test, and Test Again<\/h2>\n\n\n\n<p>The most crucial website design tip might be this: your opinion matters less than your users' behaviour.<\/p>\n\n\n\n<p>Implement regular testing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User testing<\/strong>: Watch real people use your site and identify pain points<\/li>\n\n\n\n<li><strong>A\/B testing<\/strong>: Compare different versions to see which performs better<\/li>\n\n\n\n<li><strong>Heat mapping<\/strong>: Visualise where users click, move, and spend time<\/li>\n\n\n\n<li><strong>Analytics review<\/strong>: Identify standard exit pages and conversion blockers<\/li>\n\n\n\n<li><strong>Performance testing<\/strong>: Verify loading speeds across devices and connections<\/li>\n\n\n\n<li><strong>Accessibility audits<\/strong>: Ensure compliance with WCAG guidelines<\/li>\n\n\n\n<li><strong>Cross-browser testing<\/strong>: Check functionality across major browsers<\/li>\n<\/ul>\n\n\n\n<p>No amount of design theory can replace direct observation of how real users interact with your specific website. Be prepared to challenge your assumptions and revise your designs based on user behaviour.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Common Website Design Tips FAQs<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1747846895042\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What makes a website user-friendly?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>A user-friendly website has intuitive navigation, clear content hierarchy, fast loading speeds, responsive design for all devices, accessible features, and straightforward paths to completion for any tasks or goals.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846905740\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How important is mobile optimisation in 2025?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Critical. With over 70% of web traffic from mobile devices, designing for mobile-first is no longer optional. Google also uses mobile-first indexing, meaning it predominantly uses the mobile version of your site for ranking.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846916050\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Should I use templates or custom design?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>This depends on your budget, timeline, and specific needs. Templates offer cost-effectiveness and quick implementation but may lack uniqueness. Custom designs provide distinctiveness and tailored functionality but require greater investment. Many successful sites use customised templates as a middle ground.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846928731\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How many CTAs should a homepage have?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Less is more. While there's no magical number, limiting primary CTAs to 1-2 per section helps prevent decision paralysis. Your homepage might have 3-5 sections, each with a focused CTA.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846942538\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What's the ideal website loading time?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Under 2 seconds is the general benchmark in 2025. Every additional second of loading time increases bounce rates significantly. For e-commerce sites, even milliseconds can impact conversion rates.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846962584\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How often should I update my website design?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Major redesigns typically occur every 2-3 years, but more minor optimisations should happen continuously based on user data and performance metrics. The digital landscape evolves rapidly\u2014your site should evolve with it.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846978105\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Are video backgrounds suitable for conversion?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>They can be effective for engagement, but must be implemented carefully. Ensure they load efficiently, include pause controls, don't distract from key messages, and have fallbacks for users with limited bandwidth.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747846991887\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Should I use a chatbot on my website?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Chatbots can improve the user experience if they solve real problems. Before implementing one, identify the specific user needs it will address, ensure it works seamlessly, and provide an easy path to human support when needed.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747847010661\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I balance aesthetics and functionality?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Start with functionality as the foundation, then apply aesthetics within those functional constraints. Beautiful designs that frustrate users ultimately fail, while functional designs can be progressively enhanced with aesthetic elements.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1747847026221\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What makes a good navigation menu?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Clear, descriptive labels, logical organisation, consistent placement, visual feedback for the current section, and appropriate depth (avoiding nested sub-sub-menus when possible) all contribute to effective navigation.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Where Design Meets Success<\/h2>\n\n\n\n<p>Effective website design isn't about following trends or personal preferences\u2014it's about creating interfaces that help users accomplish their goals while achieving your business objectives.<\/p>\n\n\n\n<p>The 21 tips we've covered form a solid foundation for beginners while serving as essential reminders for seasoned pros. The fundamentals remain consistent even as technologies evolve.<\/p>\n\n\n\n<p>Remember that <a href=\"https:\/\/inkbotdesign.com\/great-design-increase-sales\/\" title=\"Does Great Design Increase Sales? An In-Depth Look\" data-wpil-monitor-id=\"120\">great design<\/a> is iterative. Launch, learn, refine, and repeat. Use analytics and user feedback to improve your website's performance continuously.<\/p>\n\n\n\n<p>As you design your next project, ask yourself: &#8220;Does this make it easier for users to accomplish what they came here to do?&#8221; If yes, you're on the right path to creating a website that truly works.<\/p>\n\n\n\n<p>Ready to turn these <a href=\"https:\/\/inkbotdesign.com\/design-principles\/\" title=\"10 Simple Design Principles to Create Stunning Graphics\" data-wpil-monitor-id=\"134\">design principles<\/a> into reality? <a target=\"_blank\" href=\"https:\/\/inkbotdesign.com\/contact\/request-a-quote\/\" rel=\"noopener\">Contact Inkbot Design<\/a> for professional assistance with your website project.<\/p>\n\n\n\n<p>After all, the best website designs aren't just seen, experienced, remembered, and revisited.<\/p>\n<style>\r\n.lwrp.link-whisper-related-posts{\r\n            \r\n            margin-top: 40px;\nmargin-bottom: 30px;\r\n        }\r\n        .lwrp .lwrp-title{\r\n            \r\n            \r\n        }.lwrp .lwrp-description{\r\n            \r\n            \r\n\r\n        }\r\n        .lwrp .lwrp-list-container{\r\n        }\r\n        .lwrp .lwrp-list-multi-container{\r\n            display: flex;\r\n        }\r\n        .lwrp .lwrp-list-double{\r\n            width: 48%;\r\n        }\r\n        .lwrp .lwrp-list-triple{\r\n            width: 32%;\r\n        }\r\n        .lwrp .lwrp-list-row-container{\r\n            display: flex;\r\n            justify-content: space-between;\r\n        }\r\n        .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n            width: calc(10% - 20px);\r\n        }\r\n        .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n            \r\n            \r\n        }\r\n        .lwrp .lwrp-list-item img{\r\n            max-width: 100%;\r\n            height: auto;\r\n            object-fit: cover;\r\n            aspect-ratio: 1 \/ 1;\r\n        }\r\n        .lwrp .lwrp-list-item.lwrp-empty-list-item{\r\n            background: initial !important;\r\n        }\r\n        .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n        .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n            \r\n            \r\n            \r\n            \r\n        }@media screen and (max-width: 480px) {\r\n            .lwrp.link-whisper-related-posts{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-title{\r\n                \r\n                \r\n            }.lwrp .lwrp-description{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-list-multi-container{\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-multi-container ul.lwrp-list{\r\n                margin-top: 0px;\r\n                margin-bottom: 0px;\r\n                padding-top: 0px;\r\n                padding-bottom: 0px;\r\n            }\r\n            .lwrp .lwrp-list-double,\r\n            .lwrp .lwrp-list-triple{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-row-container{\r\n                justify-content: initial;\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n            .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n                \r\n                \r\n                \r\n                \r\n            };\r\n        }<\/style>\r\n<div id=\"link-whisper-related-posts-widget\" class=\"link-whisper-related-posts lwrp\">\r\n            <h4 class=\"lwrp-title\">You May Also Like:<\/h4>    \r\n        <div class=\"lwrp-list-container\">\r\n                                            <ul class=\"lwrp-list lwrp-list-single\">\r\n                    <li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/graphic-design-ethics\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Graphic Design Ethics: Copycats, Clients, and Copyrights<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/different-types-of-logos\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">The 7 Different Types Of Logos &amp; How To Use Them<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/sensory-branding\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Sensory Branding: Engaging All 5 Senses<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/personalisation-in-marketing\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Personalisation in Marketing: Why it Matters<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/digital-pr-strategies\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Digital PR Strategies to Boost Your Online Presence<\/span><\/a><\/li>                <\/ul>\r\n                        <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Discover 21 practical website design tips that beginners and professionals use to create effective, user-friendly websites that convert visitors into customers.<\/p>\n","protected":false},"author":1,"featured_media":304165,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[48],"tags":[],"class_list":["post-40265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-brand-strategy","no-featured-image-padding","resize-featured-image"],"acf":[],"_links":{"self":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/posts\/40265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/comments?post=40265"}],"version-history":[{"count":0,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/posts\/40265\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/media\/304165"}],"wp:attachment":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/media?parent=40265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/categories?post=40265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/tags?post=40265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}