Design for Web / Website Development / After Crit

11 / 12 / 13

DESIGN FOR WEB / OUGD504
WEB DEVELOPMENT & CODING.
AFTER LAST CRIT.

I got a lot of good feedback for this page in particular in the last crit. However a piece of feedback that I did get suggested that I just adjust the home page as the digitally generated images did not go well with this more photographically reliable page.

Now that I see these pages together, I can't believe how I did not realise this before. i think i was so wrapped up with trying to understand and apply coding I wasn't paying enough attention to how the pages actually looked together.

Other suggestions I received were based on the logos I had created and how most recommended that I should stick to the more traditional style of logo. 

I had initially wanted a landing page that would just be adorned with a large logo and the instruction to enter the site, However somebody suggested that I should have this page but instead of a tool bar with icons, just have text indicating the page.

Before I started anymore coding, I reverted back to making a logo and concentrated on this for a while. I started from scratch with this.

 I really wanted to make a logo that was integral to the brand So I took what I had from the headings I had created for the different sections of my webpage, printed it out and started to sketch ideas until I had an idea in my head of what I was trying to achieve.

On the original logo, the little round images a representations of the awards they have one. i decided to use this concept, so I took 5 stars and applied them to the layout of my start up logo. I decided to use 5 instead of 7 because 2 of the awards were done back in the 18 hundreds.

 I added the text that was originally on the old logo 'ali muhiddin' as well as the date of establishment.

 I started making shapes that were inspired by patterns I had research previously. I then copy and pasted these shapes over and over again and adjusted them slightly to get a circular shape.

 I played with the different weights  of each line.

I added more decoration to the pattern.

I feel that i added to much by adding the second circular pattern. I rethink it just made the embellishment too big and it took away from the information and identity of the logo.

Im really happy with the out come I have achieved with logo. I am glad that I eventually let go of my original ideas to start from scratch.

Now i had my logo i could then get back to the coding of my webpage. I created a new index page so i could the begin from scratch.

I started to add in the navigation tools to access the other pages.
i decided to make the categories on the tool bar rollover images so they worked like the rollover effect i had used on my successful products page.

These are the images i created to use for the roll over images.

Im really happy with how this page has turned out, i feel like it is such an improvement on my initial die and choice and I really like how it resembles the landing page I really wanted yet it works as a homepage that has relevant use.

*  *  *  * 

Now I had a pattern that suites the ethos of my webpage, I decided i could use this for the background image and replace it with the one I had been using temporally.

I took the basis of the pattern I had created for the logo on the home page and played with its make up to create a background image. 

I applied the image the the background of my products page However, I had forgotten to check the size of my image so It did not lay on the page properly.

I also felt like the page needed some type explaining more about the products an the making of them, Otherwise i just feel as though the page is a little empty.

'The Haci Bekir company specialised in maintaining the originally delicious products invented by their founder Bekir Effendi back in 1777 when the Ottoman empire was still in rule.'

I added this little statement because I felt like I needed to bring the content into some kind of context which would relate it back the the brand itself. I think it is also important to mention and remind that the invention of the sweet that people around the world know and love is down to the founder of this very company.

*  *  *  * 

ABOUT PAGE

In my original plan for my about page, i would start with icons that represent the many awards this company had done. i had been thinking about digitalising these shapes, however, considering how it went last time i used digital illustration, i deemed it more suitable for me to use photographic images.

On the first and second page of the award selection are the gold medal so i started to adjust these images that i gathered from the original webpage.

ORIGINAL IMAGE FROM WEBPAGE

Like I did with the images used for the products page, iI used the photoshop software to get rid of the surrounding background to make the image transparent.

I then added type to indicate what this image is.

 To make this image into a rollover image I saved the first image with the simple notification on the level of the award and for the image that will appear once hovered over, I added the name of the com potion as well as the year in which the medal had been won.

I like the aesthetic this gives and i think that the embellishment i have used remain consistent with other pages but also add more of a royal achievement feel to the award presented.

