Msc(IT)_Unit_2_Internet and web Technology(1310505)---Web Design Fundamentals

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6545189029733302"

     crossorigin="anonymous"></script>



An effective website design should fulfil its intended function by conveying its particular message whilst simultaneously engaging the visitor. Several factors such as consistency, colours, typography, imagery, simplicity, and functionality contribute to good website design.

When designing a website there are many key factors that will contribute to how it is perceived. A well-designed website can help build trust and guide visitors to take action. Creating a great user experience involves making sure your website design is optimised for usability (form and aesthetics) and how easy is it to use (functionality).

Below are some guidelines/Principals that will help you when considering your next web project.:


  • Web site Purpose
  • Simplicity (color, font type...)
  • Navigation
  • F-Shaped Read
  • Visual hierarchy
  • Content
  • Grid based layout
  • Load and Respnose time
  • Mobile friendly

Web Designing Issues:


a)     Browser & Operating Systems

b)   Bandwidth and Cache

c)   Display Resolution

d)   Look & Feel

e)   Page Layout and Linking

f)    Locating Information

g)   Making Design user-Centric

h)   Sitemap


A)

§ Web pages are written using different HTML tags and viewed in browser window.

§ The different browsers and their versions greatly affect the way a page is rendered, as different browsers sometimes interpret same HTML tag in a different way.

§ Different versions of HTML also support different sets of tags.

§ The support for different tags also varies across the different browsers and their versions.

§ Same browser may work slightly different on different operating system and hardware platform.

§ To make a web page portable, test it on different browsers on different operating systems.




B)
  • Users have different connection speed, i.e. bandwidth, to access the Web sites.
  • Connection speed plays an important role in designing web pages, if user has low bandwidth connection and a web page contains too many images, it takes more time to download.
  • Generally, users have no patience to wait for longer time than 10-15 seconds and move to other site without looking at contents of your web page.
  • Browser provides temporary memory called cache to store the graphics.
  • When user gives the URL of the web page for the first time, HTML file together with all the graphics files referred in a page is downloaded and displayed.



c)
  • Display resolution is another important factor affecting the Web page design, as we do not have any control on display resolution of the monitors on which user views our pages.
  • Display or screen resolution is measured in terms of pixels and common resolutions are 800 X 600 and 1024 X 786.
  • We have three choices for Web page design.
    • Design a web page with fixed resolution.
    • Make a flexible design using HTML table to fit into different resolution.
    • If the page is displayed on a monitor with a higher resolution, the page is displayed on left hand side and some part on the right-hand side remains blank. We can use centered design to display page properly.
    • Ideally we should use some frameworks for designing like Bootstrap/Material design.


d)
           Look and feel of the website decides the overall appearance of the website.
  • It includes all the design aspects such as
  • Web site theme
  • Web typography
  • Graphics
  • Visual structure
  • Navigation etc…
e)
  • Website contains of individual web pages that are linked together using various navigational links.
  • Page layout defines the visual structure of the page and divides the page area into different parts to present the information of varying importance.
  • Page layout allows the designer to distribute the contents on a page such that visitor can view it easily and find necessary details.
f)
  • Webpage is viewed on a computer screen and the screen can be divided into five major areas such as center, top, right, bottom and left in this particular order.
  • The first major area of importance in terms of users viewing pattern is the center, then top, right, bottom and left in this particular order.
g)

  • It is very difficult for any Web designer to predict the exact behavior of the Web site users.
  • However, idea of general behavior of common user helps in making design of the Web site user centric.
  • Users either scan the information on the web page to find the section of their interest or read the information to get details.

 h)

  • A Sitemap is a model of a website's content designed to help both users and search engines navigate the site.
  • Many a times Web sites are too complex as there are a large number of sections and each section contains many pages.
  • It becomes difficult for visitors to quickly move from one part to other.
  • Once the user selects a particular section and pages in that section, user gets confused about where he/she is and where to go from there.
  • To make it simple, keep your hierarchy of information to few levels or provide the navigation bar on each page to jump directly to a particular section.
Planning a website:

  • The most important activity in a website development is planning.
  • To achieve higher success of the website in terms of user satisfaction, better planning is needed.
  • Before we start developing a website, we should ask question such as
    • Why are we developing this website?
    • What do we achieve by developing this website?
    • Who are the people who will use this website?
    • What are the information contents?
    • How are these contents organized? What are the possible ways?
Effective Navigation

    • The most important design element in the web design after page layout is navigation design.
    • Navigation means the ways to move from one page to another page in a Web site using hyperlinks provided on the page.
    • If navigation design is not proper then user feels the problem in moving around the pages in your site in a desired manner or gets confused and leaves the site.
    Tips for Effective Navigation

    • Navigation links are either text based, i.e. a word or a phrase is used as a link, or graphical, i.e. a image, a icon or a logo is used as a link.
    • Navigation links should be clear and meaningful.
    • It should be consistent.
    • Link should be understandable.
    • Organize the links such that contents are grouped logically.
    • Provide search link, if necessary, usually on top of the page.
    • Use common links such as ‘about us’ or ‘Contact us’.
    • Provide the way to return to first page.
    • Provide the user with information regarding location
    • Horizontal navigation bar can be provided on each page to directly jump to any section

    Comments

    Post a Comment

    Popular posts from this blog

    Msc(IT)_Unit_1(Introduction to Web)_Internet and web Technology(1310505)

    Image
      What is computer networking? Computer networking refers to interconnected computing devices that can exchange data and share resources with each other. These networked devices use a system of rules, called communications protocols, to transmit information over physical or wireless technologies. Network computer devices that originate, route and terminate the data are called  network nodes . [1] Nodes can include  hosts  such as  personal computers ,  phones , servers  as well as  networking hardware . Two such devices can be said to be networked together when one device is able to exchange information with the other device, whether or not they have a direct connection to each other. Computer networks differ in the  transmission medium  used to carry their signals, the  communications protocols  to organize network traffic, the network’s size,  topology  and organizational intent. Computer networks support an...
    Read more

    HTML_CSS_BOOK for subjectcode:1310505(M.sc.IT)_By_GTU

    Table of Contents  (Hide) 1.  Introduction to HTML/CSS 2.  Introduction to HTML 3.  HTML By Examples 3.1  Example 1: Basic Layout of an HTML Document 3.2  Example 2: Lists and Hyperlinks 3.3  Example 3: Tables and Images 3.4  HTML Template 3.5  HTML Document Validator 3.6  Debugging HTML 4.  HTML Basics 4.1  HTML Tags, Attributes and Elements 4.2  The Basic Document Skeleton 4.3  HTML Comment  <!-- ... --> 4.4  Block Elements vs. Inline Elements 4.5  Block Elements 4.6  HTML5's New Semantic Block Elements 4.7  Inline Elements - Logical Style vs. Physical Style 4.8  HTML5's New Semantic Inline Elements 4.9  Entity References for Reserved & Special Characters 4.10  Lists 4.11  Tables 4.12  Anchors and Hyperlinks 4.13 ...
    Read more