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
_______
No comments:
Post a Comment