Eurowood website showcase mockup displaying 3 different site page templates, the homepage, a product catalogue item page and the current projects news / blog page.

OLYMPUS DIGITAL CAMERAThe launch of New Zealand’s new solid wood, interlocking timber building construction firm EuroWood Construction’s information and promotional website and news blog in December 2014 was engineered as a combined brand launch and a comprehensive content managed website and blog design project. It has been well received by the client and their market. The project was a collaboration between MagentaDot Brands, Identity Signs, and the client who content managed/populated the site.

Identity Signs and MagentaDot Brands have shared goals; to define, design and build great brands

Euro-Wood Ford pickup branded vehicle wrap. Side elevation.The process of building a great brand and a great website begins with defining the marketing communications problem, the audience, the market and studying the competition in order to first define the business “problem” that the branding, visual and marketing communications material is intended to solve. Also known as the creative brief, it forms the foundation of the methodology that delivers brands that have longevity and value and websites that effectively connect customers with our client’s brands.

The creative brief: a.k.a. the Who? What? What? Why? questions

The creative brief is succinctly framed with the four questions; Who? What? What? Why?

  • Who is your audience/market(s)?
  • What do they know about your product/service now?
  • What do you want them to know about your product/service after they have read/seen your communication?
  • Why will they believe you?

The answers to these questions informs the crafting of the marketing communications “problem statement”. Addressing of the “problem” statement informs the writing of the creative brief. This classic approach is highly adaptive, and it takes some research and planning and humility on the part of the design team. In other words, do not pretend to know about, or to be able to properly understand the client‘s business or their market/s without undertaking thorough research, without gaining the client’s insights into their business and market/s.

To design and build a great brand, to create a lasting identity that truly sells must begin with the creative brief agreed upon by all of the stakeholders* whose opinions shape the creative brief. The creative brief must be as concise as possible with clearly defined goals set. With the creative brief agreed upon by the client and the design team, and by all the stakeholders in the brand building project (*all stakeholders includes everyone who gets to express a credible view on the design project on the client side) then the process of designing a lasting and valuable brand that is tailored to meet the client’s business and marketing communications needs can begin.

Business card print

Muda box board in 900gsm is too thick to be printed on a rotary press. This means the graphic elements need to be applied to the flat worksheet by means of screenprinting and foil stamping. Also known as die-stamping. Die-stamping provides the dimensional “pressed in” effect to the graphics. The print methods below are represented in the presentation mock-ups;

  • Screen Printing—transparent inks printed onto cardboard “stain” the board with the woodgrain,
  • Die stamped—solid colour foil stamped into the board surface,
  • Die-cut shape—like a jigsaw puzzle piece the timber profile is punched out of the cardboard.

Engaging the principles of successful web site design

Lockwood_home_website-display-mock-up1

Taking a look at the marketing strategy and graphic communication on Lockwood’s homepage. Impeccable photography of aspirational dream homes is to the fore.

Web design often involves an effort to resolve the difference between what the client/stakeholders want and what the end user wants. Typically the client has a list of “must-haves”, but each user that comes to the EuroWood site will typically want just one thing. A web designer’s job is to trim down those things and put them in a place where users can find them when they want them and, at the same time be able to disregard them if they just want to see an interior view of a finished home or learn about the maintenance free finish, or somehow quickly achieve their goal on clicking the link that brought them to the site.

Fraemohs_home_website-display-mock-up1

The marketing strategy and graphic communication on Fraemohs‘ homepage is tuned toward their products fulfilling the needs of their customers and their families, a supermodel and a strong-jawed All Black lookalike present an attractive human element in the context of a gleaming domestic interior.

There are conventions of web design, such as putting lots of graphic elements and text on a page, that users are accustomed to now, but beyond a certain point they don’t help a page make a good first impression and distract from the user experience being one where they find the page attractive in useful ways. Designers are best to acknowledge these conventions, not doing so is risky for both the client’s business and theirs.

Web design is a relatively new discipline but it does not exist in a vacuum, or without historical precedent, it is connected to print and advertising and the world away from the screen. Things learned from other kinds of design, such as sign graphics, advertising and publication design are useful. Users know that when they see it. Web design has a critical role to play in ensuring the EuroWood site will rise to the critical part it has to play in the firm’s marketing mix.

Important information appears in the top half of the homepage Binderholz_home_website-display-mock-up1

The EuroWood brand, product and sales propositions will appear “above the fold”, most of the important information and navigation items need to appear in the top half of the homepage.

