Monday, 16 May 2011
Update
I have now compleated my website, i have uploaded all of my website onto dreamweaver. I am confident that my website will work well as i have ran tests and alpha, beta tested it. I am sure my feedback will be possative as I feel I have created a website to the best of my ability. I am pleased with the final result and i am sure i have gained new skills that will be sure to help me in future projects. The next steps I will take with my website are to validate it with the W3C and to write a reflective report on my journey of creating this website and completing this unit. Deadline for the unit- 16.05.11
Wednesday, 4 May 2011
Production Diary -FOUR-
I have recently been learning to upload all of my Photoshop contents onto Dreamweaver & how to adjust the layout. Firstly it is important to create a site map, this is where all the content will be stored. Note; it is important to make sure all the images you want to upload from Photoshop are saved as; 'save for web & devices' format, using web colours only.
Production Diary -THREE-
Recently I have been using Adobe Photoshop CS5 to create the main components for my web page like the header, footer, contents and navigation. I have created the whole site layout to fit 960 pixels, I have done this because this is the width used for most or all online websites, if my website was any wider than this i would have to use a side scroll bar along the bottom, this would make my side harder to read and much less organised. Over review week I have been concentration my focus on getting my content nailed & organised ready for uploading onto Dreamweaver.
Production Diary -TWO-
Over the past week & half I have learnt what HTML, XHTML and CSS all are & how they play a vital role in web authoring. I have written a detailed report about each one for future reference.I have also learned about web 2.0 and the W3C and their roles in the World Wide Web today.Finally i have learned how to use the programme; Adobe Dreamweaver CS5, and how to create a professional web page & the key features I will need to do so. Within Dreamweaver their is two ways to create a site, the design view, or HTML (coding) view. After seeing and understanding how they both work, I have decided to use the design view to create my website as I feel I am stronger at seeing and creating the page in this format.
Tuesday, 26 April 2011
Production Diary -ONE-
Over the past few weeks I have learnt a lot from pre-planning for my website. I have gained new skills from reviewing and analyzing various popular sites. I now feel confident that I can design and create a successful website. Firstly I have decided upon 5 areas of interest that I feel will make a good website & produced a detailed story board. From these five I have chosen one subject, I feel that creating an online portfolio is a good idea as I can easily access recourses and information. The website will be an online portfolio format to showcase my recent graphic designs and media products. I have made detailed plans of the construction process to my site. I have done relevant SWOT analysis I also received good, positive feedback and some useful ideas that I can expand on.
Monday, 28 February 2011
Website analysis
For my site analysis I have chose to analyse www.topshop.com. I feel this site is a good base for my report as it has several ways to take you to your page, also it its design is simple yet well presented.
When you enter the website it takes you directly to the home page. Its layout is bright and simple; it uses a starch white background to contrast the vivid colours of the text and images.
This is the first obvious way of navigation you see. It is the websites main navigation bar.
The navigation bar as a whole is well designed, they have used a simple, easy to read font. This is ideal as it needs to be simple and minimal, the public use Topshop website to buy clothes. They have used basic black and white for the text. They have gone for a minimalistic monochromatic theme. Also they have used a white background as Topshop display many coloured items so if they had brightly coloured background it may affect on how the products are displayed.
The websites navigation bar also uses rollover actions. The text changes colour to help you see which text has a drop down menu. This action is an active link, as it is link to another relevant page. Also the drop down menu uses the same method.
Also there is an alternate way to navigate. This is to narrow down your clicking. And also give you choice.
By clicking on the actual main text of a drop down menu it will take you to a link.
By clicking the (Clothing) active link text it has taken me directly to the clothing page. This method of navigation is more time consuming then using the drop down menu.
By selecting one of the categories on the drop down menu it will take you to the relevant page straight away.
For example I selected the designer link and it took me directly to the designer clothes page.
For this example I clicked the dresses option on the drop down menu, and it took me directly to the dresses page.
There is also a search bar in the top right of the screen. This helps you go directly to the product or the page you’re looking for, saving you time.
I quick searched bag in the search bar, and it took me directly to the bags page
.
If I then wanted a specific kind of bag I could elaborate my description to save time and narrow down the search.
For example I searched ‘Leather Bag’.
This is my results page for ‘leather Bag’
If you know exactly what you’re looking for or if you have a specific coloured item you want, you’re better off using the search bar, as it is the quickest method of navigation.
Looking back at the topshop homepage it is clear that their main offers are well advertised, for example down the right hand side of the screen there is offers like new trends, sales, hot items and also new updates. By doing this topshop have made it easier to view sales or new items as it is one of the first things you see when you open up the homepage.
Each of the separate adverts has an active link and will take you straight to the relevant page.
As it is mainly women use Topshop.com the colour scheme tends to follow trends as well as also using feminine colours for example the homepage has pinks and oranges that contrast against the backgrounds, making them eye catching. Also the vibrant pinks fit in with the new season coming into stores (summer). If you look down the right side again you can see that pink is used to make the word ‘sale’ stand out, this again is an effective way to attract visitors because stereotypically pink is related to being feminine and giving off a warm vibe. Most of the colour within the website is neutral and warm.
The interactivity within the site is professional, for example some of the pages have rollover effects where the unselected items fade out.
I think this is effective as it helps you see what you are selecting whilst enabling the site to use a crowded page with the links applied.
The website has no sound effects or music. I think that this helps to bring a professional standard to the site, because sometimes when you visit some sites the music can be very distracting. Also is music relevant? Topshop.com is clothing company, so is it completely necessary.
The animations throughout the website are minimal and are used only when needed, again helping to create a professional and simple design scheme.
There is not many semiotics within the website, on the homepage theirs one semiotic. In the top right of the screen where it says ‘MY BAG’ there is a semiotic of a shopping bag.
This shopping bag symbolises your purchases, for example when shopping you have your purchased items in a bag, so if you was Internet shopping it is easy to see what you’re purchasing. This semiotic works well as it clearly stands out & is easy to find.
The website is well set out and throughout the site consistently portrays a simple, professional look, the colours are kept simple and they aren’t offensive on the eye. The information on the site is minimal but sufficient, but it’s a clothing retailer, so no information is really needed.
To be a successful site it is ideal to reach your destination within 3 clicks, this is because no one wants to waste time searching through pages when they could find it straight away on an alternate site. For example I will perform a search for blue tops;
Step 1: www.topshop.com
Step 2: Clothing drop down menu - Tops page.
Step 3: Refine bar – colour – blue.
The websites usability is easy, if I had little experience with the Internet I feel that Topshop.com offer a sufficient way to navigate and use no matter your experience. The site is well set out and simple enough for anyone. Also with the usability the site meets the target audience expectations well, the site generally is used by teens and up. For example a 10 year old is unlikely to use it.
When you enter the website it takes you directly to the home page. Its layout is bright and simple; it uses a starch white background to contrast the vivid colours of the text and images.
This is the first obvious way of navigation you see. It is the websites main navigation bar.
The navigation bar as a whole is well designed, they have used a simple, easy to read font. This is ideal as it needs to be simple and minimal, the public use Topshop website to buy clothes. They have used basic black and white for the text. They have gone for a minimalistic monochromatic theme. Also they have used a white background as Topshop display many coloured items so if they had brightly coloured background it may affect on how the products are displayed.
The websites navigation bar also uses rollover actions. The text changes colour to help you see which text has a drop down menu. This action is an active link, as it is link to another relevant page. Also the drop down menu uses the same method.
Also there is an alternate way to navigate. This is to narrow down your clicking. And also give you choice.
By clicking on the actual main text of a drop down menu it will take you to a link.
By clicking the (Clothing) active link text it has taken me directly to the clothing page. This method of navigation is more time consuming then using the drop down menu.
By selecting one of the categories on the drop down menu it will take you to the relevant page straight away.
For example I selected the designer link and it took me directly to the designer clothes page.
For this example I clicked the dresses option on the drop down menu, and it took me directly to the dresses page.
There is also a search bar in the top right of the screen. This helps you go directly to the product or the page you’re looking for, saving you time.
I quick searched bag in the search bar, and it took me directly to the bags page
.
If I then wanted a specific kind of bag I could elaborate my description to save time and narrow down the search.
For example I searched ‘Leather Bag’.
This is my results page for ‘leather Bag’
If you know exactly what you’re looking for or if you have a specific coloured item you want, you’re better off using the search bar, as it is the quickest method of navigation.
Looking back at the topshop homepage it is clear that their main offers are well advertised, for example down the right hand side of the screen there is offers like new trends, sales, hot items and also new updates. By doing this topshop have made it easier to view sales or new items as it is one of the first things you see when you open up the homepage.
Each of the separate adverts has an active link and will take you straight to the relevant page.
As it is mainly women use Topshop.com the colour scheme tends to follow trends as well as also using feminine colours for example the homepage has pinks and oranges that contrast against the backgrounds, making them eye catching. Also the vibrant pinks fit in with the new season coming into stores (summer). If you look down the right side again you can see that pink is used to make the word ‘sale’ stand out, this again is an effective way to attract visitors because stereotypically pink is related to being feminine and giving off a warm vibe. Most of the colour within the website is neutral and warm.
The interactivity within the site is professional, for example some of the pages have rollover effects where the unselected items fade out.
I think this is effective as it helps you see what you are selecting whilst enabling the site to use a crowded page with the links applied.
The website has no sound effects or music. I think that this helps to bring a professional standard to the site, because sometimes when you visit some sites the music can be very distracting. Also is music relevant? Topshop.com is clothing company, so is it completely necessary.
The animations throughout the website are minimal and are used only when needed, again helping to create a professional and simple design scheme.
There is not many semiotics within the website, on the homepage theirs one semiotic. In the top right of the screen where it says ‘MY BAG’ there is a semiotic of a shopping bag.
This shopping bag symbolises your purchases, for example when shopping you have your purchased items in a bag, so if you was Internet shopping it is easy to see what you’re purchasing. This semiotic works well as it clearly stands out & is easy to find.
The website is well set out and throughout the site consistently portrays a simple, professional look, the colours are kept simple and they aren’t offensive on the eye. The information on the site is minimal but sufficient, but it’s a clothing retailer, so no information is really needed.
To be a successful site it is ideal to reach your destination within 3 clicks, this is because no one wants to waste time searching through pages when they could find it straight away on an alternate site. For example I will perform a search for blue tops;
Step 1: www.topshop.com
Step 2: Clothing drop down menu - Tops page.
Step 3: Refine bar – colour – blue.
The websites usability is easy, if I had little experience with the Internet I feel that Topshop.com offer a sufficient way to navigate and use no matter your experience. The site is well set out and simple enough for anyone. Also with the usability the site meets the target audience expectations well, the site generally is used by teens and up. For example a 10 year old is unlikely to use it.
Wednesday, 23 February 2011
Production Diary
My Production Diary
So far throughout units 59,60,61 i feel i have gained a new understanding for website production and planning. I feel i thoroughly understand what to research into to create a website, for example the type of graphics used; navigation buttons, banners & shortcuts. Their is a lot to consider when creating a website. Is the content suitable,
So far throughout units 59,60,61 i feel i have gained a new understanding for website production and planning. I feel i thoroughly understand what to research into to create a website, for example the type of graphics used; navigation buttons, banners & shortcuts. Their is a lot to consider when creating a website. Is the content suitable,
Subscribe to:
Posts (Atom)