Website Design Brief

Picture 4Preamble

Having an online presence as contemporary creative is essential. As a part of the wider graphic design course, this module serves as an introductory platform to the principles of graphic wed design as opposed web development (e.g. back end, coding work) and an opportunity to investigate the ever-increasing plethora of digital media.

The Brief

you are to build a web-based portfolio to showcase your design work. The site that you will build should allow for easy updating of images. AS well as developing your technical skills, this project will allow you to begin to consider how you can show your work in its best light and develop your skills in making  considered choices about the content of your portfolio and begin to think about the audience you are targeting within a given timeframe. You will also have to make important aesthetic choices as well as decisive and selective in the portfolios content.

Instead of creating a website for myself I will be creating one for my mums Landscaping company – Anna Martin Plant & Garden Consultants.

Website Exploration

Picture 27

Background colours and textures? Effective or distracting? How and Why.

The background colour is a standard dark grey throughout the website it is effective in contrasting against the design images and is not as harsh as a white or black background would be.

There are accents of yellow on the menu and scroll bar and heading but the main colour scheme consists of grey, yellow and white. These colours work well together giving an overall urban look this is fitting for a London-based Design Company.

 Is the unity of the website spoiled (or aided) by commercial banners and so on?

The only repeated element is the company’s name “Carter Wong Design” situated in the left corner, is an easy way to access the home page and the yellow font colour blends the logo into accents on the page itself.

 Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

The navigation is very straightforward, the menu bar remains on the left of the page no matter where you are on the website which makes navigation easily accessible, when you are on the ‘projects’ section a drop down menu becomes available allowing quicker viewing of a particular project.

They have thought about what the browser would like to see easily such as ‘about us’ and contact information and have added these to the menu.

 How do design elements such as link buttons help the navigation?

There are icons for twitter and YouTube these link you to the company’s social media pages. Small elements such as the link on their email and a link directly to Google maps to help you find them.

 Add any other points or comments not addressed directly by these questions.

I like how the website scrolls sideways instead of up and down, it means that many images can be viewed much more easily without being crammed into a slim page. There may be a downfall to this style being that it could be difficult to view on a mobile device.

 Who is the audience? How/ in what ways do these HAIL the audience?

The audience would be potential clients; looking at the company’s projects many of their clients are well-known companies such as Waitrose. Their website displays previous projects attractively.

 What signifiers tell you anything about the way the quality or ethos of the sites?

A small sentence states that the company like to look at the world from outside their studio and they also strive in projects that involve a complete redesign. They advertise the four step process they follow for each project, this is “We analyse… We think… We Create… We Deliver”.

 Why do you like it find it inspiring?

I like they way they have displayed their projects, they have shown not just the finished pieces but processes and images before they have been optimised for print for example – the original painting of an image.

 In what ways would you say it is innovative (if it is) OR why is it appropriate for this piece to use traditional conventions?

The use of a sideways scroll I would have said is innovative however as I looked at more of the websites a few for use this design, however for someone who had not seen it overused the effect would still be impressive.

It is a very visual website and any text is straight to the point and engaging.

Would you say that this designer or design company has a recognisable style – if so describe why this is, or say why this is not the case.

Many of the designs have an organic look to them and are very artistic – hand drawn fonts, painted images are used in many of their projects.

howies2Picture 24Picture 28

Background colours and textures? Effective or distracting? How and Why.

The Background colour is plain white, it gives a very clean and minimalistic look however I feel there is too much blank space.

 Does it have gimmicks, animations etc? How and why are they effective or not?

Before you enter the site there is a short animation of clouds and an Arabic symbol, I don’t think this is effective as it is not really related much to graphic design (more film) it is also a very small rectangle and looks strange with such a large space around.

 Is the unity of the website spoiled (or aided) by commercial banners and so on?

There aren’t any, which is good!

 Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

Navigation is straightforward the main sections of the website are clearly labelled.

The downloads page is not clear, as they are not labelled and the links to other sites are also unclear as to what they lead to.

 How do design elements such as link buttons help the navigation?

Not very helpful, as mentioned above there are links but it is unclear what they lead to.

 Add any other points or comments not addressed directly by these questions.

