About me Amy Kvistad is a freelance web designer with a background in graphic design; and co-organizer for the Boston WordPress meetup. She delves into typography, layout, and clean design across a wide range of industries. Her design process is customer-focused, research driven, and adaptable. She loves warm weather and racing on sailboats.
Summary Website design and UX principles applied to WordPress websites – from a designer's perspective. The process starts with discovering client objectives and the website audience. This informs decisions on colors, fonts, and layout. A mood board helps to communicate the design direction for the website and user research informs decisions on website navigation and content hierarchy. Tools of the trade include color, stock photo and icon resources. Implementing these design discoveries into your WordPress website is not as hard as you think.
Website Visual Design Visual design blends typography, color, space, texture, and imagery to create a website’s look and feel. Because it’s the first thing they see, visual design gives visitors their first impression of your site and often, your company. It’s also essential for communicating your brand and effectively marketing your products and services.
Responsive Design Web users access content in a variety of ways. Therefore, it’s crucial to have a website that adapts to provide a great experience for every visitor, whether they’re on a desktop, tablet, or phone. Responsive design improves site effectiveness and increases customer satisfaction.
User Experience Design User experience design focuses on the needs and behaviors of website users, determining the appropriate strategy and framework to ensure that users find the site useful, easy to use, and enjoyable to visit.
User Interface Design User interface design involves the application of visual design to the structure and function determined in the user experience and interaction design steps. This process is not just about making the site look good, it’s about visually guiding the user on each page and across the site.
Interaction Design These days, we don’t just surf the web—we type, click, scroll, tap, and swipe. Computers now fit in our pockets and play a huge role in our daily lives. Interaction design considers all the ways people engage with devices and content, and incorporates elements that make user interaction more natural, pleasurable, and useful.
Research Research involves gathering data and synthesizing that data in order to improve usability and reach our goals and objectives. It helps us learn more about our client and the project.
Discovering client objectives • The process starts with discovering client objectives • Website questionnaire • Talk with your client to find what their vision is for the website • Look at competitor sites • Learn about the website requirements • What are the website goals? • Will your client be adding new functionality?
Discovering the website audience • Discovering the website audience • You need to know who your user is so that you can make a usable website for them • Are you reaching the right audience? • Develop personas
Information Architecture Information architecture is the structure behind a well-thought-out application or website. IA results in categorization, schema, mapping, and navigation that is intuitive and user-friendly.
Navigation • Based on research of the website audience you can set up website navigation for audience personas • Make it easy to reach relevant content • Make it findable • Provide more than one way to get to your content • Top navigation links • Footer navigation links • Image links • Text links • Keep SEO keywords in mind
Navigation Guidelines • Keep it simple • Have 3-5 top navigation links • Use breadcrumbs, footer navigation or go to top of page navigation • Use card sorting to categorize topics to a few top levels • Use internal text page links to network your pages together – this improves SEO, gives more life to older posts/pages and helps users access info • Have a search box
Content Organization • A content audit shows you all the information on your website – use this to group content into categories – as few as possible • Discover content that should link to other categories • Set up post categories to organize • Use words that will improve SEO • Keep it simple with as few post categories as possible • Keep users in mind when organizing
Content Strategy Content strategy plans for the creation, curation, and maintenance of text, images, audio, and video. It also defines the tone and character of a business, in order to engage specific user groups and achieve business objectives.
Designing • Using the research you did and the client requirements: • Sketch out page layouts with user in mind • Set up a good page hierarchy – headings, paragraphs, break up text for readability • Choose images with the right tone and compliment the content • Be consistent – rounded corners or square • Use your brand colors • Use your fonts
Wrapping up • Start with research and discovery • Learn requirement and who your users are • Design and structure the website • Use tools of the trade to make the job easier