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