Web Design

Link to the Website I created: http://www.rus-mcl-digitalmedia.co.uk/Allishba_Amer/fashionwebsite/home.html

Basic Web Design

Introduction

I created this website for ‘Basic Web Design’ which is the module I am currently studying at the University of Roehampton. My goal is to become a web designer so this module gives me the perfect opportunity to work practically.

The website is about Fashion and how it has changed over the decades. The main purpose of the website is informative. The inspiration was mainly the lack of online fashion websites and fashion magazines. I want to take a more dynamic approach with this website which is done by including CSS code to it.

Target audience and User experience

The target audience is general public who’s seeking information on fashion.

User experience also referred as UX is an understanding of users and their needs, abilities and values. The main purpose of the User experience as the name suggests is to improve the experience of the product and in this case of the website. (Usability.gov, 2019).

The factors that affect the user experience and which I had to consider while designing the website are:

-Usable, making sure the site is easy to use and understandable for everyone.

-Useful, the content in my site should have meaning to it.

-Accessible, the content to my site should be accessible to disabled people. (Usability.gov, 2019).

-Desirable, the use of images and design elements to make the layout more attractive to the user and for a more professional look.

Methods and Sources

For my website I will be using various resources for more information such as text books to help me design the interface better, notes taken in class, various websites and YouTube Tutorials which will be included in my bibliography. I mainly watched YouTube tutorials to understand better how to design interactive menu bars and make the website more interactive with the use of pure CSS code. The research I done to design a complete website includes:

  • Displaying the navigation bar with the horizontal hoovering effect.
  • How to insert an image slider which keeps sliding different images without any specific command.
  • How to display an image which flips to give information when the mouse hoovers around it.
  • How to animate the fonts.
  • How to create separate content areas.

 

SITE DESIGN

Mock-ups designs

Before I designed the website, I chose the images I will be using and the place where I will be placing them by the help of the mock ups of the pages (included in the appendices). Mock up designs are rough drafts or prototypes of the website. (Anon, 2019).

Interaction design

When designing an interactive product, the designer has to consider factors such as who will using them and “what kind of activities people are doing when interacting with the products”. (Preece, Sharp and Rogers, 2015). Creating user experience is defined in many ways and one of them is “the art of facilitating interactions between humans through products and services”. (Saffer, 2010). In the case of my website it is easier to see the different styles of models in one place with images being displayed separately one by one and some of them being animated to keep the user interested. It is not sufficient building a product/website that only functions but it is also important that it brings pleasure, fun and visually beautiful to the users. (Norman, 2004).

Menu design

Menus and Headings are mainly used to present a structured list of options a user can choose to make the navigation easier. (Preece, Sharp and Rogers, 2015).
In my case I chose a drop-down menu which “is a list of items that appear when clicking on a button or text selection.” (Definitions and Hope, 2019). In my website instead of clicking on the option the list of option appears when the mouse hovers on the heading.

Site map represents the options displayed on the navigation bar on the website itself. Creating a site map helps the users and search engines to understand the website better. (Preece, Sharp and Rogers, 2015). The sitemap below represents my navigation bar:

 

 CSS and webpage design

Home page – consists of the navigation bar, an animated image slider and 2 posts which talk about fashion in general. The table below explains the main code used In CSS to style this page and naming conventions I used.

 

Name of class Purpose of the class
h1 To animate the title
Mainheader

<nav>

 To set the style of the navigation bar
Mainheader

<img>

 To insert and place the logo
Maincontent To fix the position of all the content
Content To fix the positions of the posts
Slider To insert an automated slider of images
topcontent To post the 1st post about fashion
Bottom-content To place the second post about fashion
mainfooter To place the footer at the end of the page

‘About fashion’ – page consists of the navigation bar, an animated image that moves from left to right and 1 post which talk about fashion with a quote.

 

Name of class Purpose of the class
h1 To animate the title
Mainheader

<nav>

 To set the style of the navigation bar
Mainheader

<img>

 To insert and place the logo
Topcontent1 To fix the positions of the post
glass To animate the image and make it move continuously
mainfooter To place the footer at the end of the page

The ‘40’s fashion’, ‘60s fashion’, ‘90s fashion’ and ‘Today’s fashion’ pages consist of the navigation bar, an animated image that flips when the mouse hovers on it and at the back there is information about the picture.

Name of class Purpose of the class
h1 To animate the title
Mainheader

<nav>

 To set the style of the navigation bar
Mainheader

<img>

 To insert and place the logo
Card To fix the positions of the image
front To adjust the properties of the front of the image
back To adjust the properties of the back of the card and make sure it stays hidden
Back-content To place the content that is displayed at the back
mainfooter To place the footer at the end of the page

‘Portfolio’ – consists of the navigation bar and an animated glowing image slider.

Name of class Purpose of the class
h1 To animate the title
Mainheader

<nav>

 To set the style of the navigation bar
Mainheader

<img>

 To insert and place the logo
Portfolio-slider To place the content of the slider so the transition of the images is automated
mainfooter To place the footer at the end of the page

