It's all in the design brief

Every time I meet a possible new client, the first thing they ask me is how much, but then they follow with ‘just don’t spend too much time on it’. Now how is any designer going to be able to get inside a client’s mind? We just can’t presume or guess. We need to understand our client’s motivations, what makes them tick, what are they thinking. We need to use a design brief!

A design brief is a document which has a series of questions which we ask our client to better understand what they envisage their logo or website will look and function. It plays a pivotal role in guiding both us and the client to an effective outcome. There may be stumbling blocks that crop up along the way – our client may disagree with a decision we have made. It’s at points like this when we can return to the details of the brief to back up your stance.

That’s not to say you won’t make design changes as a result of a disagreement – you want to please your client, after all. But the design brief exists to provide both of you with concrete reasons for making decisions throughout the design process.

Below is an example of a website brief we use for our clients. Have a look to see what I am trying to explain.

Writing your web design brief

The development brief provides potential web developers with sufficient information to base a proposal to undertake the development of the website. A good brief contains enough detail for external web developers to provide a firm quotation. Quite often it will just enable them to provide an approximate quotation which would be confirmed in the first stage of the project once they were appointed.

Below is the outline of a typical development brief adapted from the Australian Government’s e-strategy guide website.

Section 1. About [your organisation’s name]

  • Organisation’s mission statement
  • Services provided
  • History of the organisation

Section 2. Vision and objectives for your website

  • What is its vision?
  • What are its objectives?
  • What are the intended ‘deliverables’ to the public, your key audiences and your
  • organisation?

Section 3. Target audiences

Be as specific as possible about the target audiences for your site. Provide as accurate a breakdown of the demographics as possible, e.g. gender, age groups, location (state, national, international, rural, city), interests. Provide some assessment as to their likely experience using the internet.

Section 4. Project management

Explain the management structure within your organisation for building the site – who are the decision-makers, their respective roles, internal decision-making procedures. Detail your expectations re project meetings:

  • how frequently you want to meet with the developers
  • what is expected of the developers by way of reports
  • how disputes are to be resolved

Section 5. Background to the project

Provide any relevant history of the project and/or the organisation that would assist developers to understand people and content sensitivities, schedule, design, aims of the organisation etc.

Section 6. Content

Indicate:

  • content scope – how many words, images, maps, minutes of video, audio etc
  • content type – e.g. text, photos, audio, and their current format – e.g. digitised,
  • hard copy
  • provide an information design map showing all headings and sub-headings to be
  • used in the site and how they relate to each other.

Section 7. Functionality

Identify the functional elements that are to be included in the site. Describe in as much detail as possible how you envisage each function will work from the user’s perspective.

Include what results or information you want and what tracking you want to be able to do when users access that functional element. For example, for each online form stipulate how many fields of information, what information is sought, to who in the organisation the information supplied is to be sent and in what format. For example will it be an email with the text or is it to go automatically to a database or other program?

Section 8. Graphic and information design

  • Describe the organisation’s identity – does it need to complement the
  • organisation’s existing branding (logo, font, colours) or is it purposely different?
  • Detail your design criteria and provide web addresses (URLs) of sites you like the
  • look of and those you don’t.
  • Specify that images should in general be kept to a small file size and optimised for
  • fast download (users become intolerant of waiting for images to appear).
  • Specify accessibility requirements.

Section 9. General technical constraints

  • Speed – the optimum speed and any special factors that may impact on it.
  • Explain any restrictions you think will limit the target audience’s capacity to access
  • the internet – e.g. rural clients with limited access speed and capacity.

Section 10. Databases (if applicable)

Do users of the site need to access your organisation’s database(s)? If so, outline:

  • whether there is a need for instant links to keep the database up-to-date
  • instantaneously, or if periodic (e.g. daily/weekly) updating is sufficient
  • what restrictions are required for access to your database(s) and what level of
  • security is required
  • how often you expect users to access the database(s) and how many at any one
  • time.

