Web Assignment

5/20/2013 Access To HE Computing | | Trafford College | Web Design Assignment |

Trafford College | Web Design Assignment |

In order for my website to be somewhat successful it’s a positive practice to do a lot of research into numerous current different designs of websites and their distinctive layouts. There are several different ways in which the artists have displayed their work and creations over various websites and galleries. There are many hundreds of different artist’s websites available online, I have for the purposes of this design chosen a select few that I have taken an interest in and have gone into great detail regarding both the design and layouts of each individual site.
The first website I’ll be looking at is a website of the photographer Faye Sampson.
Faye Sampson (http://www.fayesampson.com/)
Home Page/Title Screen:

The homepage of this site is very simple and artistic, giving a very clear reflection of the style of photography that the artist creates, very fashion orientated. One of the negative features of this website however was that the front page and subsequent pages were all overloaded with images. By this I mean that it seems like perhaps the site had in mind the idea to have a scrolling image board, however in a somewhat “rush” to get the page released, it seems the decision was backed down upon. I also unfortunately on this website cannot evaluate any menu pages, as the site was designed in such a way that the homepage serves as both a welcome page, as well as they key to navigating the entire site. This was one of the more prominent reasons why I chose to analyse this website, due to this being quite unique, with other sites having numerous different pages to navigate to get to where you want to go.

Video Page:
Above is the video portion of the website, showing the videos in which the photographer herself has created. It has the same design as the home page, again with easy access to other parts of the website using the navigation tool on the left hand side. As I stated previously, it shows the scrolling aspect of the page, however clearer on this image I believe. I’m not sure whether this was intentional, so I won’t make either negative or positive comments regarding this – however I will state this would be something I would try to avoid doing on my own webpage.

Bio Page
Above is the bio page of the website, detailing information about the artist, detailing her current work, her work commitments, awards that she has won, and newspapers and galleries where her work is currently shown/held. The design follows the layout of the other pages which makes it very easy to navigate. The image used is very clear, and again – holds the same design principle as the rest of the site. Most of the information on this page would be only for the people actually offering her work. This will be worth taking into account when designing my page.

Contact Page
The contact page contains a form where the user can send a message to the photographer herself or one of the photography team that she works with. It features a somewhat typical email layout. The navigation bar stays at the left hand side of the page. Again, like with all the other pages on the site, she has kept to the theme and kept it very minimal, but looks artistic and maintains the ease of use.
In summary of this particular page, I like the simplistic design of the website. It has a minimalist feel, which is in perfect parallel with the style of the photographer herself. The website was very much created with her artistic flair and design in mind. Some criticisms however were on the pages showing her artwork, it seemed as though the pictures were on an infinite loop, I felt that this could have been changed with perhaps an overlay changing the pictures every few seconds, which would have removed the scrolling at the bottom of the page, making the page more minimalistic in its view, and adding to the overall look of the page. I will say that I liked some of the aspects of the page, and will be incorporating these into my own page.
On the following page I will be looking and evaluating the website of the photographer Jason Bell.

Jason Bell Photography (http://www.jasonbellphoto.com/#/home/)
Home Page/ Title Page

This is the homepage for the website of the photographer Jason Bell. The page itself has no splash screens before-hand or any pop-ups regarding advertising. There is a navigation menu on the left hand side of the page with numerous different links below which show off his artwork. This is somewhat of a common design but this doesn’t take away from the page and is very effective. The majority of the page is taken up with an image. The page is extremely well presented with a nice colour scheme typical of this sort of page, whites with contrasting black text. What I’m noticing however though which sets apart this page from the one I looked at previously is a lack of links to Facebook/twitter pages, which gives me the impression this is a much more professional page, the artist working with perhaps celebrity clientele predominantly.

Bio
This page contains all the information about the photographer himself, very much like the page I looked at previously, the website all links as one page, with a navigation tool on the left hand side to get around the website. Information included includes, his past, where she is from, where he is located etc. The site is impeccably presented; it has a very expensive look and feel. Hhe has kept to the colour scheme of the site and the simple layout design but it does work well.

Portfolio
On Jason’s website many of the links on the navigation bar show his portfolio of work, in many different fields, these predominantly being advertising; however some of the other links include images of his work for big fashion magazines such as Vogue and Vanity Fair, and also include links to his work in theatre. The layout is incredibly designed, keeping that extravagant feeling, the pictures upon click
Lead onto a new image, as though one is reading from an image folder. At the bottom of the page with the navigation link is a button to enter full screen mode, showing clearer on a full screen the images on the page. The only negative aspect per se is the lack of a thumbnails option, however I feel this would somewhat cheapen the appeal of the page; however it is a consideration I will be taking upon my own page.
Contact Page
The contact page on this website unlike the others contains no web forms, again as I stated previously giving a more luxury/expensive feel to the page. It contains email addresses to Jason’s London and New York offices, as well as mailing addresses and telephone numbers. The page still keeps to the design of the overall website, with the navigation portion still on the left hand side of the page.
Overall I really like this webpage. It has a luxury class feel, certainly a website for a professional designer. I find that the colours are a little bland, however this seems to be somewhat a common theme in the photography field, however I feel that my own website itself will have a perhaps more colourful design. I liked the transitioning images also, and will look to incorporate this myself.
The last site I will be looking at is the website of the photographer Gemma Edwards.

Gemma Edwards Photography (http://www.gemmaedwardsphoto.com/index.html)
Home Page/Title Page

This is the homepage for the website of the photographer Gemma Edwards. Despite the look of the homepage, the homepage itself has no splash screens - just an image on a white background, as again like the previous websites, it seems to follow white background, black text theme. Unlike the other two pages however - Twitter Facebook & Tumblr links are included on the main page of the site. There is a navigation menu on the top of the page with links to numerous different parts of the site. This is somewhat of a common design but this doesn’t take away from the page and is very effective. The majority of the page is taken up with an image. It seems as though this site due to its imagery is designed towards a specific market, appealing to perhaps younger photographers and models, in the more alternative market.

Studio Portfolio
This part of the website is the studio portfolio. It keeps to the design ethos of the website, again adopting the white background, black text contrast – however as shown above, some of the images do have different colour backgrounds, which is a nice contrast to the plain white images predominantly used on photographer websites. In addition to this, the images are placed in a scrolling div, allowing the user ease of use to browse through the images, which seems to alleviate the issue seen on the first webpage I analysed.

Location Portfolio
This aspect of the site is the location portfolio. It’s a page showing the artist’s work on location, to give an example of potential shots to models. It basically has the exact same layout as the page I’ve analysed above, with only the photos being somewhat different, including the same scrolling div.

Contact Page

The contact page on the site includes a description of the photographer herself, listing her work done, information about herself, her job description and her previous work to attract new work from agencies. The page itself also includes a small image showing some of Gemma’s published work in some of the UKs most prominent glamour magazines. In terms of anything actually on the page I’d incorporate into my own, The only part I would perhaps consider is the actual image showing a small preview of the artists’ work, however I feel this may be slightly over the top, seeing as the website itself is supposed to showcase of the artists’ work, rather than bombard them with images on the contact page, I feel it somewhat lacks professionalism.
I overall like the design of this website. It’s a nice mix of the two websites I analysed previously, solving some of the issues found in the initial webpage, however not quite being as polished as the second webpage. I liked the use of the scrolling div, and this maybe something I incorporate into my own page.

Review:
After doing some individual research into many different sites and looking at the different types of sites in which are available, I have come to many different conclusions, and realised upon many issues that have to be taken into consideration when planning the design of my website.
My initial thought is the home page; this is the initial part of the site that that the user will see, so it will have to meet many of my own personal criteria. Some examples of what I need are for it to be eye catching, modern and simplistic in its use and operation. I have decided against using a splash screen as in the examples of pages I looked at previously, I felt that it was unnecessary and it didn’t overall add to a website in itself. I have decided though that animations and graphics are definitely a possibility
The site in its design needs to be not cramped and overpopulated with information, and especially the consideration of full of small text that possible users may not be able to read due to the size or possibly even the colour of the text. The colour scheme in its design will have to go with and in accordance with the images that will be used on the site, this is to make sure that the colours do not conflict and make images harder to see, an example of this would perhaps be a white theme and most of the images having a white background, it would make it difficult to see the images properly.
Navigation around the site is an extremely important factor to consider and needs to be easy so that the user has no trouble at all navigating the website and getting the information they need. Most sites will have a navigation menu that will stay on every page of the site, either on the left, right, top or bottom of the page, an idea of mine would include one at the top of the page, with perhaps a lamp effect indicating what’s hovered over.
Also a consideration has to be – that due to amount of smart-phones and tablets currently on the market, the site needs to be designed in such a way that the look and design of the site does not change and works fully on all smart-phones and tablets as well as laptops and desktops.. Also the issue of different web browsers will have to be taken into consideration. Images that will be used on the site will have to be small in size and not too large in terms of bandwidth, and also in the correct format, this will enable them to be loaded efficiently and work with all browsers.
Once I’ve looked over these issues and come up with possible designs, I can then begin to work on the website itself, and hopefully receive some positive feedback.

Process of building the website
There is a specific process of building a website or in particular my website. This is done in six phases, listed below as follows; * Learn: This part of the process is learning all the information required to build the website. This could be from learning any techniques which are required and without saying – the client’s needs and wants in terms of what will go into the building of the website itself. * Plan: this aspect of the design process is effectively the planning of the design of the website. This includes many factors, such as tools you’re going to use in the design, then creating different drafts of the website itself and gathering research information into different websites that are of the same genre/job category. * Design: This is the bread and butter of the whole process. This is where you design the website; design how it’s going to work and see which of the content you have is going to end up incorporated on the site. Using all the research which has been done previously, and gathering the information from the client, You start building the website on paper and gathering feedback from your client to make sure that the client is happy with the work that’s currently being done, and making sure you’ve hit any and all design goals. * Code: this part of the creation process is where we take all the current designs for the website and start actually building it. We have to make sure that the coding were doing both meets the W3C standards, and contains everything that the client has asked for. Once this is all done, we will then show the client to make sure they’re happy with the work that’s been done. * Launch: This is coming up to the final part of the process, where the site is uploaded to a server, then sent live. At this point the evaluation begins; we re-look over the site and evaluate any problems that have happened in the process of the sit going live. This is where the final meeting with the client will happen, ensuring they are happy with the final product. * Maintain: This is the final part of the process, and an on-going one. It involves making sure the site is updated.
Process in regards to myself * Learn: I believe I have roughly four to five days to gather up and research all information I need from both the client herself, and then to begin the design process. * Plan: I have around three days to create a few designs for the website itself, then to plan which tools I am going to use, and any effects I will be adding to the site. * Design Process: I have given myself around two days to do most of the designs for the site, then meet with the client to gather any further information I require about what they need, and incorporate any needs they have into my own designs. * Coding Process: At this point I believe I’m looking at around a week to create the site, this is including using tools. This also gives me time after creating the site to again meet with the client, and see how she feels about the design so far and content it. * Launch Process: At this point, hoping all is well I only need 24 hours to get the site finalized and uploaded to the server, and make any final adjustments which are required, this including finance for the hosting of the site itself. * Maintain: As this is an on-going process, a timeframe is somewhat difficult, however I have factored in around three to four weeks, however this may change depending on how the client feels, checking for any errors and making any amendments.
Interview with client (Stella Sampson)
I had a list of prepared questions for Stella prior to the meeting, to make sure I was fully prepared for what she was looking for, and could be direct regarding what I needed from her information wise. This was a real (non-simulated) interview done at the clients home.
Question 1: Hi Stella, thanks for meeting with me today. I was wondering if you could tell me what your aims/goals for this website are.

Reply: My intentions really are based solely around advertising and self-promotion. I’m aiming to use this website to widen my user-base across the globe, and hopefully get myself out there. I want to be able to share my photography with people and the goal would be potential employers around the globe rather than just England itself. Basically like an online portfolio, a little about me and my work online.
Question 2: In terms of the overall design of the website, in terms of any “flashy features” is there anything you’d be looking for incorporated at all?
Reply: Not so much flashy, more just available! It’d be great to have all of my photos etc. to be accessible, plus all of my achievements/ previous contract’s etc. It’d be fantastic if people could leave me messages or comments which I could then later on reply to and help me get some feedback on my work and help me improve myself. Facebook links would be fantastic, and also – the site being able to be viewed on a mobile phone tablet would be ideal.
Question 3: Are there any specifics on the overall look of the website, for instance, any themes or colour’s, styles or layouts that you would like to be incorporated into the website?
Reply: Colour isn’t an issue; I’d just like something that looks professional, with easy access to the different parts of the website in general.
Question 4: Do you have any photos or videos that are not suitable for any sensitive readers?
None of my images are like that, no.
Question 5: In terms of cost, all we’re looking at is the cost of monthly hosting and promoting, I’ve enclosed a list of prices for you, are those satisfactory?
Reply: They’re more than reasonable.
Question 6: Do you own all of the copyrights for all of your photos and videos?
Reply: All images that I’ve provided are my own intellectual property; they’ll be no copyright issues or anything like that with the hosting of the images.
Evaluation of how useful the web will be for the client
My client currently has numerous different portfolios, and has copies of all her albums on both disk, and saved in a digital format. None of the clients work is currently stored on different companies’ websites, this will be the first time her work will be available online. She does have both a Facebook and twitter account; some of her images are currently on these websites. She has a large friends group on Facebook, as well as an impressive follower count on twitter, benefits of this I see are a possible customer base of thousands, if not tens of thousands if marketed properly.
The client herself has just finished her last year of her master’s degree at Oxford University, so at this moment in time is focusing on getting herself up and running online, hoping to make a career out of her work. She’s currently travelling to and from London on a constant basis, trying to meet potential clients and or job offers. Given this fact, she has to attend many different social events to try and increase her networking possibilities. At the moment she’s reliant upon her business cards, but unfortunately with these only having basic information, and not a website – she’s somewhat limited in her professionalism in this regard.
Based on this information, and in terms of simple marketing – it seems that the internet and this website in particular will do nothing but great things for the client. It would mean for the client a more professional approach, and with that, hopefully a lot less travelling time, meaning she can advertise herself online, rather than having to do so in person. In terms of business, it will maximize her possible employers, and give her a more professional appearance.

JPEG, GIF, PNG and their appropriate uses
The three main types of image files used on the web are JPEG, GIF, and PNG. The difference between the three is the resulting image. Each one has its own uses, and has its own separate niche in regards to use on website.
GIF
Gif images are predominantly used for creating very low resolution images for a website. They support transparency, which is where you can place a gif over any colour background, even including photos – and this means you won’t see a border or background in the image. GIF’s are typical used for small logos, or icons or symbols. The use of GIFs for photos is not recommended practice; the reason for this being is that they are limited to 256 colours. In some cases, this is even less. However, the benefit of this being that the fewer colours are in an image, the smaller file size will be. This is fantastic in terms of loading images quickly. GIFs also support a feature known as interlacing, which is a function whereby a graphic is preloaded. The image starts out blurry; however it then becomes focused when it’s finished downloading. This makes image transitions easier, and the time waiting to see logos or icons on websites is significantly reduced. GIFs also support animation. This isn’t quite the level of animation found in say a flash file, however it does allow the user to add movements or transitions to a site, without a lot of programming or coding needed. GIFs are also compressed files, again – giving them a smaller file size.
JPEG
JPEG is an image compression format which is used to transfer colour photographs and images over the web. Along with GIF files, JPEGs are one of the most common ways photos are moved over the web. JPEGs are designed for compressing full-colour or grey-scale images of natural or real-world scenes. It works particularly well on photographs, nature artwork, and similar material. However, it doesn’t work fantastically on lettering, simple cartoons, or line drawings. JPEGs unlike GIF’s can only use still images. One of the main advantages of this file type is the ability to store full colour information. JPEGs can store 16 million colours, in contrast to 256 in a GIF file. JPEG compression can be controlled in many different photo editing software suites. The higher the compression, the smaller the file size, however as a double edged sword, this means the lower the quality.

PNG
PNG (Portable Network Graphics) is a file format for lossless, portable compressed images. It provides a patent-free replacement for GIF files, and replaces many common uses of TIFF files. PNG files were designed for use on the internet, supporting many different colour pallets, and transparency that is much superior to GIF options. Another use of PNG files are the greater compression rations that can be achieved, even in comparison to GIF PGN is a much superior choice, and also –I n terms of images with large amounts of text, PNG files become even superior to JPEG.
W3C Web Standards
Extensible hypertext mark-up language (XHTML) validators are software programs that check the validity of the code of web documents, which are often just known as "web pages." Code is only considered to be valid if it reaches to the standards of the World Wide Web Consortium (W3C), these are an organisational community that sets certain standards, and these are put into place to encourage continual growth and development of the Internet. These validators set out to check to see whether an XHTML document is written in valid code, however they also generate a report in which can be read by the people who use the software, so they can ascertain whether or not the document is valid. A document type definition (also known as a DTD) is a standard requirement as the first line of code in the file for a document to be validated. Most of these validators are able to locate documents to be validated by direct input, by a path to the page or the uniform resource locator (URL) of the page.
Despite the knowledge or experience that any web developer may have, at some point in the design process a few mistakes will always be made when coding web documents in a simple text editor. Simple human error. If those documents contain a significant amount of code, it can be difficult and time consuming to manually review for errors. The reports that XHTML validators generate after checking validity of code provide very valuable information to end-users. The time it saves alone can equate to numerous man hours, and these reports are generated almost instantly. Reports generally reveal not only errors; they also provide warnings and give hints for how to correct mistakes. Web designers and developers will know the exact line of code on which the warning or error was found because the line number of the invalid code is reported.
There are times however though when the line number of invalid code gives the developer only a good idea of where the problem is. This is usually an occurrence when the validators are given the URL of the document they are to check. If the document has been a template into a header, body and footer, line numbers indicating the location of errors will be based on the document as a whole, composed of all three parts. XHTML validators are widely used because of the need for web developers to produce standards-compliant XHTML documents. Mobile phones and tablets figure among the media devices capable of displaying web pages, but they cannot always correctly display pages that are not written in valid XHTML code.
A variety of XHTML validators are available free of charge, but some require a fee. They all offer the basic functionality of verifying the validity of an XHTML document and reporting results to end-users, but some offer additional features that might prove helpful to some web developers, such as checking for broken hypertext links. It is important to keep in mind that XHTML validators should not be confused with software that handles the conversion of a hypertext mark-up language (HTML) document to XHTML.
Design Stage of Website
First Drafts
I’ve gathered all my information at this stage, and have drawn up a few brief sketches of each page of the site.

This is the home page of the website, with my initial design of the lamps showing which page the user is currently on.

This is the gallery part of the website; this will be where the artist’s images will be, with links to different parts of the page clickable on the right hand side, with links to blogs and such.
This part of the page is about the company. It has a web form that links to the clients email address, so that she can reply to messages, and also include links to her personal twitter and Facebook pages.
Finally this is the about me part of the website, with detailed information about the client, including her previous work, what the companies goals are and such. Along the top of the page is another image overlay that is seen on the initial page.

Final Design
I have now designed the layout of the website, and started to create links and use different tools, my next step after this process will be to get the client to look at the site, and use the validation tools available to me to make sure it meets up to the standards set.
Home Page

About Our Company

Gallery

Contact

Website Launched in a web browser.

Here’s the website being w3c Validated.

Personal Evaluation of Website. I’ve poured many several hours into the developing the site and designing it, I have theorized a few ideas that in hindsight l would have liked to have incorporated into my site, however due to many different factors I was unfortunately able to, some of these reasons being my own personal lack of skills or an unfortunate lack of time due to constricting deadlines and the sheer amount of time dedicated for design. A prime example of this includes not leaving me enough time in my Design to view the site so that it adjusted itself for phones and tablets however, on looking at the site on a tablet device, it still worked okay, and it just wasn’t catered to that type of device unfortunately. On reflection also, if I had more time I would perhaps have spent a bit more time re-developing the contact page and made it a bit nicer looking. Overall I would say that the site turned out well and looks quite professional. I’m happy with the turnout considering all factors. I looked for some personal feedback from family and friends, and all the comments I received back were positive, the only comments in terms of constructive feedback were regarding the comments page, although as I stated before, I saw some of the issues with this, and would have made visual changes to this next time. Clients Comments It was at this point I arranged another meeting with Stella, this time to show her all of the completed work, and the website itself. She left me some feedback regarding the website as a whole, which I felt were great in terms of my own personal development. “Wow! I love the website, and it’s much better than I was expecting. It has a professional look; I also love the transitions on the pages, giving a brief insight into my work. I also liked the way on the gallery how upon clicking it opened up the image in a larger manner, showing a better quality image.” “I like how it takes a break in convention and doesn’t fit to the whole white background/black text that the designer mentioned in our first interview, It gives my site an edge over others, as people won’t be quite expecting what they see when the site itself loads. On top of this, everything worked perfect, I had no issues at all browsing through the website at all” “I’m thrilled with the website and I am looking forward to its future, and working with the designer where we can possibly take it in the future. This is a new prospect for me, and I’m excited to see where it goes.” Bibliography Igbal. (2010). HTML Code. Available: http://www.adobe.com/photoshop. Last accessed 24th May 2013. Famas, Achmed. (2009). Dreamweaver. Available: http://www.adobe.com/dreamweaver. Last accessed 24th May 2013. Bob, N. (2009). W3c. Available: http://www.htmlhelp.com/css.explained. Last accessed 25th May 2013. Robinson, G. (2012). HTML for noobs. Available: www.webhelp.com/index. Last accessed 26th May 2013. Ivon Taylor (2009) HTML Design. Available: http://www.htmlhelp.com.design Last accessed 23rd May 2013

Bibliography: Igbal. (2010). HTML Code. Available: http://www.adobe.com/photoshop. Last accessed 24th May 2013. Famas, Achmed. (2009). Dreamweaver. Available: http://www.adobe.com/dreamweaver. Last accessed 24th May 2013. Bob, N. (2009). W3c. Available: http://www.htmlhelp.com/css.explained. Last accessed 25th May 2013. Robinson, G. (2012). HTML for noobs. Available: www.webhelp.com/index. Last accessed 26th May 2013. Ivon Taylor (2009) HTML Design. Available: http://www.htmlhelp.com.design Last accessed 23rd May 2013