Responsive // Feathr: Pattern design research

Research

Firstly I have browsed illustrations and patterns that I think would be effective as wallpaper.

Chwala by Sofia Noceti

I am inspired by the colours used in these illustrations, and I've always wanted to explore my ability to illustrate aspects of nature eg leaves and flowers. Wallpaper is often linked to natural things, and plants are calming and popular in peoples' homes.

Colección de Libros - Editorial Pringles Press

Aves de papel para armar

Birds are often used as a decorative feature, which is what drew me to these prints which use a more modern take on a bird pattern. I really like it, however I think I want to take a more original take on wallpaper.

Colours Papers by Cocolia

This illustration has inspired me to be loose with my ideas and create some artistic patterns. However I do not like the colours, they clash too much.

Guts Zine Buffet by Tatiana Boyko

I really like the colours used for this pattern, and the illustrations are pretty and fit in well to eachother.

The Jungle Book cover by Tatiana Boyko

Book cover design by Wenjia Tang

I like the overlapping of images in both these designs, which creates a forest like appearance. Something about them is calming and not overwhelming.

Responsive // Feathr: Wallpaper research

While browsing the web for wallpaper designs, what I found was mostly very one dimensional, as seen above. Nothing really stood out to me apart from the forest pattern which is very mystical and effective; however in smaller homes maybe it wouldnt work as well.
The other patterns are nothing out of the ordinary and uninspiring, they all seem to cater to a similar, small target audience and play it safe. This has motivated me to create something unusual for Feathr, something that hasn't been done before and that appeals to a young creative audience.

Responsive // Feathr

Feathr Brief

I have chosen to design a wallpaper pattern for the Feathr competition.

"We want you to lift wallpaper out of the decoration ghetto and turn it into art. Decoration matches the carpet. Art blows minds."

Reward

Artist Accelerator Fund: $5000 cash

5% royalties, based on net revenue, paid on a monthly basis.

Why did I choose this brief?

There is a freedom to design anything, which fuels creativity and excitement. There are no strict guidelines and I enjoy creating simple imagery and working with colours.

I think I have the potential to come up with a unique idea and have a shot at winning.

Audience

Young home owners who are earning a decent wage

People interested in art and design

Stylish people who are passionate about vibrant interior

Key aspects to remember

Wallpaper shouldn't be too loud or use too many different colours - it is filling a whole wall where there is already furniture and other objects.

When designing, I need to take into account how the wall will look from different distances, and if it will affect how the pattern looks, for example small faces will not be seen from the other side of the room and might look messy.

How will you balance what you want to do, design or produce with what the client requires?

I will make my design seamless, as it needs to be repeated as wallpaper and still work as a pattern. This means that the design will have a limit to its width, which will need to be taken into account when coming up with ideas.

I will review my work as I go along to check if it is suitable for wallpaper, eg colour overload or sizing of details.

Does the brief offer enough breadth and scope for the development of a range of responses while at the same time allowing you to focus your practice?

There is a lot of freedom with this brief, which can sometimes make it difficult to start off as I work better with more guidance. However, I can think about what is and isn't appropriate for interior design and the target audience. 

OUGD504 // Studio Brief 04: Study Task 12

Augmented: critical questions

Augmented design is design that has had extra elements added to it that makes it interactive.

Layar app - interactive print

The Layar interactive magazine creates a digital platform for readers to engage with, by introducing videos and moving images that seem like they are on the physical pages.

• This idea is very unappealing to me as it defeats the whole object of why people choose to buy magazines over browsing the internet. Why add digital elements to something that is getting pushed out by technology as it is?

Tide Dirt Magnets 'Magttraction'

This video shows a magnet moving dirt on the page of the advert to make it seem like the clothing is being cleaned; thus demonstrating the potential of the product.

• I find this idea quite fun and clever. It makes the product memorable and it doesn't require faffing about with your phone or an app.

QR codes

QR codes are a way of accessing information fast using an app on smartphones to take a picture of the unique barcode for a product. Personally I have never used one, and I don't really know how to, like a lot of people. For some things, they may be a quick alternative, eg information about a certain product or buying a product.

More interactive design I find effective...

