Website Development

Developing my Website.
Designing my Website.

After making my wire frames I was able to digitally mock up what my website is wanting to look like, I am glad that I did my wire frames, as when I started doing my wireframes I thought that they wouldn't be very useful, or not worth the time in making them.

This is what I could get from the wire frames for my home page. I can have my four main pages on the homepage as simple illustrations in each of the four boxes, have my nav bar across the top.

Sticking to the web safe colours is something that is really hard to do because there is only a limited amount of colours you can use. Using the illustration I created for the stamps to print the content, I am trying to create boxes that symbolise the season it is representing.

Designing the homepage is the most important as it sets the mood and tone for the rest of the pages. I am limited to web safe colours, which means that I have to experiment with the colours to see what looks best together.

I looked at something more illustrative and narrative for my illustration on my home page, something that may interact more with the audience. My nav bar on here is 100px in height, similar to my logo, but I think that this looks too thick and bulky, I think that it would look better thinner, maybe 50px in height. My website is targeted at women, therefore I think that the pink nav bar would be more fitting than the blue, also I think the pink compliments the grey logo more than the blue.

I haven't taken any photos of my work yet, so I am just showing what would go where for now, and then I am going to add the images and descriptions later when I have got my head around how the coding works.

Coding My Website.

Creating the nav bar and getting it in the right place was the hardest thing I had to do on my website, it is something I just couldn't get my head around.

Creating the nav bar and buttons took the longest time, although when I got the hang of it it got easier. Once I had the nav bar on my home page done, I transferred all the information and coding onto the other pages so that they could all have the basic nav bar.

Changing the background colours for each of the pages meant that having an opacity on the nav bar doesn't look as good when it is used on a different coloured background like blue or green, as it changes the colour, so I will have to change the opacity to 100%, even though that will make the pink brighter. But if it doesn't look right brighter I can always change it. As well as turning the pink a slightly different colour, it meant that the type on the nav bar wasn't white like I wanted it to be.

Homepage

Christmas Page

Birthday Page

Valentines Day Page

DIY Page

These are all the pages after they have been selected by the homepage, they all have a different coloured background, the colour used reflects the page itself. On the page the audience is on, the rollover button stays rolled over, this is so that the audience can see which page they are on. The reason why I have changed the background colour for each page initially is so that I can tell the pages apart when I move from one to the other, although I have found like I like them being these colours, I think that they work really well together, and I am going to keep them like this.

Preparing for Crit.

When designing my website, I wasn't sure which homepage I should use, which reflected my message the best, and stood out the most. I decided to take this question to the cit so that my peers could suggest what would work best.

Design Boards for Crit.

The third design board is use to ask a question, which do you think would work best as my homepage for my website, which would be most appropriate for my target audience? After my crit I decided that option two would work best for my website, this is the feedback I received, I also received feedback suggesting I should have more information on the homepage so that the audience knows why they are on my website.

Coding my Homepage.

When coding the boxes on the bottom of the home page, I created individual boxes for each of them, I did this because I found it easier than any other way I could think of. In my CSS I made each of the boxes, and placed them where I wanted them to be, I put them all in as 'position:fixed;' this is because my home page doesn't scroll or anything so it didn't really matter what position I put them as to me. I then added them into the HTML as divs and added an image in that div, then made it a link to which ever page I wanted to to link to.

Coding My Other Pages.

I started to code this by first making a contents box in my CSS, this is so that it places all of the information I wanted inside this box rather than the container. I then put my bottom nav bar in, this is used for the audience, if they want to skip straight to something.

I made the space I was creating a different coloured background to anything else, this is so that I can see it on the page, and so that I know where everything is being placed. I created individual boxes for all of my products and information about the products to go in, I also put a background colour on these, as it makes things easier, and I can just remove them when I'm done.

I created illustrator files for web, so that if I placed and image and text about the image up I would know where it would go, and I can see how it is working. Then when I have photographed all of the content for my website, I can then replace the images and text later.

I did the same thing for the other two boxes, created them in my CSS, putting in instructions of where I want it to go, then applying it in my HTML, and placing the images on them. This worked really well and was quite a simple process.

I then decided that I would repeat this information onto all the rest of the pages, including the Do It Yourself page, as that also follows the same layout as the others, bt there is just less information on there. I also found that I didn't need the bottom nav bar on this page, as there is not a lot that the audience will skip to on this.

I though I could keep the bar there, but just add some text onto it to explain a little bit about the page, and what you can do on this page.

Creating the next boxes underneath proved to be a lot more difficult as I could always get the left box in the right place, but the middle box took about two weeks to finally get in the right place, this is something that took a long time and was a process that was drawn out and made me frustrated. Although once I had the box in the right place the rest of them went in okay too.

I decided that as an example I would just show three of each of the products do that I have enough on there to show what the website would look like, but not too much that I'm just putting things on for the sake of it.

I also found that my page didn't automatically start scrolling when I tried to put something on that was larger than my page, therefore I had to put an 'overflow:scroll;' into the CSS of my coding, this is so that I can see all of my content, and have a scroll bar to do it.

After getting all the boxes in place and creating my scroll bar, I was able to easily replace the basic image template I used for the actual image I wanted on my website, I also created the text and made that link to the nest page on the site, and did a template of what that would look like. I did this for all of the products on my website, linked them all to this page, this is just so that I could show an example of where it would go next.

Final Website.

These are all the homepage of my website, showing what happens when you hover over the links in the nav bar. They are all roll over buttons in the nav bar, each of them rollover to be their own icon, for example the Birthday is a present. When you click on the images or the type it will take you straight to the page you want to, and the roll over button stays on the icon on the right page, for example when you are on the Christmas page, the word Christmas will be replaced with a snowflake.

Website Scrolling Down.

I am really happy with my website, it is something that took a long time to code and get a grip of. I designed my website so that it would be easy to code, if I were to do it again I would have designed my website a little bit differently, I would have tried to produce more of my own greetings card designs, rather than just printing lots of the same kind of thing, just to show what would go on the website. I would also have tried to produce more pages if I had more time, for example the basket page, or log in page.