# data[].attributes.body
My gallery is the Ginza Graphic Gallery (GGG) in Tokyo featuring the colour green. I see japan as a very rustic, natural country that uses manual technique more over the modern. This is why I have chosen Prints as my theme, the pieces are then separated into a further 3 groups Japan, Body parts and Shapes

# data[].attributes.body
Bauhaus is all about function over form, they didn't care too much for what their final product looked like, just so long as it did it's job. Taking this into consideration I decided to go with Geometry as a main theme, using basic shapes and straight lines to build a website around the blues of Berlin.

# data[].attributes.body
Most of the works in cooper-Hewitt is about the floral pattern and textile fabric. So I decided my concept is man clothing fashion and I will use some collage floral pattern for the design of my website, to make it look provoke and simple.
My group has decided to go for a provoke theme, hence I will use some collage flowers to cover the body of a man on the first page to show a feeling of provoking.
When you first go on the website, an animated GIF starts playing - some flower would bloom. There is a hidden navigation bar at the left of this page and the logo.

# data[].attributes.body
shaikha buhamra

# data[].attributes.body
Geometry is my concept, through this I will explore the use of shapes in my designs. My main inspiration for my concept is Kazimir Malevich, who is Russian Artist that developed the style of suprematism; which is the name given to his style of work that is characterised by abstraction and geometric forms painted in a limited range of colours. My website will have an unconventional layout to intrigue the viewer, I intend to make it interactive to engage the viewer and this can be achieved through simple animations or features such as roll over buttons and slideshows.

# data[].attributes.body
My city is Barcelona featuring the colour range of yellows and oranges. When researching the Cooper Hewitt collection and trying to decide on a concept, the images I liked best were those which featured patterns, illustrations and more detailed designs. Because of this I then decided to research these elements further, looking at how they link into the location of Barcelona. The buildings, streets and areas featured around Barcelona are all interesting and intricate things, which themselves are a piece of art. From this, I wanted my webpage to feature this pattern style and I decided to do so by overlaying parts of images on the landing page and making them appear to have a uniquely made pattern from the pattern image itself. When hovering over the blocks of pattern, I wish to create elements that move within the box image, along with each time the page is loaded having the image order different each time, making the page appear more exciting. Once an image box is clicked on, it then takes you to a pop up page that features the full image, some text and another interactive element to the pattern. Because I wish to incorporate an illustrative feel to my webpages, I want to show drawings which link to the images and connect to the pattern on the image.
The wireframe features the general structure of the individual landing page that I want to create and is further reflected in the development after featuring bolder colouring and a stronger layout. My aim was to feature the larger square blocks that are consistent throughout the whole websites theme as well as being featured on the logo.

# data[].attributes.body
Barcelona has many buildings scattered across the city that were designed by the famous architect, Gaudi. Saudi's inspirations were derived from nature and life forms, which can be seen in the floral patterned stained glass in the Sagrada Familia, and bone shaped pillars on the Casa Batllo. Hence, it made sense for my themed pages to based around these, to pay tribute to the artist's beautiful constructions, and to bring a cultural experience to the museum.
My group have decided to go for a minimalistic theme, hence I have decided that to keep some consistency the only colour will be displayed in my logo, and in the artwork. Thus making the background of my website white, and the separate icons all using shades of grey from our team's colour palette.

# data[].attributes.body
New York is a busy city with millions of people living in it, all doing the same actions every day; some sub-conscious, some that we have been taught to do from young and others that we have to do in order to survive. This is repetition. I explored this concept further, linking it to art work pieces that showed signs of repetition.

