YCN: Yahoo

This morning in pairs as part of our responsive module we looked at an old YCN brief for Yahoo:

The Creative Challenge
Yahoo! is the original .com start-up, the first internet site that made sense at scale of the sprawling mass that is the internet. The core element of this success is the Yahoo! homepage. In a single page it is able to capture the most important things you need in your daily internet life - to communicate, to find out, to explore. Google and Facebook are now more popular homepages - so there is now a need to inspire our users, particularly those new to the internet, about to set an email address for the first time, to again set Yahoo! as their homepage.

A dry list of benefits is not going to persuade them - but beautiful, engaging, fun, digital creative, illustrating those benefits just might. This work should be able to appear on Yahoo! and across tablet, mobile and desktop as a minimum - but the brief is open to exploring new ways (particularly digital) to reach our target audience. These may be ways that everyone’s been ignoring for years, are unfashionable, or simply bonkers - but our target audience set a high bar for their attention daily and we need to meet it.

Target Audience

13-18 year olds. They are getting a smartphone for the first time, they have ready access to a tablet - even if its through school. They love and use Facebook, Twitter and Instagram in that order (and need an email address to use them). They’re already adept at filtering the multiple messages that they’ve been sent since they were born, chopping, making their own, shifting between different personas online and offline, with their friends and family. Authenticity is key.

We began looking at the existing Yahoo website:

We found the colour boring, dated and isn't fresh or vibrant. Purple suggests luxury and a treat when actually Yahoo needs something which you would use everyday. We also thought it  looked clinical and was too busy. What we did like about Yahoo was the iconography, which are quite nice.

We began listing ideas that would make Yahoo suitable for a younger audience.

- Personal Aspects:  Being able to modify the website to suit you (designed for you?). Being able to change simple things such as the colour and background pictures (photo collage of YAH mates). Also an initial questionnaire when you sign up to Yahoo so you would be able to pick and choose what news you receive by selecting certain topics and hobbies/interests. This way the website can work for both 13 and 18 year olds - they won't like the same layouts or have the same interests. Being able to personalise it removes this problem.

- Greeting: It knows them as a person and greets them when they log in (Good Morning..) However I found greetings kind of creepy when technology welcomes you. 

- Social Media Facebook, Twitter, Instagram, Tumblr etc. Allows everything to be in one place, as one news feed. You can upload something to all of them at once or selected ones depending. Making it easier than ever before to be connected with everyone.

- Weather: Icon or illustration of a person wearing appropriate weather clothes to show what the weather is like as well as a temperature underneath. We felt a personal Avatar (like the ones on Xbox) which could be modified to suit the person.


We wanted to make Yahoo a more interactive website with different sections with appropriate yahoo related names such as "Yah Hobbies" Being able to edit the details to really make the website suit the individual, but we felt this was whey cheesy.
Syncs with your calendar - reminding you of important dates or things to do as well as your mums birthday etc... Stay organised with yah calendar. Ha

Above are our final sketches and plans for the website. We decided to name it Yahoo Life, to brand it as more than just a search engine. If it were to just be with a search engine then it would no compete with Google. This way it provides a multi-stream newsfeed for all social media, a calendar which syncs etc. The page is modified by the user to suit them and their needs. Also the user can upload photos and arrange them into a collage or a full bleed image.

User Experience Design (UXD)

In today's session we were taught what the User Experience is and how it relates to the development of a website design.

“Experience” NOT “usability”

We then went into some practice using Garret's model of UXD and UXD methods such as:

• user research
• personas
• content strategy
• site maps / task flows
• wireframes
• a/b testing

Web Workshop W3

This morning we had our first web workshop. 

HTML - hyper-text markup language
XHTML - Extended hyper text mark up language
CSS - Cascading Style Sheets
SEO - Search Engine Optimisation
FTP - File Transfer Protocol
URL - Uniform Resource Locator
HTTP - Hyper Text Transfer Protocol
UI - User Interface
UX - User Experience - (you design to consider the user experience)

Limitations are governed by this language

Web safe colours

 Only 216 colours which work across all devices. When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 "web safe colours" were identified. These colours were reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code. 

Red               

#FF0000
#FF0

White 

#FFFFFF
#FFF

Black

 #000000
#000

Red 256 x Blue 256 x Green 256 = 16,777,216

The RGB colour mode is capable of reproducing 16 million different colours.

A wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB. For example 100% red would be: rgb(255,0,0)

Web Safe Fonts
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font family is chosen giving several "fallback" options to ensure maximum compatibility between browser and systems. For example a browser that doesn't support the first font it tries the next one listed.

CSS font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.However using font-face breaches licensing and copyright laws related to specific font foundries. Simon told us about free font websites which include free license usage for @font-face kits including font squirrel.