‘Contact’ – consists of the navigation bar and an animated glowing image slider.

Name of class Purpose of the class
h1 To animate the title
Mainheader

<nav>

 To set the style of the navigation bar
Mainheader

<img>

 To insert and place the logo
vrapper To place the logos and give them a moving effect when the mouse is on the logo
mainfooter To place the footer at the end of the page

 

Web design in general

A classic version of the website should be focused on the simplicity, legibility, speed, ease to use and feedback. Another key factor is the website’s loading time. These are the main factors that should be considered when making a good website. (Nielsen and Mohlich, 1990).

To make the website’s loading time fast I kept it as simple as possible with a simple background and avoid too many images or text because users normally scan a part of the site and select

the first hyperlink that catches their attention that matches what they are looking for. (Preece, Sharp and Rogers, 2015).

Accessible properties

To make the website accessible for the less abled users I included ‘alt’ tags in my code. This enables the user to get information on the image being displayed. Below is present the screenshot a part of my code in HTML where I used the tags.

In order for the website to be easy to update and maintain I included comments in the HTML code and in the stylesheet. A few examples of the coded comments:

 

Html webpage

Testing & Development

Validation was done with the use of the home page link and an error of a missing of the ‘DOCTYPE’ tag was spotted which I did fix after. A lack of social content was spotted in my home page in order to solve this I created a separate page for the eternal social media links.

I used http://jigsaw.w3.org/css-validator/ to spot the errors in the CSS code. In order to correct the errors, I went back to the code and adjusted the misplacement of the code.

The results of the validation and Web analyser report are included in the appendices section.

Screenshots of the website running on two different web browsers:

1.Chrome

2.Internet Explorer

Screenshots of all the webpages working were included in my web design section.

Critical Analysis

I achieved the desired design of the website and how I wanted to place the different items, however I was hoping to include a search bar and insert an image slider with arrows which I was not able to do because of the lack of time. The placement of the flipping images is not exactly how I desired it to be and it needs more adjustment to it which I will continue to work on. But the general purpose of a fashion informative and image animated website has been satisfied.

Conclusion

I learnt how to use HTML AND CSS in depth which will help me with future designing and coding of more complicated websites. I feel more familiar and confident working with HTML and CSS now.

 

Bibliography

Anon, (2019). [online] Available at: https://www.quora.com/What-is-a-website-mockup-design [Accessed 11 Apr. 2019].

Definitions, D. and Hope, C. (2019). What is a Drop-down Menu?. [online] Computerhope.com. Available at: https://www.computerhope.com/jargon/d/dropdm.htm [Accessed 7 Apr. 2019].

 

FIV Magazine: Fashion & Lifestyle. (2019). 100 years of fashion trends – how fashion has changed over time – FIV Magazine: Fashion & Lifestyle. [online] Available at: https://fivmagazine.com/100-years-of-fashion-trends-how-fashion-has-changed-over-time/ [Accessed 1 Apr. 2019].

Nielsen, J and Mohlich, R. (1990) Heuristic evaluation of user interfaces. In proceedings of CHI ’90. ACM, New York.

 

Norman, D. (2004). Introduction to This Special Section on Beauty, Goodness, and Usability. Human-Computer Interaction, 19(4), pp.311-318.

 

Saffer, D. (2010). Designing for interaction. Berkeley, CA: New Riders.

 

Stage.wonderopolis.org. (2019). Why Do Fashions Change Over Time?. [online] Available at: https://stage.wonderopolis.org/wonder/why-do-fashions-change-over-time [Accessed 12 Apr. 2019].

 

Preece, J., Sharp, H. and Rogers, Y. (2015). INTERACTION DESIGN – BEYOND HUMAN-COMPUTER INTERACTION 4E. Chichester: Wiley.

 

Usability.gov. (2019). User Experience Basics | Usability.gov. [online] Available at: https://www.usability.gov/what-and-why/user-experience.html [Accessed 5 Apr. 2019].

 

YouTube. (2019). Css Image Hover Effect – Pure css Tutorial – Html5 css3 – Plz SUBSCRIBE Us For Daily Videos. [online] Available at: https://www.youtube.com/watch?v=l0qf1SmyyBo&list=PL5e68lK9hEzc_7RNnkAO19nQi_Gip2s92 [Accessed 12 Apr. 2019].

 

 

YouTube. (2019). Css3 Tilt Image Animation – Pure Css Tutorial – Html Css Effect. [online] Available at: https://www.youtube.com/watch?v=f9xIaFSIawE&list=PL5e68lK9hEzc_7RNnkAO19nQi_Gip2s92&index=10 [Accessed 12 Apr. 2019].

 

 YouTube. (2019). Responsive Image Slideshow | HTML & CSS. [online] Available at: https://www.youtube.com/watch?v=TzAshjkhFQw [Accessed 12 Apr. 2019].

 

Appendices

Mock-up designs using photoshop

Word count without headings, bibliography, appendices section and tables: 1200