The website is very text-based at first and as a graphic designer I think it would benefit with more images to begin with, you have to make quite a few navigations before you see any work whereas I think there should be images that engage the audience to what to browse through the website further.

His biography is very lengthy, he seems to believe this will sell him more that his work! This writing is also very difficult to read.

Another aspect I find frustrating is that there is way to much blank space! Everything is crammed on to the let hand side of the page making many of the images very small – because he is a graphic designer he should make his projects a main part of the website.

 Who is the audience? How/ in what ways do these HAIL the audience?

The designer is based in Iran so many of his clients would be based in that country he has used Persian symbols on the opening giff and the websites has an English and Persian version catering to his country and also English-speaking countries – this works well as it could potentially attract a wider audience as he can work in multiple languages – however if he cannot speak English then it could be false advertisement.

 What signifiers tell you anything about the way the quality or ethos of the sites?

There is no motto or anything clearly written about the way he works, his biography appears to be a long list about his achievements and previous work however I don’t think many clients would sit and read through it all.

Why do you like it find it inspiring?

I don’t find this website inspiring

 Would you say that this designer or design company has a recognisable style – if so describe why this is, or say why this is not the case.

His work is very contemporary, I like the way he combines the Persian language with modern and abstract designs. – He is a very good artist.

Picture 24Picture 29

Background colours and textures? Effective or distracting? How and Why.

Similar to the Peter Wong website NB Studio stick with, dark grey, light grey, black and white these create an effective colour scheme allowing anything with colour to stand out against the background.

 Does it have gimmicks, animations etc? How and why are they effective or not?

When you first enter the site there is a short video explaining what NB is about using animated illustrations that are spoken over. This is very effective in explaining their ethics and morals in an interesting and quick way. It is engaging and shows off their creativity from the moment you enter the site.

 Is the unity of the website spoiled (or aided) by commercial banners and so on?

Nope

 Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

The Navigation is simple there are a few links to choose from and once you are in those links it is easy to find what you are looking for.

When you are inside a page such as ‘out work’ each project is clearly labelled with the company and the name of the campaign this showcases their previous clients and makes navigation easy.

Their contact information is permanently on the sidebar this prompts clients, as the information is easily accessible.

How do design elements such as link buttons help the navigation?

There is a direct link to NB’s blog they have made it an important part of the website to see their current work.

 Who is the audience? How/ in what ways do these HAIL the audience?

The audience is potential clients; looking at their current portfolio these are big companies such as John Lewis, Mothercare and Transport for London. They have shown that they can work within an array of different styles by have a page on each project showing work in progress, the finished result and the result in real life. This shows to clients that their work is effective.

 What signifiers tell you anything about the quality or ethos of the sites?

The video at the start of the website says a lot about NB’s ethos, clear thinking and great ideas are the foundation of what they do.

There is also a ‘What We Do’ page, that has a small motto on

Thinking

creativity, ideas, naming, brand positioning, brand architecture, brand guardianship, competitor and communications audits, tone of voice, interviews and customer journey.

+

Doing

brand identity, websites, brand guidelines, literature, packaging, direct mail, annual reports, exhibitions and campaigns.

Why do you like it find it inspiring?

It is a very carefully presented website, the company has thought about their potential clients and created a website that is both professional and creative. 

In what ways would you say it is innovative (if it is) OR why is it appropriate for this piece to use traditional conventions?

The video at the beginning is innovative as is concisely put their entire business initiative into a short video displaying their creativity and advertising at the same time.

 Would you say that this designer or design company has a recognisable style – if so describe why this is, or say why this is not the case.

Certain elements such as the illustration style has a pattern but apart form that NB is a very diverse company that takes on multiple projects.

Picture 24

Research – What is Digital Media?

In teams research two items each that you consider to be examples of digital media – please do a write up of your chosen example and share with your team-mates for inclusion on their blogs (ie so each person will have six write-ups to include – you can also add your own notes to any write-up – each person ).

  • Explain why you think it is digital media
  • How designer s and lay people might use or work with this media
  • Include imagery (at least 3 per item)
  • Something about the mechanics of the medium
  • Explain what your interest in this medium is
  • Any other notes you think useful or relevant

We each chose two parts in digital media to research

Me

Instagram

PDF Magazines

Kirsten

Youtube

Photoshop

Sarah

