Web design

Tag: Web design

How to design a website

Why good web design is better than it looks

On the internet, form is function. The most successful and effective online experiences are a combination of a site’s operation and its look-and-feel.

Digital design inherits many of the principles of traditional print design, including:

  • Typography (serif vs. sans-serif, kerning, tracking, and leading / line height)
  • Grid systems and alignment (margins, padding, and empty space)
  • Colour theory (the colour wheel; colour harmony and schemes)

However, digital and print design are fundamentally different.

The difference between web and print

There are fundamental differences between the technical requirements for print and digital design elements.

Producing a newsletter for print, for instance, is a different set of requirements for reproducing the same newsletter online.

Some of the basic differences between digital and print are:

  • Colour models: Web uses RGB for screens, while print uses CMYK.
  • Image resolution: Web images are 72dpi while print images are 300dpi.
  • Image formats: Web relies on PNG, JPG, and SVG; print uses PDF, EPS, and TIFF.
  • Fonts: Sans-serif fonts are easier to read on screens, while serif are easier to read in print. Print fonts are a one-time purchase or included with desktop software, web fonts are subscription-based (requiring web licensing) or free (e.g. Google Fonts)
  • Interaction and flexibility: Web design is interactive with flexible layouts that adapt to screen sizes; print is a fixed layout.

Elements of good digital design

User Interface (UI): the aesthetics of the site’s appearance

  • Simplicity: Clean and uncluttered designs incorporate visual elements and white space to improve usability and focus.
  • Visual hierarchy: Arranging elements to direct the user’s eye to key information first. This approach is guided by concepts such as Proximity Principle and Fitts’ Law.
  • Navigation: Ensure the site is intuitive, allowing users to find information quickly and easily.
  • Consistency: Uniform usage of fonts, colours, link and button styles across the site creates a professional experience.
  • Responsiveness: A website should work on all screens, including mobile and tablet.

User experience (UX): how the user interacts with the site

A user’s experience of a website encompasses their emotions and perceptions of a website: how they travel through it, how it responds to their clicks, the time this takes – and the feedback it gives them.

The primary goal of good UX is ease of use. To achieve this, good web design incorporates the following:

  • Information Architecture (IA): Structuring, organising, and labelling content to make digital products intuitive, findable, and navigable.
  • Fast load times: Fast-loading sites improve user retention and lift the site’s score for search engine optimisation (SEO).
  • Interactive elements and feedback: Properly functioning elements like search, shopping carts and interactive menus, along with visual feedback such as hover and click effects, help users feel in control.
  • Accessibility: Standards such as the Web Content Accessibility Guidelines to ensure the site is usable by people with disabilities, but also encourage good web design practices.

Our web design process: five steps

Count them on one hand

  1. Discovery and planning. Review with the client and stakeholders; confirm the brand requirements and business overview, the target audience, deliverables, budget and timeline. Draft a brief.
  2. Draft IA and wireframes. Information architecture demonstrates the structure of the content. Low-fidelity black-and-white wireframe sketches focus on content placement, UX and UI. Review with the client and sign off.
  3. Draft designs. Present as flat art in Figma or similar app. Homepage design sets the tone for the rest of the site. A structured feedback phase ensures the visual style meets user expectations.
  4. Build. Implementing the signed-off designs in a live development site is the true test of the design. Code the frontend / backend, implement the visual elements and set up content management systems; review; update. Test on different platforms.
  5. Launch. Deploy the development site to a live server. Test layout and functionality (e.g. forms). Make adjustments, bug fixes, client changes as required. Provide post-launch support to the client. Monitor the site performance and provide support going forward.

My Joiner

My Joiner Ltd is a Wellington-based company specialising in kitchen installations for the medium to high-end market. Trademaster and kitchen installation specialist Ulli Köhler needed a high-quality, low-maintenance site that showcased his work and would stand for years. We designed and built Ulli a WordPress brochure site with high quality images for strong graphic impact optimised it for SEO, with a custom form for ease of contact.

