SaaS: Amateur vs. Pro Websites
Amateur Example: KashFlow
Design Issues:
Overuse of White Space: The large opening slider with excessive white space felt disjointed and out of place. White space, when used effectively, can improve readability and draw attention to key elements. However, in this case, it resulted in a sense of emptiness and lack of focus, meaning the first impression a user gets is of an incomplete or poorly thought-out design.
Poor Colour Theory: The colour scheme is bland, with the overuse of a single pink colour for CTAs and icons, making it difficult to identify key actions. Colour theory is essential in guiding user behaviour and enhancing aesthetic appeal. The lack of complementary colours and over-reliance on pink dilutes the visual hierarchy and could confuse users about where to focus their attention.
Small Text and Condensed Layout: The text is small and hard to read, lacking emphasis on the benefits. Readability is key and the small, tightly packed text forces users to strain their eyes, leading to a poor user experience. Important messages get lost, and users may abandon the site out of frustration.
Inconsistent Branding: The use of random colours and misaligned elements makes the site look unprofessional at times. Consistent branding creates a slick look and builds trust. When elements are misaligned and colours are randomly chosen, it disrupts the user experience and shows a lack of professionalism.
Lack of Visual Hierarchy: Important information, like testimonials and partner logos does not stand out, contradicting their impact. Visual hierarchy guides users through the content in a structured way, highlighting key elements. Without it, users struggle to find important information, reducing the site’s effectiveness in converting visitors.
Pro Example: Xero
Design Strengths:
Effective Use of Space: The homepage has a clean title with a balanced use of white space, ensuring key elements stand out. Proper use of white space helps to create a breathable design, allowing elements to stand out and makes the content more digestible.
Complementary Colours: Introduction of tertiary colours enhances visual appeal and guides user attention to important CTAs. A well-thought-out colour palette improves visual engagement and directs users to key actions effortlessly.
Clear, Large Text: Easy to read text with a focus on benefits on this site makes the value proposition clear. Clear typography enhances readability and ensures that users can quickly grasp the site’s message and benefits.
Consistent Branding: All elements on the website are well-aligned, maintaining a professional look. Consistent branding reinforces the company’s identity and builds trust with the audience.
Strong Visual Hierarchy: Key information, such as credibility indicators and testimonials are clearly displayed. A well-defined visual hierarchy guides users through the site logically, ensuring that important information is easily accessible.
Clothing: Amateur vs. Pro Websites
Amateur Example: A.M Custom Clothing
Design Issues:
Clashing Colours: The choice of vibrant green and orange creates a chaotic visual experience at times. Colour harmony is crucial in web design to create a visually pleasing experience. The clashing colours can distract users and reduce the quality of the site.
Poor Image Selection: We found the background images did not complement the text, reducing readability – images should enhance the content and support the site’s message. Poorly chosen images can make the site look amateurish and unprofessional.
Lack of Interactive Elements: Absence of hover states and clear CTAs made the site feel static and unengaging. Interactive elements like hover states provide feedback to users, making the site feel more dynamic and user-friendly.
Inconsistent Layout: Random and unbalanced alignment of elements create a chaotic appearance. A consistent layout ensures that the site looks organised and professional. Random alignments disrupt the flow and make navigation difficult.
Overwhelming Content: Excessive text blocks without clear segmentation lead to information overload. Breaking down content into digestible sections improves readability and user engagement. Overwhelming users with too much text can drive them away.
Pro Example: MondayMerch
Design Strengths:
Harmonious Colour Scheme: The use of a consistent colour palette creates an aesthetically pleasing feel to the site, making the site more attractive to users.
High-Quality Imagery: Professional, contextually relevant images enhance the overall appeal. High-quality images improve the visual appeal and can effectively communicate the brand’s message.
Engaging Interactive Elements: Clear hover states and well-defined CTAs encourage user interaction. Interactive elements make the site more engaging and guide users through their journey effectively.
Consistent Layout: As mentioned, thoughtful and balanced alignment of elements create a clean, orderly appearance. A consistent layout enhances the user experience by making the site easy to navigate and visually pleasing.
Clear Content Segmentation: Information is broken down into digestible sections, improving readability and engagement. Segmenting content into clear sections makes it easier for users to find the information they need and improves overall engagement.
Travel: Amateur vs. Pro Websites
Amateur Example: TravelTek
Design Issues:
Excessive Text: Overloading your website with text, makes it difficult for users to find key information quickly. Users prefer concise information that is easy to scan. Excessive text can overwhelm users and drive them away.
Inconsistent Text Alignment: Random switching between centred and left-aligned text disrupts the visual flow. Consistent text alignment is crucial for readability and visual appeal. Inconsistencies can confuse users and make the site look unprofessional.
Lack of Clear CTAs: At times users might be unsure where to click, reducing engagement. Clear CTAs guide users through their journey and improve engagement and conversion rates.
Generic Imagery: In our opinion, we felt the use of stock photos did not resonate with the brand or audience enough on this website. Imagery should reflect the brand’s identity and resonate with the target audience. Generic images can make the site feel impersonal and unprofessional.
Poor Spacing: We felt, some elements were fairly crammed together, reducing readability and visual appeal. Proper spacing between elements improves readability and creates a more pleasant user experience.
Pro Example: Rezdy
Design Strengths:
Concise Text: The information is presented clearly, making it easy for users to understand. Concise text helps users quickly grasp the key messages and benefits of the site.
Consistent Alignment: The uniform text alignment enhances readability and visual flow. Consistent alignment creates a more organised and professional look.
Prominent CTAs: Clear, strategically placed CTAs guide user actions effectively. Prominent CTAs ensure that users know exactly where to click, improving engagement and conversions.
Custom Imagery: We particularly like the use of bespoke images that align with the brand’s message and audience. Custom imagery enhances the brand’s identity and makes the site more engaging.
Adequate Spacing: Generous spacing improves readability and creates a pleasant visual experience which overall makes the site look more organised.
eCommerce: Amateur vs. Pro Websites
Amateur Example: Brazen Gaming Chairs
Design Issues:
Busy Header: Cluttered headers that take up too much space can distract from the product details. A busy header can overwhelm users and distract them from the main content of the page.
Inconsistent Colours: The overuse of clashing colours like mustard yellow and blue creates visual chaos at times. Inconsistent colours can make the site look unprofessional and reduce user engagement.
Dense Content: The excessive text with minimal visual elements, makes it hard for users to digest information. Dense content can overwhelm users and make it difficult for them to find the information they need.
Misaligned Elements: The lack of proper alignment makes the site look unstructured and amateurish. As mentioned, misaligned elements disrupt the visual flow and make the site look unprofessional.
Ineffective CTAs: The CTAs do not stand out, reducing conversion opportunities, ineffective CTAs can result in lost conversion opportunities as users may not know where to click.
Pro Example: X Rocker
Design Strengths:
Clean Header: A streamlined header that allows for better focus on product details, ensures that users can focus on the main content without distractions.
Cohesive Colour Scheme: They use a thoughtful use of colours to enhance visual appeal and guide user focus, creating a visually pleasing experience and helps guide user attention to key elements.
Balanced Content: Well-structured content with a good mix of text and visuals for easier digestion, improves readability and helps users find the information they need quickly.
Aligned Elements: Proper alignment and spacing which create a professional and orderly appearance. Aligned elements create a more organised and professional look, improving the user experience.
Effective CTAs: Prominent, well-designed CTAs that stand out and encourage user action effectively guide users through their journey and improve engagement and conversion rates.
Conclusion
The key takeaways from these comparisons are about the right balance between aesthetics, functionality and user experience. Professional websites have strategic use of space, colour theory, text alignment, and interactive elements to guide users easily and boost conversions. At Strafe, we know that small tweaks and careful design can take an amateur site to professional standards, ultimately driving better engagement and higher conversion rates.
When considering the importance of white space and how it can either enhance or detract from a website’s overall look, think about how properly utilised white space can make a design feel airy and professional, but when overdone or underdone, it can create a sense of emptiness or clutter.
Colour theory also plays a significant role in website design, a consistent colour palette can draw attention to key areas and create an aesthetically pleasing experience, while clashing colours can confuse users and reduce the site’s overall effectiveness.
Content readability and segmentation are equally as important for us at Strafe, breaking down information into manageable chunks and using clear, large text can significantly enhance the user experience. Additionally, the strategic placement of CTAs and interactive elements can guide users through their journey, improving engagement and conversion rates.
Consistent branding and alignment also contribute to a professional look, when elements are misaligned or randomly placed, it disrupts the visual flow and makes the site look unprofessional. Consistent branding reinforces the company’s identity and builds trust with the audience.
In conclusion, while the differences between amateur and professional websites may seem subtle, they have a large impact on user experience and conversion rates. By paying attention to details like white space, colour theory, content readability and alignment, you can transform your site from amateur to professional, ensuring it not only looks good but also functions effectively.
Watch the full video using the link below:
