Showing posts with label Studio Brief 2. Show all posts
Showing posts with label Studio Brief 2. Show all posts
Tuesday, 20 May 2014
OUGD505: Final Bralle Greetings Cards
I created eight braille cards in total. Each card was hand-crafted with a large-scale braille message. The final cards come in a variety of colours. The colours have mainly been used to give the cards a more diverse element, but they also loosely relate to their individual messages. I wanted to keep the braille as consistent and clear as possible across the range of cards. In order to do this the braille was created using the same hole-punch method throughout.
The purpose of these greetings cards was to create something which set an example for others. For this project my key focus was to design something which other people could learn from and design themselves. By creating braille messages, alongside the braille research publication, I have even started beginning to learn a few of the braille alphabet by memory.
This project has been a great experience for me. Although I wish I had allowed myself more time to produce a larger body of work, I was pleased with these braille greetings cards. If I were to carry out this project again, I would create an identity for a company specialising in braille gifts and merchandise. It would have been great to try experimenting with braille logos, but I sadly didn't have enough time.
This project has been successful in creating something hand-made and unique. I would have ideally proposed the set of greetings cards as a box set to be given out at different stages of a person's life. The cards would either be ordered online, or hand-crafted by people who felt they wanted to attempt their own personal message.
In general, I have learnt a lot from this project. I do not feel it was one of my best efforts and this was reflected in the quantity of work. However, it has been one of the most successful in exploring new skills. I never thought I would begin to learn braille so quickly. Creating these cards and the research gone into the concept has given me a great deal more awareness of how many things we take for granted. There are many products and experiences which could be reconsidered for partially impaired people to appreciate, yet nobody seems to have addressed these.
Designing for a new audience has been a great experience and it is something I would like to develop further in the future.
Sunday, 18 May 2014
Studio Brief 2: Braille Greeting Cards
www.empower-yourself-with-color-psychology.com
www.color-wheel-pro.com
For the development of my Braille greetings cards, I wanted to go with a minimal approach. I began thinking about the best way to combine the message for people who could see, and those who couldn't. I considered placing the text at a large scale, overlapping with the braille as shown below. Although I liked some of the combination on-screen, I had a feeling it would not have worked so effectively once the braille had been embossed. For this reason, I also experimented with using the braille on its own to see how effective the outcome was.
I wanted the braille dots to be as defined as possible. I thought about a range of ways I could achieve this. I considered using nuts or lentils as they were the right width and would be easy to glue to the paper. However I knew this would not be practical over time as the food would eventually rot or disintegrate.
It was recommended to me that I tried sourcing some raised rounded stickers to achieve the braille effect. I searched in all of the craft shops I could think of including a visit to the large Hobbycraft but was sadly unsuccessful. Something I did come across was a packet of stick on eyes. These happened to be the perfect height of what I was looking for. Their raised dome effect would have worked as great defined braille effect.
I bought a packet of the stick on eyes as experimentation. This also meant I could see how the eyes worked as braille. I thought using the eyes as braille could be appropriate to the purpose of these cards - partially impaired people see through the feel of the braille.. in this case they touch the eyes to see the message. I was reluctant to follow through with this idea however, as I was aware it could have been seen as distasteful and offensive. I wanted these cards to appeal to a broad audience and set a good example, therefore I thought the stick on eyes were slightly risky. After running the idea past a few people, it was agreed that although the concept was clever and interesting, it may be taken the wrong way in a real-life situation.
As another alternative experiment, I tried painting the stick on eyes to see how effective this was. This was unsuccessful due to the paint not drying over the plastic eyes. I also tried painting over the lentils, but they looked jagged and uneven so I was steered away from that idea too.
Eventually, I decided to follow on from my previous methods used in my braille publication. I cut the braille dots out of watercolour paper using a hole punch. Each braille dot was then placed individually onto the front each card. I did this by referring to my own research publication. It was a really easy way to ensure the letters, spacing and punctuation were all correct. The braille dots were glued onto the front of the cards using a strong super glue.
I used the hole punch as a paperweight to keep the cards securely in place.
When each card was finished it was folded and left to dry.
www.color-wheel-pro.com
For the development of my Braille greetings cards, I wanted to go with a minimal approach. I began thinking about the best way to combine the message for people who could see, and those who couldn't. I considered placing the text at a large scale, overlapping with the braille as shown below. Although I liked some of the combination on-screen, I had a feeling it would not have worked so effectively once the braille had been embossed. For this reason, I also experimented with using the braille on its own to see how effective the outcome was.
Experimenting with opacities with and without text translations. The green braille dot experiments were taken directly from my Studio Brief one braille publication. At this point in time the colour was not used for any particular reason.
I wanted the braille dots to be as defined as possible. I thought about a range of ways I could achieve this. I considered using nuts or lentils as they were the right width and would be easy to glue to the paper. However I knew this would not be practical over time as the food would eventually rot or disintegrate.
It was recommended to me that I tried sourcing some raised rounded stickers to achieve the braille effect. I searched in all of the craft shops I could think of including a visit to the large Hobbycraft but was sadly unsuccessful. Something I did come across was a packet of stick on eyes. These happened to be the perfect height of what I was looking for. Their raised dome effect would have worked as great defined braille effect.
I bought a packet of the stick on eyes as experimentation. This also meant I could see how the eyes worked as braille. I thought using the eyes as braille could be appropriate to the purpose of these cards - partially impaired people see through the feel of the braille.. in this case they touch the eyes to see the message. I was reluctant to follow through with this idea however, as I was aware it could have been seen as distasteful and offensive. I wanted these cards to appeal to a broad audience and set a good example, therefore I thought the stick on eyes were slightly risky. After running the idea past a few people, it was agreed that although the concept was clever and interesting, it may be taken the wrong way in a real-life situation.
As another alternative experiment, I tried painting the stick on eyes to see how effective this was. This was unsuccessful due to the paint not drying over the plastic eyes. I also tried painting over the lentils, but they looked jagged and uneven so I was steered away from that idea too.
Eventually, I decided to follow on from my previous methods used in my braille publication. I cut the braille dots out of watercolour paper using a hole punch. Each braille dot was then placed individually onto the front each card. I did this by referring to my own research publication. It was a really easy way to ensure the letters, spacing and punctuation were all correct. The braille dots were glued onto the front of the cards using a strong super glue.
I used the hole punch as a paperweight to keep the cards securely in place.
When each card was finished it was folded and left to dry.
Sunday, 12 January 2014
Design For Web: Website Development in Dreamweaver
For the development of my website, I wanted to concentrate on incorporating more colour and imagery on to the majority of my pages. As the topic of my site was Moroccan Art & Culture, I thought use of colour was essential. After visiting Morocco last summer, and also researching into Moroccan themes, I was aware that white and red were a core colours of Moroccan art and culture.
"White is the color of Sunni Muslims, which is the principal sect in Morocco. It is the predominant color inside Mosques. White also symbolizes peace, and purity, and is used by Jewish families to paint their houses."
"Red, or Rose is the color of Marrakesh, an Imperial city tinted with the natural color of Tabla, a red clay from the Haouz Plains west of the city. This is mixed with water and then spread on buildings. It dries to a salmon pink shade that also glows in the evening... It is also the color of the Royal family of Morocco. Poppy petals are used as a natural pigment in dying things red."
- Jeffery Bale: jeffreygardens.blogspot.co.uk
I wanted the presentation of my website to follow a structure and colour scheme relevant to these beliefs and understandings. As this was my first time using Dreamweaver, I decided to keep my website as simple as possible. As part of my feedback from the group crit, it was suggested that the website did not need to be over-complicated and that the art could 'speak for itself'. This made the actual development of my website much more realistic with the very basic skills I was working with.
As a starting point, I experimented with incorporating colour into the navigation bar. I wanted to use a colour which instantly caused people to think of Morocco. The first three colours which came to mind were blue, red and yellow. I used this as a starting point and experimented with each of these to see what they would look like.
Blue: #36F
Yellow: #FF0
Red: #F00
Although these colours all seemed appropriate in theory, my initial reaction after experimenting with each of them made me feel most inclined to work with red. This was because the blue and yellow both seemed more distracting from the text. I wanted to use a red which was slightly more earthy as opposed to the bright bold red shown
#C30
This colour came out a bit too orange on screen.
Red: #C0001B
This was the ideal colour I was hoping for. The red was vibrant enough to grab the reader's attention, without straining their eyes due to extreme brightness. The red was also more similar to a brick red - like the red/pink buildings in Morocco.
The CSS coding for this navigation bar now looked liked this:
Once I was pleased with my navigation bar, I wanted to experiment with a background colour for my website content. I thought it would work effectively with a very light, subtle cream colour. My first attempt on the Homepage/Index page is shown below:
As you can see, the result was not ideal. I had been intending for the calligraphy image to have a transparent background. However, no matter what I tried, I was unable to resolve this issue. I tried to delete the background in Photoshop and save the edited image as a JPEG to re-upload it but this did not work. I also tried using 'image trace' over the image to create a new layer consisting of only the black lines but this was unsuccessful as well.
As this issue was one I was unable to resolve, I came to the conclusion that the website worked just as well, if not better, with a white background. Although the extra colour would have been ideal, due to time, I decided to leave the white background as it was and as suggested in my feedback; 'let the artwork speak for itself as opposed to the website'. So for these reasons, I returned to the original white and red colour scheme. This was not all bad though, as white is perceived as 'pure' in Morocco.
The next stages of development were all done one page at a time from this point onwards. Beginning with the Index/Home page, I began forming a core structure for my website, from which I would build on with relevant content.
1. Homepage/Index Page
I wanted to keep the Homepage as simple as possible. I placed the navigation bar at the top of the page. This is where the buttons for each page would be placed. The navigation bar was to be static in its position throughout the site. This was to ensure the navigation was clear and easy to use for all users. As an additional feature to add clarity to the navigation and page links, I added a 'rollover image' consisting of two surrounding lines. These appeared when the mouse was hovering over a particular page. For the Homepage, I followed a two-column layout, splitting the page into text (left) and image (right). The development and coding process is shown below in Dreamweaver CSS and HTML.
HTML Code
CSS Code
I deleted the code for 'line' and 'line1' as these were no longer necessary. I decided my Homepage worked effectively without the lines.
About Page
HTML Code
CSS Stylesheet
Too keep the website consistent, I deleted the 'line' code on the 'About' page. This was to work within the same framework as the Homepage.
Changing the name of tabs to make it easier to work with. from 'left' to 'text'
Altering the size/dimensions of the main image 'tagine' for the 'About' page.
Design Page
HTML Code
CSS Stylesheet
As displayed in the screenshots shown below, I began by placing my images at top:170px for all images. The tower image was placed 300px left, airport 550px left, lantern
Altering the text box to fit accordingly with images. Slightly different layout to the Homepage.
I preferred the images closer to one another. However this caused to the text to look as though it was floating too far from the images. To resolve this, I also increased the size of the text box I had previously created.
I thought it would be good to use another 'rollover image' effect for my design page to divide my content up more clearly. In order to do this, I created an Illustrator file, in the same manner I created each of my rollover buttons. This was altered to 210px by 210px to measure to the same size as my images.
This document was then filled with relevant text to various images. The initial appearance of these images were the image itself, followed by their description.
Once the image was changed to width: 210px by height: 210px, the rollover image worked how I had intended.
Contact Page
HTML Code
CSS Stylesheet
_______
Subscribe to:
Posts (Atom)