These ideas are very simple and don't require an unnecessary amount of participation and are quite natural (except for the McDonalds puzzle perhaps).

What is the potential of interactivity in print?
There is potential to connect to the public in more interesting and unique ways, as technology takes over and people's attention is harder to get with just simple old fashioned print. Creativity can be unleashed in many new ways. However, I don't see it as necessary for successful advertising, I believe that if what is being advertised is well made and is aimed at the right demographic then ordinary print is enough.

Can augmented design help draw people to your website?
Yes, if it is used appropriately, without seeming too much of a pointless gimmick. If I decide to advertise for an exhibition, then surely the exhibition itself is interactive enough?

Is it all just a bit gimmicky? Or, are there opportunities?
Augmented design is definitely a fad, and seem to ruin already brilliant design just by trying to be out of the ordinary. The aesthetics are hard to polish so it ends up looking pretty cringe worthy.

What kind of interactivity would be effective for my campaign?
Something that gets people inspired to learn about art and the beauty of it. A digital interaction seems unnecessary because the advertising will be for an easily accessed website, unless its something simple. Some initial ideas:

• QR code for a quick website preview on the viewer's phone - these barcodes are overlooked by most people, but useful to some.
• scratch card effect -Q&A about an artist or movement, they scratch the surface of a flyer to reveal an image or answer.
• Freebie of some sort, such as a badge or bookmark.
• sliding puzzle of a piece of famous artwork.
• peel off big unnecessary amount of information/jargon to reveal simplicity of the website.

OUGD504 // Studio Brief 04: Study Task 11

Writing a project rationale

Purpose

Attract the target audience to the website through eye-catching, straightforward advertisement that clearly portrays what the website is about.

Audience

16-26 year olds

People interested in the history of art

Artists and creatives in general

Message

Modern Art Movements is a simple, fun website to use with information on popular and iconic movements that is easy to digest. 

Tone-of-voice

Informative, informal and friendly, as the website is aimed at young people and is all about information.

Format

Printed advertisements - Magazine advert, poster, and flyer.

Materials

Quality stock to be printed on such as matte paper and gloss paper, and quality printer ink.

Budget

As I am a student my budget is quite low and that needs to be taken into consideration. 
A fairly low budget will be in place.

Placement/distribution

Poster - Around universities and colleges, especially art and design departments.
Flyer - Universities and colleges, cafes, bars that are popular with young creative people.
Magazine ad - local art and design magazines/zines.

Must do's and Must not's

Must contain important information needed for people to access the website.

Must use eye-catching and exciting imagery that reflects the website.

Must use legible and readable type and appropriately sized text for the format.

Must not use too much text; only what is necessary. The website will speak for itself mostly.

Must not use too many different colours, this can be off putting.

Time-frame

The advertisements will be printed at the latest 8/1/15, meaning the designing will happen during the rest of December.

OUGD504 // Studio Brief 04: Study Task 10

Advertising considerations

Audience

• People interested in the history of art
• Artists and creatives in general
• Young people - aged 16 - 26

Message

• There is a new website being launched that is about modern art movements. It is simple, easy to use and displays amazing and iconic works of art.
• Is is a lot easier and more enjoyable to navigate than already existing art history website databases.

Tone of voice

• Friendly
• Informative
• Straightforward

OUGD504 // Studio Brief 03: Final web designs

Desktop mock-up

Mock-up of the website's homepage in Google Chrome

The header/menu stays in place when scrolling, so to keep it consistent.

The 'about' page is a brief explanation of why the website exists

Each menu has drop down options to make it easier for viewers to navigate quickly.

This is an example of how the webpages for each artist look. Images are displayed in square, thumbnail styles which can be clicked through for the full artwork.

The layout of each art movement page has basic information and the relevant artists.

When hovered over, each image shows the artist in clear letters.

The search option shows clear results underneath the search bar.

I am happy with the outcome of my website, as I am confident that it is easy to navigate and straight forward.

OUGD504 // Studio Brief 03: Staying web safe

Web design requirements:

Are the fonts web safe?
Baskerville is a web safe font, however Bebas Neue is not.