Section 11. E-commerce (if applicable)

Do you want users to be able to pay for memberships, services and products, and donate money via this site? If so, be specific about:

  • what you want them to be able to pay for
  • the payment processes which are appropriate – e.g. instantaneous via a secure
  • online payment solution or users to provide credit card details with their order,
  • leaving the organisation to process the order and payment manually
  • the fulfilment details – how you are going to ensure supply and how the product or
  • service is to be delivered
  • how and where the terms and conditions of purchase (returns, refunds policy,
  • disclaimers etc) are to be displayed to users.

Section 12. Maintenance and training

Who will need to be trained from your organisation?

Section 13. Testing and revision

Over what period will testing take place? – at the beginning, during and/or just before launch?

Who pays for changes that are required as a result of feedback from the testing?

Section 14. Project schedule and deliverables

What’s the deadline for the site to be up and running?

 

 

Web Design Trends In 2015

Web Design Trends In 2015

Copied from http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015

Web Design Trends To Look Out For In 2015

Now that 2014 is nearly behind us, we can now begin to look at the web design trends for 2015, in particular trends have and will impact the WordPress Community–from existing WordPress themes and plugins to the new opportunities these trends will provide.

1. Responsive Layout

design-trends-2015-responsive

Do you have a really good reason for not using responsive design? Over the last few years responsive design has solidified itself as the new standard for web design in general and WordPress themes in particular. Sure, there are still arguments over implementation, but no one is saying, “let’s get rid of responsive design” and in fact more and more sites are opting to go in that direction. That was certainly the case in 2014 and I wouldn’t look for it to go anywhere in 2015. This one has ceased to be a trend and can now be considered the new norm.

2. Ghost Buttons

design-trends-2015-ghost-buttons

Ghost buttons are a prominent design feature in Divi. They’re minimal, stylish, and with the subtle hover animation they’re a delight to use. Look for this trend to continue into 2015; especially considering how well they pair with the large background images and videos we’ll talk about in no. 4.

3. Bigger Emphasis on Typography

design-trends-2015-typography

Image via Paul Rand

Usually web type-kits that allow for beautiful fonts and typefaces to be used on websites have been expensive. Meaning that sites leaning heavily on typographic design tended to require larger budgets–leaving the small guys (and most WordPress users) out of the fun. That however, is changing. Type kits are becoming more affordable (or free in the case of Google Fonts) and that means there is more freedom for designers working with a smaller budget to bring their typography skills to the web design table. Additionally, this allows WordPress theme designers to include more typographic flexibility in their themes, making stylish type-centric design attainable for anyone with a well designed WordPress theme.

4. Large Background Images & Videos

design-trends-2015-large-images-videos

Another staple of Divi which has been and will continue to be a big hit are the large, beautiful background images and videos. One of the simplest ways to make your site stand out is by having great content displayed prominently. This trend is a wonderful way to accomplish that and when folded into a larger design style/philosophy it doesn’t feel gimmicky but powerful and elegant.

5. Scrolling Over Clicking

design-trends-2015-long-scrolling

As the mobile web continues to grow and web design continues to skew in the direction of a more effective and enjoyable mobile experience, scrolling will continue to dominate clicking. It’s more intuitive, easier to do, cuts down on load times and allows for more dynamic interaction to take place between the user and the website.

6. Card Design Will Get Better

design-trends-2015-card-design

Image via Pinterest

“Card” design, while not new, has proven to be a great tool for designers working on responsive websites. Cards are a great way to keep things modular, rearrange columns without things getting sloppy or disorganised, to browse a lot of general data, but also to prompt users to drill down and see more. In short, cards are clean and simple with a lot of versatility. Exactly what the web needs. So expect to see more of it in the remainder of 2014 and throughout 2015.

7. Flat Design is Growing Up

design-trends-2015-material-design

Image via Google Design