Apps (in general)

Twitter

Picture 7

What is Digital Media?

“Digital media is defined in a variety of ways…digital media is defined as those technologies that allow users to create new forms of interaction, expression, communication, and entertainment in a digital format. The term digital has been coined to reflect the evolution of multimedia computing into multi sensory communications. The goal of multimedia and now digital media is to reproduce as closely as possible the reliability and effectiveness found in face-to-face communications and then emulate that in online environments such as social networking, using computers and other technologies.”

Teachers discovering Computers: Intergrating technology and digital media in the Classroom. (Shelly, 2007)

Picture 7

University of Worcester.

‘Digital Media’ is the combination of digital technology & creativity. Examples of this could include:

* Interactive multimedia

* Digital video and film production

* Web design

* Image creation

* Digital photography

* Interface design

* Digital animation

* 3D modelling

* Digital sound technology

* Graphic design for print and web

 What is Multimedia?

What is a multimedia production?

The term “multimedia productions” refers to productions that present information in more than one sensory mode, e.g., both audibly and visually. For instance, streaming video with a soundtrack is a multimedia production.

Extract from: http://doit.maryland.gov/policies/Pages/NVAReg07.aspx

Picture 7

instagram res

What is Instagram?

Instagram was created by Kevin Systrom and Mike Krieger and launched in October 2010 it is an Online, Photosharing, videosharing & Social Networking app that enables users to digitally take pictures, apply filters to them and share them on a variety of social networking sites. Imagine Twitter with just images and videos!

Instagram_Filters_2011

Picture 25

Who uses it?

Initially Instagram was limited to users of IOS devices and only avaliable on the app store, popular among young adults it was a way of showing your life to people purely by image – many image focused people used it to showcase thier latest purchases or hairstyles, it was also popular among bloggers who could simply take a photo of an outfit etc to promote thier blog – often a picture catches someone eye more than a chunk of text.

In 2011 Instagram introduced hashtags which helps users discover both photographs and each other

Picture 20

In April 2012 it was expanded to Android and many brand started to use it to promote thier businesses.

An interesting article here explains how business users can make the most of Instagram to promote thier business.

Picture 26

Picture 7ISSUURES

Joe Hyrkin, the new CEO of the seven-year-old company, says Issuu is doing for print publications what YouTube did for video producers.

“If you remember the early 2000s, there was very little video content on the Internet, and it was pretty cumbersome to work with,” Hyrkin says. “Then YouTube came along, and in one click you could make your video content shareable and accessible, because of the ubiquity of broadband. We are doing the same thing for published magazines and catalogs…I am really focused on Issuu becoming the leader of an ecosystem.”

Picture 29

With over 15 million publications, Issuu is the fastest growing digital publishing platform in the world. Millions of avid readers come here every day to read the free publications created by enthusiastic publishers from all over the globe with topics in fashion, lifestyle, art, sports and global affairs to mention a few. And that’s not all. We’ve also got a prominent range of independent publishers utilizing the Issuu network to reach new fans every day.

Created by a bunch of geeks with an undying love for the publishing industry, Issuu has grown to become one of the biggest publishing networks in the industry. It’s an archive, library and newsstand all gathered in one reading experience.

Publishing on ISSUU

ISSUU allows you to upload several PDF’s and form a sleek online flash based book all for FREE!

Benefits for publishers
  • Makes fast work of batch uploading PDFs and converting them to an online book
  • Flipping pages
  • Ability to share your publication on social media sites
  • Ability to embed in your website or allow a user to embed in theirs
  • Fast loading (each pages loads in advance)
  • Super sleek design
  • Multiple views of pages
  • Page zooming
  • FREE
Picture 23
ISSUU article CLICK to make big!

Picture 9

ISSUU Audience

ISSUU has an ever-increasing audience, the articles range from fashion to ones aimed at children.

It was started in America and was initially an english website however becoming more popular has led to articles in many languages appealing to more countries.

At the moment ISSUU is only available online or as an app on Android devices, some concerns are that publishers are loosing views from owners of IOS devices, however ISSUU states they are currently working on more apps to cater for the wider population.

Ideas & Inspiration

Home Page Design

– http://jothompson-garden-design.co.uk/

