How branding can an effective tool for business



In an age of brand awareness,  many of the world´s most profitable companies consider design their most effective business tool.


Executed well and applied consistently, design increases brand equity, and business growth.

Designers consider all the determining factors that influence customers such as personal preferences, product style, quality experience, technology, usefulness and appropriateness.

The key tasks are:
  • Knowing our customers and speaking their language
    The real leverage with a client comes when we position ourselves as their strategic partner. That kind of relationship implies that you have an informed point of view on the customer, the product or service and the business model. The way to persuade clients is to concern ourselves with understanding their business model or finding ways to cement relationships with their customers.
  • Identifying the problem
    Design is a problem-solving discipline. By approaching the project from the clients perspective, through initial contact, supplemented by preliminary research (through the Web, interviews with customers, etc.), we develop an informed point of view about the business objectives, competition and other factors that impact success.
  • Giving information Business publications increasingly cover the importance of design to strategic success. We'll share design-related articles in the business press or mainstream media with colleagues and clients. Excellent sources for case studies: Design Management Institute.


Cole creates chocolatey brownie treats for the family

The Creative Process

Phase 1: Strategy


1a. Brainstorming
  • Read all documentation
  • Get information and listen
  • Research the competition
  • Internalize the creative brief. Get to know the client's business, who their users are, and what they want
  • Immerse yourself in the culture of the customer
  • Get ideas from everywhere. Surf the web. Visit thrift stores, bookstores, cafés, museums, art galleries, surround yourself with magazines that the user would read
  • Make lots of sketches and thumbnails. Every idea does not have to be a valid, logic-driven one.
  • Start with the key pages of the site
  • Explore what´s possible with different technical effects [mobile, server push, steaming video, multimedia components]
  • Work on ideas that will drive the project forward. By the end of this phase, you will have a schedule and a set of deliverables.

1b. Design Language Explorations
  • Start by creating several pages of design exploration. These are not web pages but visual expressions of a particular look or feel to see which visual elements work together
  • Play with backgrounds, colours, collage, headline effects, type to come up with the general rules for a given look. This work can be done in Photoshop or Sketch
  • For resources, use images from other sites, scans from magazines or stock photography
  • Consult with the client on developing structure, navigation, style and technical components. Once you've chosen a basic look, it can be then applied to various pages of the site.

Phase 2: Design

2a. Grids
  • Use a grid system to create structure in two dimensions to layout the elements in a consistent format.
  • Designate different areas of the pages for different functions
  • Designing for the web must accommodate a wide variety of viewing conditions, so in some cases, the proportions are absolute, in others, they are relative. For instance, what happens if the viewer expands her window.
2b. Navigation
  • Keep it simple
  • Develop a flow mock up, on large projects, that illustrate how a person will move around within the site.
  • Using a program, like Net Objects Fusion, you can build a text-based web site that serves as a pint of discussion for moving throughout the site.
2c. Presentation

The creative/art director should be prepared, preferably with one or two design staff to act as back-up for presentations to the client. Typically, you'll choose three finalists: the favourite, the wild and daring, and the more conservative which you're pretty sure they'll like.
The main points to present are:
  • A reiteration of the goals.
  • The site structure.
  • Design language alternatives, if appropriate.
  • The home page. As many versions as you decide to show. Make a firm decision. Show the least amount of versions possible, keeping other versions as backup.
  • A representative second-level page, showing one or two alternatives
  • A representative article or product feature page.
  • A first pass at navigation.
  • An outline of a content schedule.



Phase 3: Design Development

3a. Iterative Design The goal of the first presentation is to establish a design direction, then experiment with one feature at a time. For example:
  • colour studies
  • typeface studies
  • navigation schemes
  • animated elements.
It is helpful to work in black and white first to confirm idea of visual weight and emphasis of items prior to applying colour. Once you've made a firm decision, then we're ready too present the developed design to the client.

3b. Modular Design Start creating design models that can be handed over for development.
  • Properly designed, each web page has areas that perform different functions: global navigation, local navigation, local identity, main features, teasers, ads etc.
  • These areas can be broken down into templates that either separate the design from the content or make the content easy to change. As the templates are developed, you can work with dummy text
  • The programmers continue working with a dummy front-end until each side has finished debugging
  • At the end, the programmers load a working set of HTML templates into the database and merge them with the final content for presentation.
3c. Content Development
The client must own the content schedule and start delivering. It is important to keep the client focused on content. A well-documented design process will allow the client to focus on the content and not waste too much energy on design, site map and functionality issues.


Phase 4: Production

Take the design model to a production model by creating functioning product. For web development this will include:
  • Design Safety Check is a review of the design with the lead developer to ensure the approved visual model is viable and ensure that the final design is implementable.
    The check may involve coding a page or two, checking file sizes, page weight. If all checks out, you have proof of concept and can move on

  • The Mark-up and layout Spec is a sketch of the page and how they are implemented in HTML and Cascading Style Sheets. It establishes dimensions of the various areas of the pages, the approach to animation, background, foreground, typographic specifications.
    This promotes a discussion between designers and developers on how the site will be implemented, accommodations for different browsers and platform specifications

  • The HTML prototypes The designer produces the key pages of the site. This exercise builds the skeleton for the site and sets the HTML conventions for the site.
    This prototype is tested carefully before going into production

  • StyleGuide Document the file, directory structure and naming conventions for the site in combination with other template decisions made and the process used so a new person can use it to modify the site.

April 30, 2020
0

Pages

Contact me