Download Assignment 1 web develpment & design and more Assignments Web Design and Development in PDF only on Docsity!
ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing
Unit number and title 10: Website Design & Development
Submission date Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Do Sy Long Student ID GCD
Class GCD0824 Assessor name Srikanth Raju^ Kandukuri
Student declaration
I certify that the assignment submission is entirely my own work, and I fully understand the consequences of plagiarism. I understand
that making a false declaration is a form of malpractice.
Student’s signature
Grading grid
P5 P6 P7 M4 M5 D2 D
Summative Feedback: Resubmission Feedback:
Grade: Assessor Signature: Date:
Signature & Date:
Contents
- Chapter 0: Introduction.............................................................................................................................................................
- Chapter 1: Website Design Principles, Standards and Guidelines............................................................................................ - 1. Principles of Good Website Design.............................................................................................................................. - 2. Web Design Standards and Guidelines.........................................................................................................................
- Chapter 2: Website Design Documents.................................................................................................................................... - 1. User and Client requirement......................................................................................................................................... - 2. Website Wireframes.....................................................................................................................................................
- Chapter 3: Website Implementation....................................................................................................................................... - 1. Tools and Techniques for Develop a Website............................................................................................................. - 2. Development Processes..............................................................................................................................................
- Chapter 4: Testing.................................................................................................................................................................. - 1. User Experience Test:................................................................................................................................................. - 2. User Interface Test:.....................................................................................................................................................
- Chapter 5: Reference..........................................................................................................................................................
- Figure 1 : Homepage Design.....................................................................................................................................
- Figure 2 : Product Design..........................................................................................................................................
- Figure 3 : Checkout Design.......................................................................................................................................
- Figure 4: Login Design.............................................................................................................................................
- Figure 5: About Us Design.......................................................................................................................................
- Figure 6: Homepage Development...........................................................................................................................
- Figure 7 : Index(Homepage).html..............................................................................................................................
- Figure 8: Product Development................................................................................................................................
- Figure 9: Product.html Development........................................................................................................................
- Figure 10: Checkout Development...........................................................................................................................
- Figure 11 : Checkout.html Development...................................................................................................................
- Figure 12: Login Development.................................................................................................................................
- Figure 13 : About us Development............................................................................................................................
- Figure 14 : About.html Development........................................................................................................................
Chapter 1: Website Design Principles, Standards and Guidelines
- Principles of Good Website Design
a. Simple is the best
The over-designed website may not work. Putting too many elements on the page may lead to distracting visitors from the main purpose of your website. Simplicity always works in an effective web page design. Clean and fresh design of your website not only makes the website appealing but also help user to navigate from one page to another seamlessly. Loading a website having design features which do not serve the purpose may be frustrating. Keep your design as simple as possible so that the visitors can feel it easy-to-use and can find their ways easily.
b. Consistency
Consistency in website design matter a lot. Give your attention to match design elements throughout each of the pages. It can be understood that your fonts, sizes, headings, sub-headings, and button styles must be the same throughout the website. Plan everything. Finalise the fonts and the right colours for your texts, buttons etc, and stick to them throughout the development. CSS (Cascading Style Sheets) would come in handy to keep the complete information about design styles and elements.
c. Typography & Readability
No matter how good your design is text still rules the website as it provides users with the desired information. Since search engine crawlers are very much familiar with this data, it becomes an integral part of SEO activities. You should keep your typography visually appealing and readable for visitors, along with tricky use of keywords, meta-data, and other SEO-sensitive elements. Consider using fonts that are easier to read. The modern sans-serif fonts as Arial, Helvetica etc. can be used for the body texts. Make proper combinations of typefaces for every design elements such as headlines, body texts, buttons etc.
d. Mobile Compatibility
Keeping in mind the ever-growing usage of smartphones, tablets and phablets, web design must be effective for various screens. If your website design doesn’t support all screen sizes, the chance is that you’ll lose the battle to your competitors. There are several web design studios or service points from where you can turn your desktop design into a responsive and adaptive one for all screen sizes.
e. Colour Palette and Imagery
A perfect colour combination attracts users while a poor combination can lead to distraction. This necessitates you to pick a perfect colour palette for your website which can create a pleasing atmosphere, thus leaving a good impact on visitors. Enhance users experience by selecting a complementary colour palette to give a balanced-look to your website design. Remember to white space use as it avoids your website from visual clutter and mess. Also avoid using too many colours. 3 or 4 tones for the whole websites are ample to give appealing and clear design. Same is the case with images. Don’t use multiple vibrant images
f. Easy Loading
No one likes the website that takes too much time to load. So take care of it by optimising image sizes, combing code into a central CSS or JavaScript file as it reduces HTTP requests. Also, compress HTML, JavaScript and CSS for enhanced loading speed.
g. Easy Navigation
Study shows that visitors stay more time on the websites having easy navigation. For effective navigation, you may consider creating a logical page hierarchy, using bread scrums, and designing clickable buttons. You should follow the “three-click-rule” so that visitors can get the required information within three clicks.
h. Communication
The ultimate purpose of the visitors is to get information, and if your website can communicate your visitors efficiently, most probably they would spend more time on your website. Tricks that may work to establish effortless communication with the visitors are – organising information by making good use of headlines and sub-headlines, cutting the waffle, and using bullet points, rather than long gusty sentences.
- Web Design Standards and Guidelines Web standards are rules and guidelines established by the World Wide Web Consortium (W3C) developed to promote consistency in the design code, which makes up a web page. Without getting technical, simply it's the guideline for the mark-up language which determines how a web page. Displays in a visitor's browser window. The advantages in adhering to these standards are many: Web pages will display in a wide variety of browsers and computers, including new technology like iPhones, Droids, iPads, PDA devices, mobile phones, which greatly increases the viewing audience. W3C Standards promote the use of "Cascading Style Sheets" (CSS) or design code which is attached to the web page. Rather than embedded in the page. The use of style sheets significantly reduces the page file size, which means not only a faster page loading time but lower hosting costs for frequently visited sites due to using less bandwidth. Design features such as colours and fonts can be easily changed by just modifying one style sheet instead of editing every individual page in a web site, reducing the costs to modify your site. Search Engines can access and index pages designed to web standards with greater efficiency.
Figure 1 : Homepage Design
Figure 2 : Product Design
Figure 4: Login Design
Figure 5: About Us Design
- Development Processes
a. Homepage Development
Figure 6: Homepage Development
Figure 7 : Index(Homepage).html
Figure 9: Product.html Development
c. Checkout Development
Figure 10: Checkout Development
