Testing the website was easy I would just save the website as an index.html and then drag it into chrome to see if the links worked. At the start the links would transfer me to my old website because I forgot to change the url location in the code on the navigation bar part.
Overall I am happy with the basic website I have managed to create because I don't think I am that good at coding. I like the way that the links work and also how when I click the Contact me on the link it will send me down the page to show the users my email. I also like the basic blue background colour because it is not too light or bright.
The thing that is bad about my website is that I resized my images in the code and not photoshop. This is bad because the website takes ages to load the images. They are also saved as png files and not jpegs. I also think that the lack of text in the website is bad.
Too improve it I think a lightbox attatached to the images on the portfolio would work well because it would be easier for the users to access this.
I think the code layout works well and is not complicated so if blind users want to know what is on the website the computer can read it out to them in a way that they will understand.
I tried using some tutorials of how to code from the internet for example the lightbox and when I tried doing it it wouldn't work so it was not to successful.
Thursday, 28 June 2012
Coding the website
Coding the website
After realising the it was difficult to make the website I wanted I decided to load up the "my first website" code and change that to suit my purposes. The first thing that I changed was the titles, paragraphs and links to the pages so it would work on the internet. I made the first page very basic with just information about me and what course I was doing.
A problem I had with the main page is that I wanted one of the links in the nav bar named "Contact Me" to take me down the page to the contact me section but this didn't work. This is bad because the user might not know where this section is being on the nav bar. If I had more time to work out the code I would make this work. A screenshot of my first page can be seen below.
The next thing I did was edit my portfolio page. I did this by adding png images to the page. I wanted to use a lightbox 2 jave script code and have thumbnails so when the user clicks a thumbnail it will enlarge to its default size and then the images can be scrolled through. This code was too hard to do even when using an online tutorial page. A screenshot of my portfolio page can be seen below to show what it looks like.
After realising the it was difficult to make the website I wanted I decided to load up the "my first website" code and change that to suit my purposes. The first thing that I changed was the titles, paragraphs and links to the pages so it would work on the internet. I made the first page very basic with just information about me and what course I was doing.
A problem I had with the main page is that I wanted one of the links in the nav bar named "Contact Me" to take me down the page to the contact me section but this didn't work. This is bad because the user might not know where this section is being on the nav bar. If I had more time to work out the code I would make this work. A screenshot of my first page can be seen below.
The next thing I did was edit my portfolio page. I did this by adding png images to the page. I wanted to use a lightbox 2 jave script code and have thumbnails so when the user clicks a thumbnail it will enlarge to its default size and then the images can be scrolled through. This code was too hard to do even when using an online tutorial page. A screenshot of my portfolio page can be seen below to show what it looks like.
Friday, 22 June 2012
Slicing my design.
The first thing I did before starting the coding my website was slice parts of my design.
The parts of my design that I cut was the images because they would be put into my code as JPEG and then I would use them as links to other pages if I can. I will attempt to make 3 of the images I have cut into inline block so then it would be like the design I did make.
The 3 of the images can be seen below to show what images I sliced and to also show where abouts they will go on my website.
The first thing I did before starting the coding my website was slice parts of my design.
The parts of my design that I cut was the images because they would be put into my code as JPEG and then I would use them as links to other pages if I can. I will attempt to make 3 of the images I have cut into inline block so then it would be like the design I did make.
The 3 of the images can be seen below to show what images I sliced and to also show where abouts they will go on my website.
Tuesday, 12 June 2012
Website Colour Designs
Website Colours
The colour schemes that I selected can be seen loaded onto my website designs below.
Out of these schemes I think the original one works the best but I also like the blue and the green design. I can easily change the style of my website when it has been coded in the CSS so this won't be a problem if I can't decide which colours I want.
The colour schemes that I selected can be seen loaded onto my website designs below.
Out of these schemes I think the original one works the best but I also like the blue and the green design. I can easily change the style of my website when it has been coded in the CSS so this won't be a problem if I can't decide which colours I want.
ColourSchemeDesigner.com
Colour Schemes
Here are some of the colour schemes that I choose that I think would look good on a modern professional website. I got these colour from colourschemedesigner.com because it tells the user what colours go well together and I can also choose the options to have contrasting colours.
The colour schemes that I think would work best can be seen below. I think the green and the blue schemes would work the best. I take the colour code from the image seen below and I can transfer the exact colour onto my design in photoshop.
Here are some of the colour schemes that I choose that I think would look good on a modern professional website. I got these colour from colourschemedesigner.com because it tells the user what colours go well together and I can also choose the options to have contrasting colours.
The colour schemes that I think would work best can be seen below. I think the green and the blue schemes would work the best. I take the colour code from the image seen below and I can transfer the exact colour onto my design in photoshop.
Website Design created on Adobe PhotoShop
Professional Website Design
Here is a basic design that I did based of some professional website design research that I did.
I think I could change the colours of this design to make it more attractive but at the moment I am happy with the way the website design layout is. It is simple to use and I think it could be simple to make in DreamWeaver or Notepad.
Here is a basic design that I did based of some professional website design research that I did.
I think I could change the colours of this design to make it more attractive but at the moment I am happy with the way the website design layout is. It is simple to use and I think it could be simple to make in DreamWeaver or Notepad.
Thursday, 10 May 2012
Navigation Flow Chart
Navigation Flow Chart
This is a simple flow chart made to show what links and other pages are going to be on my site and also what information are going to be on the other pages.
This is a simple flow chart made to show what links and other pages are going to be on my site and also what information are going to be on the other pages.
Example of a website design
Example of a web design made on Adobe Photoshop
Here is an example of website design that I created in web authoring.
The colour scheme was decided on a vote the class made.
The design of this website was based on the gamestation.co.uk layout because I think it look modern and it is a popular website.
If the website was made it would be used to sell people pictures with the copyright so they can re use the image for anything they want for example a card etc.
The design that I will make for my own personal statement should be to a good standard and it should be modern but I want it to use minimal colours to make it look fresh and not over the top.
Here is an example of website design that I created in web authoring.
The colour scheme was decided on a vote the class made.
The design of this website was based on the gamestation.co.uk layout because I think it look modern and it is a popular website.
If the website was made it would be used to sell people pictures with the copyright so they can re use the image for anything they want for example a card etc.
The design that I will make for my own personal statement should be to a good standard and it should be modern but I want it to use minimal colours to make it look fresh and not over the top.
Friday, 4 May 2012
Client Needs
What I want the website to look like?
I want the website to have a modern layour with minimal, light colours that contrast together.
An example of some contrasting colour schemes that would work well are orange, blue and brown and I also like the idea of using the colours black, white and grey.
The hyperlinks and buttons should be hand drawn. This means that all of the buttons will have the same font and style but they will be unique, created by myself or a designer to match with the rest of the website.
The main font on the website will probably be something like Arial because the font looks professional and it is also installed on all modern day computers.
Website Design Moodboards
Typography
I like these typography example because they flow and I want my website to flow and be modern and stylised. I also want the colours to contrast like the brown and orange is a good example on the first typography example.
Logos
The circular logos are popular so I would like to create some circular logo designs for my website. I think this would suit the site and it would look modern and it will also suit the style of the website I want to create.
Navigation Bars
I think a hand drawn navigation bar would suit the website. I would like the navigation bar to be vertical because it is unique and not many other websites do this. Some example of navigation bars that I will draw inspiration from can be seen below but I will change the design of them because they look boring.
Overall Style
I want the overall style to look modern, I will do this by making the site have light and minimal colours but I don't want it to look boring. Some examples of existing websites can be seen below to show the effect I want.
Pages for my Website.
Web Pages
- Home Page. The home page will include links to other pages. The layout of the home page will be welcoming to make users stay and to also visit the page weekly.
- CV. This will include information about me, course details, grades and previous work experience.
- Portfolio. This will be a collection of my work showing a variety of different skills for example modelling, concept art and annotations etc.
- Contact me. This section will contain ways to contact me for example possibly social networking sites and email adress etc.
Subscribe to:
Posts (Atom)