The next stage was to link everything and start creating the other pages.
News button working, really happy with the style
of the buttons and the size, they are still delicate but
the function too.
Contact button working.
Services button working, again it stands out
really well against the background and in contrast
to the other buttons.
Roll over button for the about page working,
clear contrast between other tabs.
Roll over button to home page working clearly,
really like the contrast against the background it
stands out clearly.
__________________________________________________________________________________
After I had created the boxes and changed the sizes of the buttons the next stage was to link them all to their appropriate pages using .dwt and linking to the individual .html pages.
All link buttons linked with their appropriate Html pages.
Linking the pages together by dragging the link across.
__________________________________________________________________________________
After creating the first button I realised that the home button was actually quite large, and looked a little out of place. It was taking up way too much room within the boxes. So i decided that I wanted to play around with the different sizes to see what was legible and readable but not ugly.
Here after working out each and every button to a different size, you can see that the News
button and contact button are about the right size, they are centered to the frame and
they are elegant. I want it to have a clinical edge to it.
Proportionally the Home button looks huge on the page,
it makes it look a little bulky whereas I am trying to create a more
sophisticated website. So i changed the size of the font.
_________________________________________________________________________________
After creating the splits for the buttons the next stage was to create the separate buttons to go in-between. I chose to use AVANT GARDE, to create my buttons. I really love the crisp lines that the light weight it has against the background. Its a very delicate font, I like how it has a larger x-height so it takes up more space, spreading wider.
I decided that with my roll over buttons when you saw them normally they would be
White. But as soon as you rolled over them they would turn black so you could see the contrast.
__________________________________________________________________________________
Then using the skills we had learnt i split the screen and created the table to the left which would hold my buttons to navigate the website. I like them being down the left, its much easier to navigate when you follow the left hand side.
I then added the splits inbetween to define the sections to
where the buttons would go.
Checking the code to split the screen in an equal way.
Broken down table, narrowing the left side to create the main frame
for the buttons.
________________________________________________________________________________
Using the workshop tools we learn't I created my home page from scratch. I decided to use the darker colours for the background so that images and text would really show up against the background.
The main look of my website on screen, I really like how it
stands out against the dark background. Maybe it could do with a
little bit darker. But im going to put the main website together before
tweaking it.
I decided to change the main background colour to a very dark
grey so that the main page would be highlighted by it, this way it would
stand out clearly.
Then edited the bg colour using the coding, I used the same grey
that I had already outlined in the swatches I had created. I quite like the
white wrapped around it, but im thinking of using white text so it may
appear too white.
Started out by creating the main page, 600px x 800px.
______________________________________________________________________________
I chose to use some dark colours to represent our company, I wanted it to be viewed in a sophisticated way so i wanted dark and simple colours that would work well against one another. I used the websafe colours to create this small swatch book.
_____________________________________________________________________
After my initial sketches I went onto illustrator to mark out the overall appearance of my website. I wanted to do this to help me workout the placement of my images and how to best structure the layout of the boxes. I did it to scale so that when it came to creating the boxes I would have a general overview of how to put them all together.
Here is the 5 pages laid out next to one another, just to see how
they would all fit, and see if the layout would work across them
all. I like the clean edges of it, its a very simple website but
functionality wise i think it can work.
This would be the news page, The box to the left with the main
information about the news in it and the box to the right highlighting
how people could follow us on twitter/fb etc.
This would be the contacts page. The smaller boxes to the left
would show the faces of the main people who would work there
followed by a little information. The larger box to the right would
have the map in it, as well as the address clearly labeled underneath.
This would be the services page, one large banner image
followed underneath by smaller banners that would highlight each
service. Here i would like to use sub-pages so that you
could navigate to the appropriate service you would want
which would then have info and images on it.
This page would be the about page. One large banner image,
hopefully using the lightbox2 to create a roll across set of
images. Below would be two boxes full of information about
the company.
The main home page, one large banner image followed
underneath by a small tag line about the company.
0 comments:
Post a Comment