I started to apply the same aesthetic to the other awards.

ORIGINAL IMAGE

ORIGINAL IMAGE

ORIGINAL IMAGE

ORIGINAL IMAGE 

I started to apply these images to my webpage.

I applied the images in different arrangement trying to see which combinations looked bast and that were best balanced across the page.

At the same time I was really struggling with how I could get the page to scroll how I wanted to. We had not been taught this with in sessions with Simon so I asked him while in collage one day. He recommended simply making the content box bigger that the size of the fixed page and this should cause the page to scroll in order to view the whole container.

I did try this however my about page continued to be suck on a single page.

I tried to enter in a large background image to see if this would make the page scroll so the whole image could be viewed but unfortunately this did not work either.

I looked online to see if there was any tutorials that would help me to over come this issue. 0n the lca group forum on facebook, I could see that many people were having the same problem and there were pieces of advice given, however everything i did just didn't seem to have an effect.

It took me the best part of a day to finally find a solution that worked for me. In the end i found a youtube tutorial which suggested that to make the page scroll, you had to create a new style to embed into the style sheet.

I used the 'layout objects' tool in the insert option which allowed me to insert a new rule that allowed me to insert the same measurement as the background image i wanted to apply.

It may have taken me a while but I was so happy when I had finally found a solution. It made me excited to carry on.

I started experimenting with the possibilities of my layout now I had the added navigation in the scroll bar. I created this background in photoshop.

 Even though i really like the background and how it works with the content of the page, i feel that having repetitive images of the award is a little tedious somehow. The page didn't appear a I thought it would have.

In stead of having loads of awards plastered through the pages i felt it might help braking up the pages more. i did this by adding an image I had gathered through previous research.

I played with adding more type to the background image as i like how it interacts with insert in the foreground.

I tried adding embellishments to this photographic image to try and help the flow of the visuals down the page. I wasn't too keen on how this look.

In some of my initial thumbnail sketches and ideas, i thought about the possibilities of having an image covered with text. i tried to visualise this digitally to see how it would look on the background of the webpage.

I added this statement to give the feel that the original passion and intuition is still a big part of the company today. the fact that the company is still run by the establishing family is also something that is integral to the runny and working of the company.

Im really pleased with how this looks, I know it isn't the initial plan I had for the page however i believe it word well and does its job in giving the audience information about the past success of the company as well as the future.

I hadn't finished the about page yet and i would like to add more to it, i felt that i had to move on to the history page just to get it going.

*  *  *  * 

HISTORY PAGE

Because the history page relies on the use of a scroll navigation also. i saved the about page under a new name so i could simply ajust the images and content to suit what i needed to portray the history yet preserving the layout and scroll tool.

 The history page relied a lot on body text as it told the story on the background of the company and how far it has come from when it was established in 1777.

I was finding it pretty difficult to enter the text manually. Every time adjusted something with int the content to insert a text box, it would knock off the scroll.

(here i entered the wrong background file but for now i wanted to concentrate on the content)

After awhile I managed to enter the text yet as well as have the scroll working.

I tried to add an image as well as text but I could not work out how to have these pieces of content sit how I wanted.

Every time i tried to adjust the text box and the inserted image, they just seems to move around the page which was really frustrating for me. i felt like I wasn't particularly getting anywhere and what annoyed me even more was the fact that i couldn't figure out what i was doing wrong.

For now i felt that the only way i could move forward is to make my content into images so then i could at least visualise better what i wanted to do which in turn, may make it easier for me to replace this with manual material.

I tried using different layouts to portray the information on the history of the business but i just was not happy with any of them.

I decided to take the aesthetic i had applied to the about page to the history page as I thought that this had worked well and that if i could make them similar in style this will help to keep that pages more consistant with each other.

 I really liked this image from the research and resources I had found previously an felt that this would be good material for the history section of the page.

 I played with the image to try and have it flow better as the page would scroll.

 I like this background image and I feel that the embellishments help it to fit with in the webpages original aesthetics.