• My reason for not changing Bebas Neue to a web safe font is that I will use it in image format, which suits the menu options; it is not used for body text. Doing this will mean it is not changed into a default web safe font automatically in people's browsers.
• A challenge is the website being used by non-English speaking viewers; using the text as an image means there will be no option to translate it into a different language. However, the font is only used to express the art movements which have (almost) global names to them, making it less of an issue (and the top menu). It is also used for the drop down menu of artists' names, which obviously can't be translated.
• The menu options across the top of the page however, are just english words which wouldn't be recognised by non-English speakers. This is a small downfall to my website, but it is a website which is just starting off, meaning that a huge surge of people using the site who can't understand 'About, Artists, Search, Contact' in simple terms would be unlikely.
• If the website started getting a large amount of viewers, this is something that would probably become more of an issue, but at this stage it is not.

Are the colours web safe?
Almost all my colours are except for one or two. However, in this day and age this does not seem to be an issue anymore. Technology has developed so that computers made over the past five years have monitors capable of displaying 24-bit/32-bit colour, which is a possible 16.7 million colours. This means that most people viewing my website would be able to view the colours I have used, unless they are used a very old piece of technology. My target audience is young people, meaning this risk is unlikely.

OUGD504 // Studio Brief 04: Digital Print workshop session 3

Images placed in Indesign
Photoshop

• 300 dpi
• actual size
• CMYK or greyscale (not RGB)
• .tif or .psd (not JPEG)

Illustrator

• CMYK
• .ai (if we 'place' the image) - can copy and paste

Resize images before placing in Indesign, otherwise the printer has to work through the resizing.

Resize an image in indesign to how you would like, then take the percentage and resize in photoshop to match, so there is no scale value.

File > Package creates a folder including all files, which can include a PDF version.

OUGD504 // Studio Brief 03: Website layout development

• Opening Indesign, I have started on my webpage. I want to create an attractive menu for the art movements that attracts viewers to click on them.. I thought a good idea for this would be to take small snippets of a piece of artwork from the movement and use it as the individual menu button.

• I like the font Bebas, which above you can see being used in the horizontal menu, and the art movements menu down the side.
• I'm not definitely sure about using this typeface yet, as I'm very aware of the harshness of all the capital letters (Bebas has no lowercase). I picked it because it is youthful and modern... a lot of sans serif typefaces are dull to me.

• I have added some colour to highlight the menus and break up the content a little. The pink didn't really seem suiting, but I'm warming to the green colour, however I think it might be a little too much to take in for people visiting the site, and may detract from the colourful content.
• The homepage so far consists of a piece of art work, labelled 'Artwork of the week'. The idea is to change the image weekly, to give a taster of the work on the website, and to make the homepage have a simple, suiting feature.
• The highlighted, larger menu option at the side shows how it will look when the viewer hovers their mouse over it, to make it clear.

• Above shows the page of the artist Claude Monet. The selected works are presented through square thumbnails, which can be clicked through to see the full image. Underneath is a summary of the artist and their techniques, which is currently in Helvetica Light - is it a plain, and simple typeface which needs to blend in and not be noticed, but only read.

I have put a black box behind the imagery of the side menu, and made the images slightly transparent to mute the bright colours so the names are easier to read.

Following feedback, I have scrapped colour for the background of any part of the website to simplify the layout. Above is a layout I am trying out, along with the two images below.

I've introduced Baskerville as a font for the content, as bebas neue is too harsh to use for all titles. Baskerville bold works well for headers and Baskerville regular/semibold for text.

Based on my experience with user friendly websites, I prefer the last image in terms of layout. The border I have placed on either side centres the content and focuses it, making it neater and more together. The top menu bar being aligned with the logo seems to work better and come across clearer.

• I created some black vector icons belonging to popular social media as a means of appealing and drawing in young audiences. Many websites these days have accounts on at least one of these so to better connect with viewers and people who are interested.
• I also got rid of the 'links' option in the menu as it seemed unnecessary. It was going  to display the sources of information.

• To make navigation clear, I have changed the colour of a menu option and enlarged it when it is hovered over/clicked. This shows what page the visitor is on without adding an unnecessary header. It keeps it simple.
• My 'about' page is a short paragraph describing the site, while still using keywords that optimise the search engine results.

OUGD504 // Studio Brief 04: Initial advertising mediums