Flat design has achieved a lot of momentum over the last year or two and it appears to have staying power into 2015. However, it might be possible that as a concept, flat design is growing up. Perhaps into material design.  So, what is material design?

Material design is something Google unveiled this year as their new direction for mobile (and design in general). “Material,” to quote their brief, “is the metaphor. A material metaphor is the unifying theory of rationalised space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.”

Outside of marketing speak (and including the observation that they’ve settled on something that might otherwise be called “almost flat design”) we can see that what the designers at Google mean when they say Material Design is a mostly flat design that uses very subtle gradients, layering, and animation to retain a sense of the tangible world (physical space and objects) while still achieving all the advantages of flat design. Some may disagree but personally, I think this is where flat design as a whole is headed and I look forward to seeing more companies and individuals adopt it in the remainder of 2014 and beyond.

8. Microinteractions

design-trends-2015-microinteractions

Microinteractions are a good trend to talk about after material design. What are microinteractions? They are contained experiences or moments within a product (or perhaps a module on a website) that revolve around a single use case. One example of this is the email signup box that pops up on this website. It sort of wiggles back and forth on the screen, giving a playful personality to an otherwise static graphic.  This microinteraction promotes an increase in user engagement; which in this particular case means more email signups. I’d look for this theory to further permeate web design in the coming years. I’d love to see more WordPress theme and plugin developers begin to think in this vein. In particular, I’d like to see plugins that don’t just add new features to a WordPress website but add new experiences.

9. Interactive Visual Storytelling

design-trends-2015-storytelling

Image via The Guardian

What do you get when you put all of that together? a better platform for telling compelling stories and narratives. Now of course I do not mean that every web page has to tell a fairy tale, yarn or other bit of fiction. That’s not what I mean when I say story or narrative. What I mean is that your brand is made up of a series of concepts or values (elegance, creativity, simplicity, etc.) and everything from your page layout to your font choice to your web copy and microinteractive page elements are narrative tools with which you can tell stories that embody those concepts and values by showing them in action. A perfect example of this is the Tesla website, which I talk about below.

10. Personalised UX

design-trends-2015-pesonal-ux

Image via Netflix

The idea of using cookies to help you display more relevant content to repeat visitors is nothing new. However, just as certain spammy practices (such as the popup) have made a classier return with better design and best practices in place, so too can the technique of using cookies to display certain content to repeat visitors be used for more than spam and shameless upselling. Netflix uses it to remember what you’ve recently watched. So does YouTube. Would it be so odd for a large editorial site to create a “recently read” sidebar widget for quick access to articles you may have enjoyed and/or commented on? Or perhaps hiding recently viewed content in order to highlight new posts/pages? I don’t think so and I think we’ll see more tasteful uses of this technique in the months to come. I’d also love to see that happening more in the WordPress community via plugins.

A Few Examples

Sometimes reading about all these design concepts can make it hard to imagine them working together seamlessly “in the wild”. To help remedy that I’ve put together a short list of three examples that collectively embody all of the web design trends I’ve mentioned in this post.

1. Apple

design-trends-2015-example-apple

You don’t have to be an Apple fan boy to appreciate good web design. Something that Apple has always accomplished with their trademark simplicity, and yet, continue to manage to squeeze in a remarkable number of current and future design trends. If you’re looking to learn but not mimic them, I think the thing to keep in mind is not that you have to create a site exactly like theirs but rather copy their insistency on subtlety to avoid making a trend come off as gimmick.

Visit Site

2. Tesla

design-trends-2015-example-tesla

One of my favorite websites right now, not just because I also love their products, is Tesla’s website. They combine all of my favorite trends into one fluid experience. I especially love their Go Electric page which uses large images, long scrolling, embedded infographics and interactive storytelling to explain their top five FAQ’s. It’s a brilliant bit of design chock full of delightful microinteractions that turns a traditionally boring part of most websites into a jaw-dropping showcase.

Visit Site

3. Divi

design-trends-2015-example-divi