When I inserted the new background image I felt that there would be a bigger impact if the image of the old shop was the first thing the viewer would see. I decided to swap the images on the background around to see how this would look.

In keeping the style I had used in the previous about page in placing text over the top of the image. I feel that this ads a modern edge on the vintage photo. I mocked this up on photoshop before hand to see how this would look.

I saved these to images individually so I could then make the into a rollover image.

I created the background image and inserted into the scrolling page.

 At first I had difficulty adding in this image because some they kept doubling up. Eventually i made sue that the code was set correctly.

 The rollover image works very well here and i am pleased with how it works.

 I added the heading for this section in the same style as the others as well as adding text that starts off the story of the company.

To carry on with the on and off image layout, I decided to choose this image, I love the very foreign ethos it gives off and I think because it does seem so odd to the Western world this image would work in a similar way to the one above it. The photos are also the same colour which will help the pages remain consistent.

I added the image into the background image file.

I adjusted the length of the scroll tag to allow more scrolling pages to be viewed in the window.

 Because this image takes up the whole page, i added in a little arrow like the one at the top of the page to indicate that the page carries on scrolling.

I added another section of information that followed on from the paragraph at the top.

I am very happy with the way in which this page has turned out. I really want to learn how to enter the text correctly with in a layout I am happy to present.

*  *  *  * 

ABOUT CONTINUED.

The next aspect of the about page i really wanted to have was a map of the city of Istanbul showing were the shops are located. This is a feature that many webpages have today an i feel that this, along with contact detail is quite significant when supplying a business with a website.

I looked for maps i could adapt for this purpose.

I decided to use this image to base my map on because it is photographic which goes with the rest of the images present with in the page of may existing web. This map is also clear and covers the areas that the shops are situated in.

 I added indicators on the map showing what the map is of.

 Using the illustrator software, I created pouter markers that resemble those usually seen on online mapping systems. i created this in the colours of the company to show that this is the companies own imagery and work.

 I named each of the pointers with the main identification of the stores: The original store / Kadikoy / Hamidiye.

With help form google maps, I placed the pointers on the map were the stores are known to be situated.

To make the map seem more attractive an interactive, i decided to make the information into a rollover image. This way the map will look bare until you hover over it ant the indicators appear.

To introduce the map, i decided to add a little introduction that offers more information on the exports of the company and how the products are distributed.

As well as the information I also added i larger version of the pointer stating 'find us'. This visually communicates that the arrows that look like this are there to tell you were the shops are located. it also serves a second purpose in pinging in the direction of the map below.

On the last page i really tried hard to enter the text manually because i understand that i have not been able to do this properly through out.

As well as the pointers with the names of the sore on, I also added links and addresses below for each of the shops.

I was able to insert the type directly into the software as well as adding in hyperlinks. i still wasn't able to make a text box but because of the type of information it was I don't think it was entirely necessary.

The links direct to google maps which supply the audience with directions to each store as well as reviews for people that h ave already visited.

*  *  *  * 

( For the last bits of work, I had not taken as many screen shots of the code as i should have because I was too wrapped up in what i was doing, then my Dreamwever trial ended shortly after so I apologise for not having this on my blog as much as I know it should.)


I feel that i really did struggle through out the coding process of my webpage and even though i am happy with the aesthetics and navigation I have achieved, it really bothers me that i was not able to excite it in the appropriate way through the correct coding techniques.

At times i became extremely impatient and frustrated with the dreamweaver software and that just encouraged me to go off and do some print work instead because that way I felt as though I was moving forward, rather than sitting on a computer for hours on end not really getting that far.
 I know this probably wasn't the best way to go around things and this is something I want to look at in the future. I also need to not be afraid to ask for help when I need it.

If I get time moving on from this module I really want to make this webpage up in the proper fashion and try again to learn and understand the tools and ways of working with this software because i know it will be beneficial to me in the future.

*  *  *  *