Khalida.biz website - the making of.. part 3: Final design and functionality

To transform the webpages from the previous blog post to a more flexible design I had to make a few decisions.

First:

• How wide did I want the pages to be? (answer: not too wide, I opted for 740px, fitting most phone browsers)
• How could I make use of the available space and still display the pictures for each menu item? (answer: make the headers a bit longer and pull the pictures into the header)
• If the backdrop was not going to be white, then which background color should I use?(answer: use colors similar to this blog :)
• Where would I add the social media Icons? (in the header! now that there is more space..)
• What would I have to change in the layout if I make the pages centered on the screen? (answer: not that much, the content section and text properties stay the same, but the layout of the page itself had to be adapted, which could all be done using a few modifications in .css)
• All this did mean that the pages would get longer, so I had to add another row of menu items to the footer section of each page

I browsed the internet to see if I could find some examples of good websites using a centered design, but I did not find many that had the usability and simplicity that I liked in the original design. I did like the layout a lot of the new website of Orit Maftsir, created by the fabulous Sophie Armoza.

I asked Sophie and Orit if it would be okay to use some of the concepts she worked with (larger header design with name of the page integrated, separating lines for different sections.) The websites turned out to be quite different in atmosphere and general look in the end, but as I was so inspired by their work I added both Orit and Sophie to the website credits on my contact page.

Using a more centered design meant I had to adapt the .css file parameters and instead of using one background image I would need a background color and a header image for each page.

Creating the header images asked for some creative 'cutting and pasting', as I wanted it to match the new website background but also contain the picture, logo, motto, and the menu items on a bar matching the colors.

To do this I combined all the original images, added a background color gradient layer that was close to the background color I wanted to use for the rest of the page, added the name of the menu item and smushed the items together a bit so they would fit a more narrow selection, like so:

As you can maybe see I also added a layer of 'sparkle' to the bottom part of the header image, using a 'star' brush :) Now all I had to do was decide on the exact width of the header, create a selection of that width and then copy/paste that selection to a new image (using menu 'copy merged', creating this:

The same procedure was used for all other background pictures. All I had to do starting from the first header image was replace the picture, adapt the color of the menu bar and logo/text and add the name of the menu item in the header.

The Shop page header had to be a little bit wider:

To make the background not too 'flat' I opted for a background image for the page instead of a plain color, a general sandy 'pattern', and repeat it to make it fill whichever screen is used to view the page. This image is set in the .css file section 'body':

body {
   
background: url(images/background/image.jpg) repeat top left;

font: 7pt/14pt calibri;
color: #663300;
background-color: #ffffff;
   
text-align:center;
margin:0px;
padding:0px;
   
}

Result:


Next I needed a way to make the text more readable in the pages, without making the text area look too 'white'. After some searching on the web I discovered a way to do this by creating a 'semi transparent' .png image as the background for the text area.

In the .css file it looks like this:

#Container2
{

width:740px;
margin: 0px auto;
padding:0px;
text-align:left;
background: url(images/background/opaque.png) repeat top center;

}

Result:



















And finally I needed to add the header image to the center section of the page:


#Container
{

width:740px;
margin: 0px auto;
margin-top:10px;
padding:0px;
text-align:left;

background: url(images/background/header_schedule.jpg) no-repeat top center;

}

 Result (with website content and social media icons already added)

The social media icons were easy to find, a simple search yielded many free and cheap downloadable icon images. Making the icons, menu items and main header clickable asked for some trickery though, for which I found some great online tips here. After that I created a favicon using part of the logo, added titles, content and images to the pages and that was that.


For the online shop I used 'Prestashop', a freeware solution that you can adapt (with lots of cursing ;) to your own website template and needs. It took me a while (including reading french forums) but am happy and proud of the result:

Whoop whoop :)

So, voilá, that's it, the making of www.khalida.biz :) Hope you found these articles helpful, would love to hear your own 'making of' stories as well so feel free to comment here or add links to your own blog!

xx Khalida