Size, Dimension, Pixel Resolution
When computers were first created the pixels were 640 x 480 which is now tiny on Mac sizes.

800 x 600
1024 x 768 - (design with this size)
1920 x 1080
2880 x 1800 (220dpi)

File Format
PNG - Portable Network Graphic
GIF - Graphic Interchange Format
PDF - Portable Document Format
JPEG - Joint Photographic Experts Group

72ppi - is an outdated pixel ratio, computers could produce at 96ppi. We were told to lower it first as it takes a while to load and will cost bandwidth.

My stages in Dreamweaver: 

Running Website

Overall, I found the workshop really useful and I'm glad I read up on HTML & CSS beforehand as it really helped me. 

Canons of Page Construction

In this afternoons session we looked at grid systems in particular Muller Brockmann's grids. We were instructed how to make a threes column grid, the instructions are as follows:

1) Determine type area (van de graph)
2) Divide in to two or more columns, separate columns with intervening gutter
£) Divide text columns into 2-3 or more fields
4) Determine type size and leading
5) insert 'empty lines' field lines must be separated in order to accommodate gaps between images. Separate field lines (must be same width as 1 line of type heading)
6) Each field should contain a number of lines of type while each empty line should be able to contain single line of type. Images places on the adjacent column will perfectly align with the type as will the image captions. It needs to be 2:3 to be harmonious.

Below are two examples I have tried to transfer the technique by looked at existing layouts from a magazine. Similarly both pages there is definite a three column grid. What I didn't realise is there is a lot behind magazine design that we don't necessarily see straight away. I find I can spot these grids a lot more easier now. 

visual content for my website

I spent a lot of time on illustrator vectoring the logos to use on my website, shown below. I also managed to get my content sorted for the website.  

The Egg of Life symbol is composed of seven circles taken from the design of the Flower of Life. The shape of the Egg of Life is said to be the shape of a multi-cellular embryo in its first hours of creation

The Flower of Life is the modern name given to a geometrical figure composed of multiple  evenly spaced, overlapping circles. They are arranged to form a flower-like pattern with a sixfold symmetry. The most common form of the Flower of Life is hexagonal pattern (where the center of each circle is on the circumference of six surrounding circles of the same diameter), made up of 19 complete circles and 36 partial circular arcs, enclosed by a large circle.

Metatron’s cube depicts the five platonic solids which may be derived form the flower of life. The five platonic solids are geometrical forms which are said to act as a template from which all life springs, according to  spiritual belief. The Platonic solids are five structures that are crucial because they are the building blocks of organic life.

Many forms observed in nature can be related to geometry, for example, honeybees construct hexagonal cells to hold their honey

The ‘Seed of Life’ Is formed from seven circles being placed with sixfold symmetry, forming a pattern of circles and lenses, which acts as abasic component of the Flower of Life’s design

The Seed of Life is a symbol depicting the seven days of creation in which the Judeo-Christian God created life; Genesis 2:2-3, Exodus 23:12, 31:16-17, Isaiah 56:6-8.

The first step in forming the Seed of Life (or Flower of Life) is to begin with a circle (as in a 2D model) or a sphere (as in a 3D model).According to some religious beliefs, the first step in building the Seed of Life was the creation of the octahedron by a divine creator.

The Tree of life is a concept, a metaphor for common descent, and a motif in various world theologies and philosophies. The Kabbalistic form of the Tree of life has historically been adopted by some Jews, Christians, Hermeticists, and pagans. Along with the Seed of Life, in New Age Qabalah it is believed to be part of the geometry that parallels the cycle of the fruit tree. This relationship is implied when these two forms are superimposed onto each other.

The Tree of Life is most widely recognized as a concept within the Kabbalah, which is used to understand the nature of God and the manner in which he created the world ex nihilo. The Kabbalists developed this concept into a full model of reality, using the tree to depict a "map" of creation.

Grid

Over the workshops on canons of construction, I have developed this grid to work across all my webpages. It has been developed using the golden ration and harmonious mathematical proportions. This ties in so nicely with my subject on sacred geometry as it is alway about mathematical ratios, harmonics and proportion that occur through life complexities. 

Web Brief: Possible Colour Schemes

I used Adobe Kuler to pick a possible colour scheme for my website. I used a photograph of the orion constellation from the hubble space telescope. 

Romek Marber Grid

In 1961, a Polish graphic designer by the name of Romek Marber, conceived a grid layout for Penguin book covers that became one of the most praised and recognised layouts of all time. Today, Marber’s design is synonymous with Penguin books. Many people I’m sure could recognise a Penguin book from the layout alone, simply because they’re so well recognised as ‘classic Penguin’ designs. It’s stood the test of time due to Marber’s careful consideration of it’s application and requirements, the fundamentals of any good design.

