In the dynamic realm of web design, the expertise of seasoned professionals like Senior Graphic Designer Noah Aird from Americaneagle.com plays a pivotal role in shaping the digital landscape. In this episode of Modern Marketing Messages, our host, Taylor Karg, sits down with Noah to discuss the important factors that make up an effective website design.
Introducing Senior Graphic Designer Noah Aird
Noah Aird is a senior graphic designer at Americaneagle.com. He primarily works on the experience design team, focusing on website designs and UX/UI design. UX design involves functionality and addressing business goals, while UI design deals with the visual aspect. Additionally, his team takes on creative projects such as logo design and branding decks. Noah's journey to becoming a designer was unconventional, as he initially studied computer science but found his passion in combining art, psychology, human interaction, and website development. Starting with his first design job, he has been progressing in his career ever since.
Graphic Design Creative Process
For Noah and the other graphic designers at Americaneagle.com, their design process begins with a brief from the project manager, including a site map to understand the project scope and navigation. During a kickoff call with the client, they gather as much information as possible, including brand guidelines, preferences, needs, and wants.
Next, the designers conduct research to find inspiration from other websites, considering factors like color schemes and UI elements. Files are then set up in Figma and they begin the design process, starting with the homepage and working top to bottom. Simultaneously, the graphic designers create a design system to ensure consistent elements throughout the site, such as buttons and fonts. Once the homepage design is ready, it goes through revision rounds with the client before repeating the process for interior pages. Once all designs are approved, the files are prepared for handoff to frontend developers who bring the design to life.
Key Elements to Consider in Effective Web Design
Below, we detail the following six key elements to consider for effective web design, from the perspective of expert graphic designer Noah Aird:
- Responsive design
- Branding
- Website speed
- Accessibility
- Movements and trends
- Sources of inspiration
1: What is Responsive Design?
Responsive design ensures that a website, and all its design elements, are responsive to work across different devices like desktops, tablets, and mobiles. In the past, there was adaptive design, requiring separate designs for different mediums. Now, graphic designers create one design that caters to all screen sizes. For efficiency, they focus on desktop and mobile designs, using standardized artboards for 1920-pixel desktops and 375-pixel mobiles, covering most screen sizes. The goal is flexibility to fit various devices as manufacturers offer different screen sizes. However, it can sometimes be challenging to account for all screen size possibilities, especially with multiple designs.
Challenges with Responsive Design
Noah faces challenges in implementing responsive design, particularly with tables and complex elements like event calendars. On desktop, tables can show rows and columns neatly, but on mobile, they need to find creative ways to display the information vertically, using hidden tables, sliders, or chunking rows. Similarly, event calendars require multiple steps on mobile to navigate through the information efficiently. Despite the complexities, Noah and the graphic design team at Americaneagle.com prioritize mobile-first design, which makes the transition from desktop to mobile relatively quick for most sections – except for the more intricate components.
2: Branding Through Visual Elements
When it comes to incorporating branding elements into website design, Noah explains the key considerations for marketers. Brand guidelines typically cover logo usage, color schemes, and typography, but more comprehensive ones may include brand voice, photography, and iconography. Marketers should understand that colors used in graphic design might differ from those used in website design. Website colors are primarily for calls to action, buttons, and interactive elements, making them stand out and catch users' attention. Logo design should also be adapted to work well on websites, especially for smaller screens. Noah shares an example of a client with a logo that became illegible on mobile, so they altered the logo, separating the icon and wordmark for better suitability on the website.
When a company lacks brand guidelines, usually smaller organizations or businesses, Noah conducts a flash brand discovery call during the design process. They inquire about logo colors, potential color schemes, and fonts. If the client doesn't have specific preferences, they analyze sites the client likes or dislikes to choose appropriate fonts. By covering these bases upfront, they can proceed safely with the design process even without official brand guidelines.
3: The Impact of Web Design on Website Speed
Designing with website performance in mind, Noah discusses trade-offs regarding site speed. Incorporating visuals is essential for engagement, but images can slow down loading times. To mitigate this, they compress JPEGs and limit images while still maintaining visual appeal. Fonts can also impact speed, so they recommend using Google fonts, formatted for the web and royalty-free. Clients can avoid costly licensing fees for other fonts. Additionally, they leverage CSS for design attributes, avoiding the need for stylized images and optimizing site speed. Frontend developers use CSS, a frontend language, to handle design elements effectively. JavaScript is another programming language used to enhance website functionality.
Optimize Designs to Maintain Site Speed
Noah mentions using image compression tools for lossless compression to reduce image file sizes without compromising quality, ensuring faster loading times on the website. Additionally, frontend developers may use tools to gauge site speed, but overall, the main focus is on limiting the number of high-resolution photos and videos on the website to maintain visual appeal and optimal performance.
4: Web Accessibility & the Role of a Graphic Designer
As a graphic designer, Noah's role in ensuring accessibility mainly focuses on color contrast ratios for text and interactive elements like buttons and form fields. This consideration is crucial for people with visual impairments and color blindness. They use online tools to calculate the ratio between the foreground and background colors and aim to meet at least the bare minimum accessibility requirements, potentially exceeding them based on client preferences. Overall, Americaneagle.com emphasizes accessibility, with most of the responsibility falling on developers to implement accessible design practices.
Ensuring color contrast ratios meet accessibility standards is mandatory for every design, including home and landing pages, to prevent potential legal issues. Additional considerations include motion sensitivity, which requires play and pause buttons for videos or scrolling banners to accommodate those prone to motion sickness.
5: Top Web Design Trends & Movements
There have been a number of design movements and trends throughout the history of website design.
Primitive Graphic Design
In the early days of the web (the 1990s), primitive designs were commonplace. Primitive graphic design refers to the early or basic forms of graphic design, using limited tools, techniques, and resources. It’s characterized by simple layouts, basic typography, and rudimentary use of colors.
Primitive graphic design reflects the limitations of the technology and resources available at that time. It includes hand-drawn illustrations, manual typesetting, and basic printing methods. While it may lack the complexity and refinement of contemporary design, primitive graphic design played a foundational role in shaping the evolution of graphic design as a whole.
Skeuomorphic Design
After that was the emergence of skeuomorphic design in the early 2000s, characterized by real-world interface imitation. Elements within a digital interface mimic the appearance and physical attributes of real-world objects or materials. It's a design approach that aims to replicate the familiar look and feel of tangible objects or textures, often to make digital experiences more intuitive and relatable to users.
In skeuomorphic design, digital elements might have textures, shadows, gradients, and other visual cues that resemble their real-world counterparts. For example, a digital note-taking app may feature virtual pages that look like actual paper in a notebook, complete with lines and texture, or a calendar app may have buttons that resemble physical buttons on a classic calendar.
Flat Design
Flat design is a minimalist design style that emphasizes simplicity, clarity, and the use of clean, two-dimensional elements. In contrast to more elaborate and ornamental design approaches, flat design strips away excessive visual effects like shadows, gradients, and textures, resulting in a sleek and streamlined aesthetic. Key characteristics of flat design include simplicity, minimalism, typography, bright colors, two-dimensionality, and minimal skeuomorphism.
Flat design gained popularity as a response to the visual complexity of earlier design styles, especially skeuomorphic design, which sought to mimic real-world textures and objects within digital interfaces. It was driven by the desire for clarity, faster loading times, and a more modern and adaptable visual language.
Brutalist Design
Brutalist design is a distinctive and unconventional design style that emerged as a reaction to the polished and sleek aesthetics of mainstream design trends. Inspired by the architectural movement of the same name, brutalist design in the digital realm embraces rawness, functionality, and a deliberately unrefined visual language. Key characteristics of brutalist design include raw aesthetics, bold typographic, limited color palette, minimalist approach, use of space, rejection of conventions, anti-responsive elements, and more.
Brutalist design deliberately defies the expectations of traditional design principles, embracing a certain level of "ugliness" or anti-aesthetic as a statement against standardized design norms. It aims to create a unique and memorable user experience through distinctive visual language.
Neumorphism
Neumorphism, also known as soft UI (user interface), is a relatively new design trend that aims to create a realistic and tactile UI by combining elements of skeuomorphism and flat design. Neumorphism takes inspiration from the physical world, such as the interaction between light and shadows on objects, to create a sense of depth and realism in digital interfaces. Key characteristics of neumorphism include soft surfaces, minimal color palette, subtle shadows and highlights, functional simplicity, adaptability, and accessibility considerations.
Over the years, Neumorphism gained attention for its ability to create visually striking and engaging user interfaces while also providing a sense of familiarity and comfort. However, it also comes with a few challenges, particularly related to maintaining usability and accessibility, as the soft contrast between elements can sometimes affect readability.
Design Trends & Branding
Noah notes the role of graphic designers in identifying relevant design movements and adapting them based on clients' branding and preferences for a website's visual direction. Typically, he browses different websites across the internet and discerns which kind of category or genre it falls into, and then depending on a client's branding or the direction they want to go with a site, he implements features of a specific design movement.
At Americaneagle.com, graphic designers primarily stick with flat design due to its widespread use and suitability for most clients' branding. Noah notes that neo-brutalism and new morphism require specific branding to align with, using an example of a project for an educational society that embraced neo-brutalism. The speaker expresses enthusiasm for working on projects that allow them to explore different design movements like neo-brutalism.
6: Sources of Design Inspiration
Noah discusses his sources of design inspiration, including design blogs, galleries showcasing websites in various styles and movements, and design website awards like the Webby Awards and W3 Awards. He mentions the variety of content available and notes that they often refer to the awards programs’ websites to browse through category winners. Noah also mentions the past conferences associated with the Webby Awards and highlights the value of these sources for their design work.
Like many other graphic designers, Noah has several go-to resources for inspiration, including design blogs like Web Design Depot and Abduzeedo, which focus on digital design, illustration, package design, and branding. He also mentions online design galleries like httpster and Site Inspire, which showcase various websites and new styles. Additionally, he shares a lesser-known but valuable source called Land Book, a website that provides daily updates of impressive website designs. This source allows filtering by style and technique, making it a go-to resource for design inspiration. Overall, these sources contribute to his creative process and provide a wide range of design ideas and styles to draw from.
Always Design with Best Practices in Mind
While graphic designers need to be mindful of developers' capabilities and project budgets, they generally design within best practices to avoid excessive complications. Noah mentions that more complex or extravagant designs may require additional development hours. To ensure feasibility, the team includes a frontend developer review in the design process. This step helps identify potential challenges or red flags early on, allowing for adjustments and smoother implementation of the design. The collaborative approach helps find suitable solutions and ensures that the final design aligns with both creative vision and technical feasibility.
3 Factors to Consider Before Beginning a Website Redesign
When a marketing team is preparing for a website redesign, there are several design factors to consider to ensure the finished product meets expectations and matches existing branding.
Effective Communication
When beginning a website redesign project, the marketing team should consider three key factors for success. Firstly, effective communication and thoroughness are essential. Providing detailed information and examples during the kickoff call and onboarding process helps narrow down the vision and prevents mid-project changes.
Consistent Branding
If a brand guideline exists, its application in various mediums should be examined, ensuring consistent branding across different channels like social media and print materials.
Invest in Photography
Investing in high-quality photography is crucial, as it significantly impacts a website's appeal and authenticity. Lifestyle photos can help consumers relate to products, enhancing the user experience. Noah emphasizes hiring a professional photographer for product and lifestyle shots, as their expertise and post-production editing elevate the final result's quality. While upfront costs are involved, the long-term value and impact on the website's visual appeal make it a worthwhile investment.
Listen to Modern Marketing Messages Today!
As we navigate the intricate web of design factors, from responsive interfaces to captivating visual elements, it becomes evident that web design is not just about aesthetics — it's about crafting an immersive user experience that seamlessly marries form and function.
Start listening to MMM on Apple Podcasts, Spotify, or wherever you get your podcasts.
Connect with:
- Modern Marketing Messages: Podcast // Twitter // Instagram // Facebook // YouTube
- Taylor Karg: LinkedIn
- Noah Aird: LinkedIn
- Resources: Web Design Development Services
Brought to you by Americaneagle.com, a digital marketing and web design company, Modern Marketing Messages discusses the latest and greatest in both online and offline marketing tactics, strategies, and trends. We take a deep dive into anything and everything marketing, speaking to the best and brightest minds in technology and marketing. Episodes will cover different areas of focus, from advanced SEO to paid search, personalization to influencer marketing, and everything in between.
Follow now.
Contact Us About Our Expert Web Design & Digital Marketing Services
Americaneagle.com has been providing expert web design services to customers for more than 25 years. Our proven design approach ensures your website delivers a consistent, effective, and successful experience across all channels. Through discovery research, performance and UX analysis, visual design, testing and validation, and more, we’re confident in our ability to create functional, beautiful designs. Contact us today to learn more.
About Author
