Research
Corporate site : https://www.urbanoutfitters.com
The purpose of this site is for customers browse and purchase for clothes, accessories, shoes etc.
eCommerce : https://www.amazon.co.uk
Just like with the corporate site, customers can browse and purchase various items.
Educational : https://www.bbc.com/bitesize
Examples of websites
-
1. The Massage people London
Link - https://www.massagepeoplelondon.co.uk/treatments/
This massage website uses simple yet professional colours (light blue, black and white), the banner at the top is very eye catching to the audience as it a bold colour with a unique logo. Also, the interactive subtitles at the top change colour and underline when you hover your cursor over them to help it stand out and clear to the customer's eye, this is a technique I will likely use in my own website. In addition to this, on the home page of this website they have an interactive slideshow of moving images (of patients receiving a massage).
Educational : https://www.bbc.com/bitesize
This website is to provide students with their school/college work giving them information, tests and videos on various topics across all subjects.
The purpose of this site is to provide people with news.
Using photoshop
-
Selecting an image by using the magic wand tool and deselect by using cmd+d.
Change the colour of a layer by going to 'image' then 'adjustments' then 'hue/saturation' and finally turn the saturation all the way down.
To add a gradient rectangle select a rectangle at the top of the page and then choose two different colour and while the rectangle is still selected use the gradient tool and drag the line across. Then add a text layer and add a drop shadow by double clicking on that layer.
To make a logo link, open adobe muse then double click 'A-master' then go file, and then place photoshop buttons and import the Facebook logo that was previous saved as a photoshop file. Then put the normal state as FB Blue and the rollover state as FB Grey, then copy the Facebook hyperlink and paste it into the hyperlink tab at the top of the page.
Examples of websites
-
1. The Massage people London
Link - https://www.massagepeoplelondon.co.uk/treatments/
This massage website uses simple yet professional colours (light blue, black and white), the banner at the top is very eye catching to the audience as it a bold colour with a unique logo. Also, the interactive subtitles at the top change colour and underline when you hover your cursor over them to help it stand out and clear to the customer's eye, this is a technique I will likely use in my own website. In addition to this, on the home page of this website they have an interactive slideshow of moving images (of patients receiving a massage).
-
2. Mobile Wellness
This website allows customers to see different types of massages they offer, where to find them, how much it costs, and their contact information. This website's colour theme differs from the first one as they use more vibrant colours, therefore making the site look less professional but does however make it stand out. Furthermore, the website incorporates lots of still, non interactive, images of massage therapists to promote the business further, this is something I'd like to include in my own website. The part of this website that you can interact with is the subtitles at the top, the cursor changes from the default cursor to the hand to indicate to the customer that they can click on it.
-
3. Massage Moose
This final website is somewhat like the second one as it also has a still image on the home page; the image isn't interactive. Unlike either of the websites above this one, when your hover you cursor over the subtitles they both, light up and have a drop down menu to give the audience more options to explore within that topic. The purpose of this website, like the others, is for customers to browse the types of massages that the company offers and look into pricing or contact information etc.
Sasha... well done thus far. You have analysed websites defining the requirements of this medium. You have a valid investigation of the client's requirements. You have recently detailed user flow and plans for each page of your site... where are these documents and explanations? You are now applying and showing competency in skills and capturing this in screenshots in Ps and Muse. Write a 'how to' for each skill you develop e.g. Ps layering and application to the sithe that you are developing. Begin to evaluate each stage of your website development and show how your research is applied extensively to your client's new site. Show all of the pages of your site with user flow by Friday 1st march.
ReplyDelete