For studio brief 4 I have to create an advertising campaign for my website.
Taking into account that my website is based on modern art movements, below are advertising mediums that would be suitable for this kind of content, while reaching the target audience.

Magazine advert

• art and design magazines
• independent zines

Pros
effectively targets a certain audience
reader interacts with ad physically - can be referred back to and is lasting
Cons
expensive

Flyer

• studenty bars and cafes 
• art galleries/museums
• libraries
• between magazine/book pages
• packaged with magazine/book deliveries
• art college fresher packs

Pros

quite cheap

person interacts with ad physically and possesses it

can be specific with locations

Cons

very disposable

might lose out by flyers not being taken

Poster

• art college
• art galleries
• libraries

Pros

quite cheap

locations can be specific, freedom with location

Cons

might get damaged depending on location

What is being advertised?

• The website itself
• Launch event
• Art exhibition to promote website

Advertising directly for the website is probably the most effective idea, however an event makes the website more interactive. 

OUGD504 // Studio Brief 03: Study Task 09

Search Engine Optimization

Search Engine Optimization is the process of affecting the visibility of a website or page in a search engine's organic (un-paid) search result.
The primary results that show up are what the search engine finds most relevant to the user

Google SEO starter guide - http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

Page titles

• Using the <title> tag lets users and search engines know what the page topic is. (placed within the <head> tag.
• These words will end up in the first line of the results.
• Create unique titles for each page to make each distinct from the others on the website.
• keep titles short as Google has a limit to how many words it uses.

Description

• A page's description 'meta tag' will gives search engines a summary of what it is about.
• Placed within the <head> tag.
• search engines may use the meta tags as snippets in search results.
• Accurately summarise and be unique.

URLs

• Keep them simple and easy to understand.
• Keep relevant... if they reflect the content, they are likely to be recognised by search engines, eg [modernart.com/100a/4348700.htm] vs [modernart.com/movement/modernism.htm]
• Avoid generic page names (eg page1.html) and overusing key words (art-modern-art-modern.htm)
• Prepare for visitors knocking off the end of a URL to find more general content. Often a 404 error will appear, but fixing this so that content is displayed will help keep visitors on the website.

Navigation

• Not only helps visitors, but also search engines to understand which information is the most important.
• Plan navigation based on the homepage/index; create a naturally flowing hierarchy.

Content

• Write easy-to-read text.
• Stay organised around the topic.
• Create fresh, unique content.
• Create content primarily for your users, not search engines.

Potential SEO changes to make to my website:

• make sure enough key words are included in the about section.
• make navigation even more easy to use.

OUGD504 // Digital Print workshop: Session 2 - Photoshop

The visible spectrum is the colours the human eye can see.

RGB colours in photoshop being changed into CMYK can possibly distort and change the colour for print.

How to change the colour mode.

Colour gamut: the whole range of colours, eg RGB colour gamut.

Gamut Warning highlights the colours only available in the current colour range, eg RGB, which will be unavailable if the colours are changed to CMYK.

By changing the Levels and Hue/Saturation etc of the image, this can be avoided and the gamut warning will decrease, making the image more colour friendly.

Proof Colors shows how the image will look when converted to CMYK.

Why don't we just convert to CMYK?
Because with CMYK, as seen above, there are less options available for editing.

Hold down alt and press a swatch to delete.
Press D to reset chosen colour to black and white.

Emptied swatch palette > save swatch palette as 'Empty swatch palette' to use in the future

The top small square with the warning sign shows the nearest colour available for print, and the bottom one is for web.

By clicking on it the colour is changed.

Spot colours in photoshop

Duotone image

By working with duotone, only 2 colours are used for the printing process, which saves on printing costs. Using this feature in photoshop means you can altar the levels of colours in the image before printing.

The two colours are the equivalent of black and white.
The colours can be adjusted by moving the lines in different places.

By adding a third colour, it becomes a tritone image.

By accessing Channels while still in RGB mode, the image can be viewed in each of the three primary colours to show how much of each needs to be used.

Overprinting

A spot channel can be used to overprint a colour on top of a black and white image.

Viewing the spot channel on its own shows clearly in black where it has been applied.

The solidity can be altered easily in the options, which differs how much ink is used to print.