W3: Theoretical Theory Relating to New Media

Task

You are being asked to find and research one piece of theoretical knowledge relating to New Media (including web design, app design, social media, etc.) which will inform a blog entry on your design practice blog.You must reflect on how this piece of knowledge may inform graphic design practice within new media and digital design.

I found this interesting article in the 'Opinions' section of the online magazine 'It's Nice That' by Andrew Campbell, course leader graphics at Norwich University of the Arts, makes the case for what university design courses could and should be pushing.

My toilet roll packaging is asking me whether I scrunch or fold. I can link to Facebook, get sent a Valentine, and post a caption on a picture of a puppy. It’s a fully integrated campaign. I can just imagine that one being sold in.

As the design industry embraces constant technological change, it follows that we grapple with the relation between print and screen-based communication and the opportunities offered by social media… but please not like this.

As a graphics educator I ask students to consider lots of things: the future of the distributed text; the book, magazine, newspaper and poster, as well as the challenge and opportunity afforded by tablets, e-readers, smart phones, augmented reality, social media, digital displays, and new practices such as crowdsourcing, coding, data sharing, and social reading. We deliver teaching of the design fundamentals: type, image, layout, hierarchy, and expose students to experiences across subject-specific disciplines within this broad church of design. The thing we really try to push is the ability to challenge a brief, and the call for content – engaging, life-enhancing content.

In his recent blog post Dave Trott discusses teaching, learning and education. He states that: “Creativity must be about questioning the way things are and doing them differently. You can’t do that if you’ve had all questioning knocked out of you. If your brain has been turned into a receptacle for current wisdom. If all you’ve learned is to regurgitate the expected answers.”

In his summary he appears to suggest that academia doesn’t provide the same opportunities as “the real world.” I would potentially agree, however the academic environment does provide an important starting place for some really talented individuals who may not have the in-built drive and self-belief of Dave Trott’s father-in- law, (mentioned throughout his blog post). The majority of my students want to work in design. While we acknowledge the relevance of commercial activity we also challenge them to question (graphic) design as an output, a practice and a profession. We champion their creations; we encourage them to engage with practitioners from all disciplines; to learn the skills to utilise both print and digital, alternate media and environments; to consider sustainment and other globally relevant and urgent issues.

They also look to industry for inspiration and eventual employment, and yet similar critiques of education could be levied against industry — regurgitation of process, style-led solutions and unchallenging answers. In the words of my late friend and colleague Nic Hughes: “We’re not going to kern our way out of this one!”

My Thoughts
Design courses are ever more relevant in the emerging digital/new media age, the increasing access to online information means we need to communicate more effectively and with more clarity than ever before. This can only be achieved through thorough understanding of the design fundamentals, a base of knowledge which students then can go on to experiment with and explore the new emerging technologies. I think its important arts universities never forget this in the digital age.

Web Brief: Creating my Visuals

I've started created elements for my website on Illustrator.  Below the Versica Piscis pattern in geometry and the diagram of the great pyramids alignment to the stars, it still has some work to do. 

Canons of Page Construction

This mornings session was on grid systems/canons. Canons are systems, methods or approaches to a particular practice. They give method and order. However, they can encourage complacency. Canons are not simply grid systems but methods and systems that inform your process in design. 

Golden Ratio/De Divina Proportions: Harmonious Mathematical Proportions 

The golden ratio (symbol is the Greek letter "phi" shown at left) is a special number approximately equal to 1.618 It appears many times in geometry, art, architecture and other areas. (A+B):A=A:B.

The Golden Section of 100cm: 

100cm/1.618 = 61.80cm

100cm = 61.80 to 38.20

The ratio of 61.80cm to 38.20cm is 1:1.618

adding...

100cm x 1.618 = 161.80cm

the ratio of 100cm to 161.80 is 1:1.618

I started by drawing a 14cm line.  

14cm x 1.618= 22.65cm, I now have the width and length of my golden rectangle. 

Following these I continued dividing and getting perfect squares until I had a golden rectangle spiral. 

22.652/1.618=14cm

14/1.618=8.65cm

8.65/1.618=5.34cm

5.34cm/1.618=3.3cm

3.3cm/1.618=2cm

2cm/1.618=1.23

After we understood this we moved on to creating columns and rows that could relate to our website (above). 

Van de Graaf Canon

Van de Graaf was a 19th century scholar in book design. The geometrical solution of the construction of Van de Graaf's canon, which works for any page width:height ratio, enables the book designer to position the text body in a specific area of the page. Using the canon, the proportions are maintained while creating pleasing and functional margins of size 1/9 and 2/9 of the page size. The resulting inside margin is one-half of the outside margin, and of proportions 2:3:4:6 (inner:top:outer:bottom) when the page proportion is 2:3 (more generally 1:R:2:2R for page proportion 1:R. This method was discovered by Van de Graaf, and used by Tschichold and other contemporary designers; they speculate that it may be older. The page proportions vary, but most commonly used is the 2:3 proportion.