In Jo’s homepage I liked how visual it is, the collage of Gardens gives an instant ‘WOW’, I also like the symbol links along the top to Facebook, Twitter and email.

Screen shot 2014-08-06 at 11.31.46The Mulberry garden Design website is very simple, in parts I felt it could do with more information however I like the colour scheme on the home page.

Screen shot 2014-08-05 at 19.31.29

 

 

Website Comparison

I began by comparing other Gardeners websites in our area.

Screen shot 2014-08-05 at 19.30.48 Screen shot 2014-08-05 at 19.31.29 Screen shot 2014-08-05 at 19.31.46 Screen shot 2014-08-05 at 19.36.45 Screen shot 2014-08-05 at 19.37.42 Screen shot 2014-08-05 at 19.38.03 Screen shot 2014-08-05 at 19.38.19Many of the websites I looked at where very fussy, some had animations and strange graphics or useless widgets such as the weather forecast, I preferred the simpler websites that where easy to navigate and displayed in an attractive way.

 

Content for Website

To make a successful website for my mum I had to work with her on a couple of occasions in order to create accurate information in the ‘About me’ section, also by e-mailing her current clients asking permission to use their Logo’s on the website and visiting various jobs to take pictures for her portfolio.

About Us

Anna Martin Plant and Garden Consultants specialise in the refurbishment, installation and maintenance of external landscapes and internal planting schemes. Anna has developed cost effective and sustainable techniques to maintain plants and gardens, virtually eliminating the use of environmentally harmful chemicals.

Anna studied Rural Environmental Studies BSc at Wye College, UCL. She went on to take her RHS Gen Cert, studied Garden Design at Merrist Wood and later floristry at night school.

Everyone knows that an outdoor space is good for relaxation, air quality, animal habitats and even food, but interior plants are also beneficial in that they reduce the amount of Volatile organic compounds (VOCs) found in soft furnishings, printer ink, personal care products and even paper e.g. Benzene, Xylene, Toluene, Trichloroethylene and Formaldehyde. One study undertaken by NASA, who were concerned with improving the environment of people living in space, found that 87% of VOCs could be removed in 24 hours (density of 2-3 plants every 10 square metres) virtually eliminating indoor pollution. Indoor plants also replace harmful gases such as Carbon Dioxide and Carbon Monoxide with Oxygen. They have a cooling effect, relieve stress and improve the appearance of the office.

Anna is fully booked at present and this site is for information only. She is however looking for a part-time, enthusiastic apprentice.

 

Permission to use Southhook Gases Logo – I had similar emails from all other clients.

Screen shot 2014-08-08 at 09.48.11

Screen shot 2014-08-08 at 09.51.55
A few pictures to use within the website

Website Design

Master Page

I created a master page to easily repeat the menu throughout the rest of the pages.

The menu was very easy to make I simply has to choose horizontal menu and integrate all my top level pages into it, it automatically titles them and links to the corresponding page, I could then alter the colours and font as I wished.

Screen shot 2014-08-08 at 11.41.47

 Home Page

The home page automatically showed the menu I created on my master page, I needed to include some content using an idea from my research I decided to make a photo collage using my own photography, It experimented with the images I would use below are a few of my ideas.

Screen shot 2014-08-08 at 16.02.00

Screen shot 2014-08-08 at 17.22.59

Screen shot 2014-08-08 at 18.24.15Clients

For the clients page my mum was very specific with what she wanted – a simply laid out page with minimal information and only the Logos for the companies. I would have preferred to have images relating to the client however some of her major contracts in offices would not let you take photos relating directly to them.

This turned out to be very simple to do once I had the companies permission I added a image at the bottom of the page but may alter it.

Screen shot 2014-08-08 at 18.30.18

Gallery

Following the minimalist theme we kept the gallery page simple with an automatic slideshow.

Screen shot 2014-08-08 at 18.35.04

 

 

Find Us

Again the ‘Find us’ section didn’t need much information – I created an information form on one version however my mum said she didn’t want people contacting her for work!

Instead I added a contact number and email address, I also hyperlinked the email address using an embedded html code as shown below.

Screen shot 2014-08-08 at 18.33.50

Screen shot 2014-08-08 at 18.54.34

http://annamartinplantandgarden.businesscatalyst.com/