Use of deliberately constructed white space, web typography and layout grids

Minimalist design relies heavily on the effective use of deliberately constructed white space to organise information and create an easily understood, attractive visual heirarchy of information. The gutters between columns and vertical space between paragraphs are carefully crafted to help users identify groups of information. The effective use of a very legible custom web font family in page layouts, aligned with a layout grid helps create a smooth rhythm in the typography within each page. This aids clarifying the heirarchy of information and provides a consistent foundation for the visual interest of each page design.

Modular design assets

Creating re-usable or modular custom design assets that fit within the established grid and get reused throughout the site. The modular approach helps create design efficiencies and also aids user-friendliness by repeating recognisable graphic elements that site users become familiar with.

Web page design is not like packing the boot of your car for a holiday, empty space on the page, deliberately constructed white space—not to be confused with leftover or spare space that signifies we haven’t considered properly what to do with the room on the page—white space is often overlooked as a useful element of web design.


Colour selection is an important step in the web design process

Eureco_Arcadian_colours

Arcadian colours are the hues of trees, grass, wood, water and sky. On your website as in your home use these colours to create a soothing environment with a scandinavian modern clean and relaxing appeal. The ivory and beige of wood grain are neutral colours that blend well with greens and browns to create a natural colour harmony, they also allow other colours to stand out but at the same time prevent them from becoming overwhelming.

Conscious and thoughtful colour selection for web design is often overlooked if not completely ignored. Selecting colours based on personal preference or simply out of habit is far from the optimal approach. Every colour and combination of colours has a distinct set of meanings and associations. These meanings can be put to use in useful ways that serve the strategy and purpose of the design. Even when controlled by client specifications there is great power in the way the site colour scheme is used.

The colour green is soothing, safe and very refreshing, green has a primary association with nature and the environment, and of course trees—but green is also associated with the idea of “proceeding”.

The EuroWood website design is a “responsive web” design

Responsive websites use responsive design technology so they look great on every screen size from phone to desktop, the adaptive technology built into the EuroWood site code future-proofs the site, ensuring its longevity.

EuroWood web design style

The design style of the site is an effort to connect with the EuroWood site user’s sensibilities and their need to be able to relate to things on our site by way of their prior experiences on other sites. The elements of EuroWood’s design style include colour, typography and the quality standard and how we go about using images. Additionally there are the means we use to manipulate these graphical elements including creating a sense of depth or scale, and design variation from page to page to best suit the content and to maintain a level of visual interest. The crafting of these aesthetic elements on the site aims to make it an attractive, useful site that is memorable, encouraging visitors to visit again and to share their experience.

Social media, Google+ site integration, Blog module add-ons

Coordinated with the publishing of the site is the establishment of a EuroWood Google+ business identity and linked YouTube channel which are all link back to the company website. This clicks and mortar business presence was further augmented by the creation of a business Facebook page. Users who value the content of the site will generally tell others about it and even link to it from their site or through their personal or business social media channels. These social media links have a profound effect on improving and maintaining the search ranking of a business site over time. Social media is about engaging with customers on a different level than other forms of marketing—it aims to enable a conversation with the customer that makes them feel welcomed by the EuroWood company.

The discussion about the topic of whether Social media integration represents value for a client’s business is ongoing—because for example there is a body of consumer opinion that is not comfortable with companies continually trying to blur the boundaries between “friends” and brands.

EuroWood vehicle wrap

Euro-Wood Ford pickup branded vehicle wrap. Front threequarter view.Vehicle wraps are a form of Urban Graphics. The best graphic look of the brand applied to a vehicle transforms it into a moving billboard—the aim is to infiltrate the landscape with a supergraphic that attains both a highly visible effect and forms a coherent relationship with the rest of the brand and identity system. In effect, from the visual language created for EuroWood, the vehicle aims to receive an emotional response from the public as well as build a bridge to communicate information to them—but, much more than that, the vehicle sign graphic aims to make the experience of crossing that bridge an engaging one.Euro-Wood Ford pickup branded vehicle wrap. Rear three-quarter view.


Credits


Client: EuroWood Construction
Category: Construction/Contracting, Design & architecture
Logo design: Paul Walters, Identity Signs
Brand and identity systems design: Identity Signs / MagentaDot Brands
Web Design firm / Project management: MagentaDot Brands
Content upload/Site content management: Client
Web coding and CMS customisation: NuWeb
Disciplines: Identity systems design, digital illustration, Web design, Web project management

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s