I used the proportions 14cm by 22.65cm. Below is an outcome that I could translate onto screen. 

Overall, I found this session interesting, as it really relates to my summer project and web brief on sacred geometry of the pyramids of Giza. 

'A Brief History Of...' Web Crit

This mornings crit was useful. I explained about the purpose/target audience/tone of voice and what the audience gain from my website on Ancient Egypt and the Orion Constellation. However, I wasn't fully ready for the crit, I didn't have any thumbnails, or initial ideas. It was suggested that I look at Night Sky/Constellation websites and use vector images for my diagrams. I've got a lot to do in the way of gathering my content and creating/collecting my images. I began by looking at interactive star maps, the first one being Planetarium. However, I think it would be too difficult for me to create something like this. 

HTML Elements

Before my web workshop I thought it would be worthwhile for me to do some research on HTML. So, I bought the book HTML and CSS how to build websites. 

I decided to practice my creating my first web page on TextEdit. 

OUGD503 Responsive Studio Brief 01 - Individual Practice

This afternoon we received our Responsive Studio Brief:

Using the list of websites provided below, identify and respond to a range of competition briefs that reflect your emerging creative interests and professional ambitions within Graphic Design. You will need to select one main brief that will become the focus of the taught sessions and studio workshops for the duration of this brief.In addition to this you will need to select a number of smaller/quicker briefs that will allow you to demonstrate your ability to develop effective responses within professionally realistic deadlines.

When selecting and responding to briefs you will need to consider the following:
· How do you balance what you want to do, design or produce with what the brief or client requires?
· Do the briefs offer enough breadth and scope for the development of a range of responses while at the same time allowing you to focus your practice?
· What are the realistic timescales for completing the brief? Are you working to these?
· Have you clearly identified what the problem is before you start?
· Where is the challenge in the brief and what will you get out of doing it?
· What do you need to present and how will you present it?
These questions should underpin the decisions that you make and will form the basis of your studio workshops and be reflected in your initial tutorials.
Further to this, your final submission will need to draw together a range of work and present it in a way that it is viewed as a whole.
· How will you achieve this?
· What work do you put in and what do you leave out?
· How does it work in conjunction with the developmental work, etc that is visible on your blog?
· How will you summarise and explain your body of work through both visual and written material?
· How can you describe some of the complex processes involved in reaching a final concept and discuss its wider implications?

 We need to do a minimum of 5 live/competition briefs which we can find locally or online.

Firstly I decided to join the following sites:

D&AD, YCN, ISTD and have a look around the websites for some briefs to perhaps complete.

Penguin Book Cover

I especially like the look of this brief not  only is the prize £1000 but also a placement at Penguin. Here the brief is to design a book cover design for an option of three books, Adult Fiction-

Oranges Are Not The Only Fruit by Jeanette Winterson, Adult Non Fiction- Freakonomics by Steven D. Levitt & Stephen J. Dubner and childrens cover- Carrie's War by Nina Bawden. Below is a really nice video of last years winners. 

J20

On YCN I found a brief to re-design j20 labels... 40% of J2O consumption is by those aged 16 and under, but we’re wanting to change that. The current artwork design is not seen as ‘adult’ by many; the colours are viewed as bright and childish, and some consumers have even described it as cheap and ‘chavvy’. We’d therefore like you to redesign J2O to appeal to a target audience of 25-35-year-old men and women. The design should make them proud to be seen holding J2O in bars, restaurants and at home, and should bring through J2O’s expressive, unpretentious and playful personality.

Propercorn

This brief looks really interesting as I would love to give packaging a go, here is the info taken from the site:

If we were to brand a black cab, we wouldn’t just skin the outside of the taxi with our branding. If done properly, the inside of the taxi would be as beautiful as the mass-facing exterior; we would consider the passenger’s comfort and the needs of their journey. We wouldn’t just see it as an advertising opportunity.

We often gift journalists and bloggers with our popcorn. Done properly, this should always arrive in a beautifully packaged box, with a hand written note on the reverse side of an illustrated postcard.

We pride ourselves on making sure that our popcorn is delicious and that every pack is guilt-free; low in calories, high in fibre and gluten free. Our popcorn is available in 5 naturally seasoned flavours; Lightly Sea Salted, Fiery Worcester Sauce & Sun-Dried Tomato, Sour Cream & Chive, Sweet & Salty and Sweet Coconut & Vanilla. Our popcorn is predominately eaten on-the-go but is also available in a sharing sized pack.