Finally, we have an example that is not to be drooled over and dreamed of as hopelessly out of reach, but something that we can get our hands on and work with. Divi is without a doubt the best WordPress theme for the average user with limited (or zero) coding ability to achieve all of the trends covered in this article on their very own WordPress website. It’s possibly one of the most empowering WordPress themes I’ve ever come across. The drag-and-drop page builder takes advantage of interactive modules to help you create beautiful and effective pages of any length. And of course, thanks to its responsive design, that look and work beautifully on any device.

View  Theme

In Conclusion

The trends of 2014 look as if they will carry on into 2015, with a few of them maturing. In this case I’m speaking particularly about material design and microinteractions. The latter of which is the reason I didn’t include parallax in this post, as I would consider it a type of microinteraction that may or may not fade out in the next year but whose underlying concept will undoubtedly remain and mature.

As for what all this means for the WordPress community, I would think that we will see more themes follow the lead of Divi in creating more seamless ways for non-coding users to take advantage of these design trends. I also believe that as certain microinteractions become more popular in situations that have traditionally required custom development, the community will provide turn-key solutions via plugins; like they have with various popup form plugins.

I think the future of these trends will be decided by how far we push them in the months to come. Where will we find limitations that require refinement or perhaps going in a new direction altogether? I know I’m looking forward to watching it all unfold.

 

DesignLabs Christmas Drinks

Last Thursday on November 27 saw our end of year Christmas party that we hold for all our clients to thank them for their support for the past year. It was a real success and a testament to how far we have come over the past couple of years.

We had such fantastic feedback from all our clients on the night, and most of them were quite amazed that little old us have such a vast range of clients, not to speak the quantity. On the night around 40 clients attended to an open bar and some of the tastiest nibbles (i.e. chicken popcorn, pork belly, prawn burgers and so much more) put on by The Grace Establishment on The Parade in Norwood (our neighbour).

A comment that kept being brought up on the night is that it’s rare for companies to take out their clients, usually a company takes out their staff, but we feel it’s more important and critical to the success of our business that we look after our clients. It’s our mission statement, our vision, it’s the reason we get up in the morning, we love what we do!

Some of the clients that attended were Adelaide Festival (we design all their marketing material for each festival on a yearly basis), Stratco (graphic design of brochures and trade books), City of Prospect (branding), City of Playford (graphic design), Top Tourist Parks (graphic design of all work) and Fork On Road (branding and web design).

We have had a successful year at DesignLab, in particular our new employee Raymond Carpozzi. Welcome Raymond!

Here’s to a even better 2015!

Merry Xmas from the team at DesignLab.

9 steps to better web design

As the old saying goes, if you fail to plan, you plan to fail. Developing a web design without a plan is like constructing a building without blueprints. Things end up in the wrong place, features are overlooked, and the situation is ripe for mis-communication between website developer and client. Planning your website ahead of time will give it clear direction as well as prevent missed deadlines and backtracking. If you are a web developer working with clients, then this guide will help both of you to plan properly. If you are a business owner or employee of an organisation, then this guide will help lay the ground work for your website.

  1. Set your purpose and goals. What is the purpose of your website? To rally support behind a cause? Is it to gain publicity for your business? To sell your inventory? It’s important to identify your website’s purpose, as well as your target audience. You should also define your goals. How many visitors do you expect per month? How many do you expect will sign up for your newsletter? How much in sales do you expect to make? Set measurable, specific goals for your website that are in line with your marketing goals. An analytics tool like Google Analytics will allow you to monitor your website’s performance over time.

  1. Create a budget. Whether you’re an established, mid-sized organisation or a fledgling start-up, you should always set a budget for your website. This will probably include funds for web design, programming, and hosting (though other expenses may apply). Research the market by shopping around and consulting with professionals. Don’t sell yourself short by comparing prices alone. What you save in money you may later pay for with a lack luster site and lots of headaches. It’s better to choose team members based on experience, insightfulness, references, and examples of work.

  1. Assign roles. Assemble a team of people who will be working on your website. Your team may consist of:

  • Company stakeholders (owner, marketing manager, or whoever else represents a primary function of the business)

  • Content writer and/or editor

  • HTML/CSS professional

  • Web and graphic designer