I decided to represent repetition as an undated calendar (and for those who may have noticed, also links the month and year of the exhibition to the layout) to show the user what they do every day without fail that they may not notice. I have left it undated to keep the calendar relevant for any moment in time as the repeated actions we do are not defined by a date. I wanted to use neutral colours in the background as to focus the viewer on the ‘date’ blocks which will be interactive. The front of each block will show an uncomplicated iconic drawing of the repeated action (eg sleeping-as seen, eating, breathing, drinking, brushing teeth…). Behind some of the blocks will contain the exhibition pieces that will show in a pop up box (as seen) and others will be blank (maybe have something relevant to repetition, not too sure yet!) to encourage the user to engage and interact with the website and make them aware of their repeated actions either through curiosity or frustration of having to repeatedly click on boxes to get the desired information. I plan to continue this style below the fold and onto the other webpages of mine, signifying the routine is an endless cycle that we do daily irrelevant of the date. I may space the red boxes out and have random ones as blank space instead once below the fold to signify entering the endless (well…) timeline of life and to avoid a big block of red!

My menus will stay tucked away unless hovered over or the arrows (which will be constantly visible) are clicked to keep the design clean and the concept clear.

# data[].attributes.body
Talisha Mistry

# data[].attributes.body
The stage I have been given is Berlin. The theme of webpages are boats so that means that the images I have chosen for the webpage will include boats.

The webpages will have hover over effects so that parts of the design will only appear when hovering over a part of the webpage.

# data[].attributes.body
I was allocated the stage in Tokyo, with a pallet of varying greens. The exhibition I have created focuses on typography. I have selected artworks focusing on their typographic qualities, and of course being green. These have further been divided into green type, white type on green, and bold colour on green.

As the theme and voice of the promotional materials I have selected to look at the Japanese culture and tone. I found that some of the norms and conventions of Japanese design will challenge and intrigue western viewers, as the viewing experience is altered, but also will allow the promotional materials to feel fresh and exciting. Also with the Japanese influence evident in the posters it will allow the Japanese viewers to feel the exhibition is also fully emerged in their culture.

Therefore my designs feature subtle gradients typical of many Japanese posters and designs, with simple and plain vector shapes and bold type to balance out and compete with the bold bright colours. Furthermore due to the japanese writing system where information is organised top to bottom, with columns ordered right to left this means that the natural place for the eye to follow is altered. Therefore the layout of the website reflects this; large areas of space have been left to place emphasis on this, but to also to guide western viewer without them having to work hard. Furthermore the text of the menu is vertical text reflecting the japanese writing system, but also allowing for the viewer to be lead down the page. To further aid this vector arrow shapes have been placed as borders but also to guide the eye and separate the sections, these vector illustrations also reflect the japanese style and tone.

However many western sites have shifted towards more minimalistic layouts and less information and to only give the viewer exactly what they need, further endorsing the scanning nature of websites. Japanese websites have shifted the other way, with many being filled with lots of information, allowing the viewer to feel as if they could have any question answered and find lots of information out. Therefore the pages have been designed to feel full of content and information to reflect this, but also through the use of the over laid boxes it creates the illusion of more information and content, therefore meaning it will be less overwhelming to a western viewer, who has become used to the simple and filtered communication and information often used.