Dewar Law

A legal firm working in a competitive local field, Dewar Law required a refreshed website with improved search ranking that incorporated rich links to a third-party provider, Settify. After scoping the client’s requirements we recommended switching platforms from DNN to the WordPress CMS. We incorporated the client’s refreshed branding with new information architecture, SEO copywriting and metatags to optimise the site for search engines and ensure traffic was retained after switchover. The new site ranks highly on chosen search terms and can be easily updated as required.

Rob Neil Photography

Photographer Rob Neil is an independent professional photographer covering a range of subject matter. He wanted a site to showcase and promote his work that would have a long shelf-life and be easy to maintain. We designed a multiple-portfolio site with prominent calls-to-action in each section to maximise user response. We built the site in WordPress using native CMS components and the fewest possible plugins. The finished site is a simple, fast and reliable portfolio with no distracting animations or gimmicks. The client is able to manage it himself and has ongoing support from us as part of our standard hosting package.

RVPN

Rainbow Violence Prevention Network (RVPN) is a nationwide collective of organisations and individuals who work in various stages of violence prevention. The collective’s WordPress site required being updated for accessibility. Webstruxure rebuilt the site so it met the WCAG (Web Content Accessibility Guidelines) international standards for digital accessibility. The updated interface includes high contrast text for readability and tabbable menus and content that accommodates text-to-speech (TTS), or voice-controlled navigation.

Te Toi Mahana

Housing services provider Te Toi Mahana needed to update its website to support its new corporate strategy. We created a new site for them on WordPress that incorporated their brand look-and-feel. We improved the information architecture and UI to shorten user journeys, highlighted news and case studies for relevant audience sectors, and updated contact forms for clients and community to better align with Te Toi Mahana’s business goals. We migrated existing content to the new site and tagged it to improve the site’s SEO. We shifted hosting to our platform on Kinsta to improve the site’s speed and reliability and provided training so Te Toi Mahana staff can develop and maintain the site going forward.

Fulbright New Zealand

The site for US-NZ exchange awards programme Fulbright New Zealand is a valuable source of news and information and a key call-to-action for applicants and stakeholders. However, over time the wealth of documentation had become confusing to navigate for public users and difficult for Fulbright staff to maintain. To resolve this we revised the site navigation, information architecture and user interface to improve the user experience. In parallel, we overhauled the site’s backend functionality to make it easier for Fulbright staff to maintain. The updated site is designed to support staff, applicants and grantees into the next decade.

Royal Aeronautical Society NZ

RASNZ is the New Zealand branch of an international membership organisation and required an updated site to better reflect its local community and highlight member participation. We built a fresh WordPress site with improved look and feel and used an events plugin to simplify the site administration. We configured WordPress admin access levels to allow branch users to create and edit posts. The new site is better patronised by users and can be updated by administrators as required.

Boulcott Hospital

Following a change in ownership, Hutt Valley private hospital Boulcott Hospital needed to relocate its website hosting and to present updated content to better reflect its areas of specialisation and standing in the local community. We delivered a new site with updated IA and content recommendations and a design that supported Boulcott’s brand. We replaced their legacy intranet system with a web-based WordPress solution which is less expensive and simpler to configure. The new site better guides patients, clients and health professionals, and is easier for staff to maintain. The intranet manages user permissions to deliver PDF timesheets to staff and Microsoft Power BI reports to senior staff and board members.

Living Streets Aotearoa

Living Streets Aotearoa promotes walking friendly communities in New Zealand. Their existing site was dated and its Drupal platform was unsupported. Their CRM (CiviCRM) needed to be carried across to a new accessible site along with hundreds of pages of content. Webstruxure delivered new branding for LSA; redesigned and rebuilt a WCAG-compliant WordPress site; supervised the export, review and editing of all content and reinstalled their existing CRM so staff workflow could continued uninterrupted over the transition. The new site is responsive, accessible and modernised.