Make sure everyone on your team knows their role and what is expected of them, and that they stay abreast of deadlines and new developments.

  1. Create a content strategy. Content is king! What kind of content will you be displaying on your website? Content is basically anything that gives your visitors information. It can include, but is not limited to:

  • Blogs

  • Documents

  • Videos

  • Photos / Pictures

  • Slideshows

  • Embedded social media feeds (such as your Facebook page or Twitter stream)

Your content strategy is the way that you plan to present your content over time. For instance, you may want to publish two blog posts a month, and put out a free quarterly report for your subscribers to download four times a year. Since content is such a vital aspect of a website, bring in help if you need it. Hire a copywriter who is experienced with writing for websites, and invest in some professional looking photos of your storefront and employees.

  1. Structure your website. Decide what pages you’ll be using and what features will be on each one. Most websites have an About and Contact page, but the pages you use should meet your business’ needs.

  1. Create a mock-up. A page mock-up, also know as a wireframe, is essentially the outline of your website. Usually created in Photoshops, you don’t have to put too much detail into your mock-up.  Use placeholder text to fill pages, and don’t worry about details. This is just to give everyone an idea of what the website will look like.

  1. Start designing. The importance of good web design can’t be stressed enough. Good website design includes both usability and aesthetics. An ugly website will drive away visitors, as will a website that’s difficult to navigate. Keep in mind some basic concepts of usability as you go:

    1. Make your navigation easy to understand and easy to find. Research shows that most users expect website navigation to be vertical and centered at the top of the page.

    2. Use an easy-to-read font for blocks of text. Choose a background color and text color that contrast well (Hint: No red text on a hot pink background).

    3. Make sure your site fits the screen. Use responsive design (or an equally effective approach) to make your website one that adapts to all screen sizes i.e. iPhone, iPads, etc.

    4. Keep your website light in image reproduction so that it loads quickly.

    5. Make your logo and tag line prominent on the page.

    6. Keep styles and colours consistent across the website.

    7. Make copy clear and concise, and put important information and features (e.g., your newsletter sign-up form) above the fold.

Make notes about what to include in the style sheet as you design, as you want to keep style and function separate. This is important, not only to comply with web standards, but to make it easier to change something in the future if you need to. You should also design with the future in mind. For instance, your website may only have a few blog posts now, but what about when you have two hundred?

  1. Test it out. Testing is important for getting out bugs out and catching details that you might have missed initially. Make sure your website shows up the way you want it to in all browsers, including Chrome, Firefox, Internet Explorer, and mobile web browsers like Safari and Opera Mini. Test it on your cell phone, your tablet, and your colleague’s cell phones and tablets too. You want your site to have a consistent appearance no matter what screen it shows up on. Make sure all of the links work, that the images are properly sized, and that you’ve replaced all of the placeholders with actual content. See to it that all of the forms and other input fields are working.

  1. Maintain your site. Once your site is launched, the work isn’t over. A website is an ongoing entity that continuously represents your company, so maintenance is very important. Monitor your analytics software to see how your website is performing with the public. Keep an eye on metrics like your number of unique visitors, bounce rate, and which pages are most popular on your website. You might find that certain metrics are more useful to you than others, but that is information you’ll find out over time.

You should also have a plan for maintaining the website, such as who is responsible for posting new content or monitoring site security. And of course, get feedback from your users. Feedback is a valuable tool for improvement.

Planning a website ahead of time is just as important as planning anything else in business, yet this step often gets overlooked by those anxious to claim their piece of internet real estate. Taking the time to plan your website is a great investment, and it will better you chances of having a finished product that serves you well for as long as you need it.