(i had an argument with the computer and it wouldn't let me upload the pdf)

# data[].attributes.body
The city I have been given is New York. New York is considered to be one of the most famous cities in the entire world, and is very much considered to be the centre of all culture in the United States. Which I feel ties in with my concept being based around war, politics and religion as these topics are also a focal point in todays society as well as in the past.

My format will consist of a static and transparent navbar aligned to the left of every page, with the only differences in the each page being the contents of the gallery. Inside the gallery pages you can scroll around the page and hover over images with a brief description or you can click on the image to expand the image, dim the background, and read more in depth.

The idea is to make my personal web pages more colourful than its landing page, as the company slogan is "escape the black and white" myself and my group intend to take this in the literal sense and make the landing page purely black and white and have our own pages in full colour. This is a way to communicate our slogan more strongly.

Ben Frowen - Group 6

# data[].attributes.body
The city I've been given is London. This is a very modern and vibrant city with a variety of design culture which have a classic feeling or modern feeling. Ive designed my webpages to help show a modern feel and link it with this city.

The page format I have chosen to go with is 1 main page separate, 3 pages together.

The main page/ landing page is very simple with just the individual logo and key information about the exhibition. As well as this I also added in a GIF on the centre of the page which will constantly loop to help my webpage feel more alive. Under this I am going to include a basic illustration, this is still unfinished and will be have some of they key locations in London. Under this I put a brief description about my city and the exhibition and colours. I used the triangle design from my individual logo as a nav bar. The colour which is most visible represents the page that it will navigate you to.

The next page is about the Design Museum in London, this is where the exhibition is being held. On this page I gave a brief overview of the Museum and will also include a simple illustration of it. Under this I have put all the social icons, which will be hyperlinked to the different social media that they are active on.

The third page is very similar to the Design Museum page. I have included information on Cooper Hewitt, along with a selection of images which are all going to be hyperlinked to the Cooper Hewitt website.

The final page is a social network/ connection page which has all the different social icons that Cooper Hewitt is active on, as well out our group's Project #Hex Instagram page. All of these will be hyperlinked

At the bottom of the three pages is the logo with an up arrow which will be hyperlinked to send you back to the top of the website, instead of scrolling.

Hasnain Ayub.

# data[].attributes.body
My design for Japan Expresses nature through photography and illustration to show how Japan can explore nature. The photography is above the fold and the nature is below the fold. The flowers above the fold intrigue people to look further. Also having the Explore button at the end saves people having to scroll to the top to view the collection.
I want to change it slightly by adding my tagline in the middle of the pictures, also add in the site map at the top and bottom with a lighter grey colour.

Alex Frost

# data[].attributes.body
New York represents the centre of capitalism and a growing population of diverse ethnicities and culture. My webpages will explore typography in various languages to represent the culture.

The landing page will be very simple with some information about the project and the museum the exhibition will be held in. The landing page will have hyperlinks to the 3 gallery pages. There will be a navigation bar at the top which will disappear has you scroll down the page. The navigation bar will be the same throughout all the cities so there is consistency. Each image displayed on the gallery pages will be linked to the original image on the Cooper Hewitt website so more information can be viewed by the audience. There will also be a footer and within this will be links to our Instagram page and contact details.

# data[].attributes.body
Most of the work in the gallery I found is about femininity - I've divided the concept in 3 categories / Graphics, Texture and Elegance. / The element in this website are triangle and transparency (I might add more triangles later)

So you can click on one of the boxes to see the collection I've chosen. I want to keep my website clean and clear in hopes of focusing on the collection.

# data[].attributes.body
My concept is to use geometric shapes for the design of my website, to make it look edgy and modern, and at the same time keep the design clean and not overcrowded.

When you first go on the website, an animated GIF starts playing - a lot of triangular pieces collide together to form the banner and the words "Project #Hex Barcelona". This banner fills up the whole first page, so that you have to scroll down too see the rest.

After you scroll, there is a short paragraph of text, giving you a bit of information about the gallery.

After that there are 3 geometric shapes, which will be buttons. When you hover over them, they will be animates and will spin. When you click on them, each will take you to a different gallery.

At the bottom is the footer and a button, which brings you back to the top.

# data[].attributes.body
My website concept is rounded (product and graphic design) by bringing up minimalism, comfortable, surprising effects. I have chosen blue, black, white as my website's theme colours. I will create some blue moving particles surrounding the ‘H’ logo on the first web page. Typographic movement and animation will be added to the other web pages.

As it is Berlin’s website, I will make it into two languages - English version and German version. My website will be simple yet informative as I think audiences are normally impatient when webpages take a long time to load.

# data[].attributes.body
As I will use a parallax code, my whole website will be animated!
Starting from the top of the page, there will be a bucket full of paint, so as you scroll down the paint will pour into the vector of NYC. As the paint pours on the Statue of Liberty the vector will colour from black and white to black and other colours!

Then it will display some info about the NYC exposition and about the PROJECT #HEX.
From the X of "HEX" a line will occur. That line continues the parallax scroll into some hexagonal shapes that will open up the pages to my colour galleries. Animations like the coloured cube increasing size, the text around the hexagon will draw it's self. In the bottom of the page will be a nice animation that will redirect you to the mobile app page as you click it.

# data[].attributes.body
Okay, so. My concept first of all is mental illnesses, each of the 3 pages (not including the landing page) is representing an illness. Each page has quotes from friends/just quotes I've found on the internet, to make it more personal and not just an info page about the illness.

The two first pages (i have two pdf pages for each webpage to just show the funcionality) are the landing page. When you hover over the explore button/social media, the images get filled in with scribble. The quote is a gif that changes background. The buttons on the illness pages are big with a transparent text. (which btw are made with a svg element and is not an image) So when you scroll the images shines through. Just to kinda connect with the big quote at the beginning, also it looks cool. There is also a link to Moma and some scribbles over the page.

The next two pages are the first illness, bipolar. I tried to make it split in half as bipolar is a lot of ups and downs. When you scroll to the bottom there is some information about bipolar.

The next two pages are about OCD. I used javascript to be able to move the images, just to make it more fun. Text at the top is still transparent. Also haven't figured out really how to add the information about the illness on this page yet.

And lastly, the two last pages are about dyslexia. It has the same layout as the bipolar page but the quotes are different. I tried making it extreme so it was hard to read, to connect it to the illness. And when you hover over the quote it's written normally, just so people will be able to read it.

The images I've chosen are all based on the illnesses. Not that the artist had that illness in mind when they made it but imgaes I thought fit with the illness.

Okay, that's all. Sorz for the novel.

OH and the dealio with the scribbles. I kinda thought of it as a normal page showing art. But then people suffering with these diseases came in and scribbled all over the pages, wrote quotes that they thought fit with the images. And kinda took over it? Now I'm done.

# data[].attributes.body
Concept: New York represents the centre of capitalism and both selling and buying. After every successful transaction, a shopping bag is given as a tool for transportation of goods, but also as a statement. This gallery will explore the artistry and craft of shopping bags and will open the audience to an undiscovered art form: shopping bag designs.

Website:
Simple menu bar on top.
On the landing page there is a collage of all 50 shopping bags in the gallery in the shape of a shopping bag.
The design elements suggest elegance, fashion and art, being inspired by the art deco movement.
If you scroll once or press the small arrow at the bottom of the landing page, an animation takes you to the About section.
Custom skin for google map.
Large EXPLORE button that takes you to the collection of art works.

# data[].attributes.body
CCCB host many debates and discussions about different forms of design and media, I want to reflect different approaches to design on my web pages.

This also reflects the city of Barcelona. which happens to be on a very strict grid system that can only be seen from above to the organic architecture by Antoni Gaudi that you see when at ground level

# data[].attributes.body
I have used the colour red to relate back to the 'Big apple' of New York. I tried to think of three emotions, which you can associate with the colour red. All of the images I chose have been designed in the United States of America. The three emotions I chose were Love, Anger and Hazard. For ‘Love’ I wanted to make the page very warm and use many different reds and pinks. However, for ‘Anger’ I wanted to use blacks and red to try and create a dark page showing old war posters that were created in the US. I wanted to play around by making the anger page annoying. Having flashing red or black pop up in the parallax bar The last image I relates to red was ‘Hazard’. I feel like we feel a lot of hazard in our life’s and I wanted to relate it to disease. I thought I could showcase American Aid poster warning people away from disease.

As you can see in my wireframes, the main images at the top will be a parallax roll down image. So when you roll down the page the image with move with the scrolling of the page. I will use a smooth slider to show of different posters and designs that have been created in America. The nav bar will stay the same, I will try and keep it as close to the main wireframe of the main website to keep consistency.

# data[].attributes.body
Please export your individual web design mock-ups as interactive (or small size) PDFs.

Share your design by posting each page here. Make sure to include a brief description of the page's functionality!

The aim is for everyone to participate with constructive and intelligent feedback. Remember—it isn't about what you like but rather what works!
* I will provide feedback to everyone who posts. Your engagement is crucial if you want to ensure that what you're coding for next week's critique is viable!