fundamental of webdesign trends 2014

7/24/2019 Fundamental of WebDesign Trends 2014

1/11

i n f o s y s t e m s

FUNDAMENTALS OFWEBSITE BUILDING & WEB DESIGN

TRENDS 2014

www.webguru-india.com


2/11

INDEX

Contents Page

1. Introduction 01

2. Techniques and Skills Used by Web Designers 01

3. Technology Trends 05

4. Types of Websites 07

5. Conclusion 08



3/1101

Introduction

Techniques & Skills Used by Web Designers

Website design incorporates many disciplines andskills involved in the creation and maintenance ofinternet sites. The different fields of web designinginclude interface design, web graphic design,authoring along with proprietary software andstandardized code, search engine optimization anduser experience design. Web Design is defined as the

process related to the client- side or front-end designand writing mark up of a website.

In present times, with highly innovative andsophisticated technology development, leading web designers cover various aspects of thedesigning process. Expert web design professionals are expected to have proper awareness ofusability and web accessibility guidelines, especially if their role includes creating mark up.

In modern times, a variety of sophisticated tools areused by web designers and the application procedureof such different technologies mostly depends on whattype of the production process those are involved in.Technologies used for building websites coverstandardized mark-up and it could be either hand-coded or generated by editing software WYSIWYG.Over time, these tools are updated by newer softwareand standards, but the principles behind website

designing remain the same. For the purpose ofcreating design prototypes or web formatted imagery, web graphic design professionals use rastergraphics packages and vector. Proprietary software that is based on plug-ins also bypasses thebrowsers versions of clients. They are often WYSIWYG although having the option of applyingscripting language of the software.

There are also tools for search engine optimization and these can be used for checking searchengine ranking as well as suggesting improvements. Apart from these, some of the other tools likemark up validations and usability or accessibility testing tools might be used by the leading designersas per requirement. These website testing tools are all intended to ensure the various businessobjectives and market potentials in terms of meeting web accessibility guidelines.



4/1102


1. Client Side ApplicationsThe Client Side part of a web site is the data sent by the server in an unprocessed form to any webbrowser on the local machine, that displays and processes the data.

HTML: Hypertext Markup Language (HTML) is a scripted language which is mainly used fordisplaying images and text on the Internet. This is the primary internet language and all otherapplications revolve around this. Its disadvantage is that it only displays website pages, but cannotperform more complex functions like calculations, content manipulation and validation. There aredifferent variations of this language including XML, that allow more flexibility, but none is as widelysupported and used as HTML.

DHTML:Dynamic HTML or DHTML is only HTML generated by some other application, like a serverside script in PHP or Perl, or a JavaScript written client side script. The advantage of Dynamic HTMLincludes the ability to change, delete or add HTML text whenever the web page is presented to theweb browser, allowing content modification and manipulation every time a page is displayed.

XML:Extensible Markup Language (XML) is a uniform protocol that enables receiving and sendingcomplex data over the internet irrespective of the platform or technology being used. A data can bedecoded from and encoded into XML protocol using ASP, PHP or Perl.

Java:Java is an interpreted language that was developed to run on each operating system. This verynature of this language has made it a natural pick for complex internet functions like live news feeds,streaming stock quotes, crossword puzzles, picture shows, games and much more. Prior to theexecution of Java applications, these must be compiled first.

Java Applet:Applets are small web applications embedded into HTML with a reference to other filecomprising the source code and written in Java. The primary advantage of Java Applets includestheir ability to perform complex functions along with the easy implementation on web pages.However, these must be compiled and take longer to load.

JavaScript:JavaScript is a scripted language based on Java. It runs on most web browsers and can

only be performed by a web browser. It runs on most web browsers to complement HTML. Forcomplex functions executed by the browser, it is the language of choice and hence it is more stableand much faster than Java Applets. The rolling image functions can be the example of JavaScript.The image becomes white to yellow when on the left side of that site the mouse gets passed over it.JavaScript can also be used for user personalization with form validation, cookies and special imageeffects and text.

Frames:Frames is a series of web pages linked together into a single page by HTML. Its advantageis that navigation can be done on just a single section of a page, leaving the rest unchanged. Thusnavigation is made easier and faster. Any corporate website can be designed using frames.


5/1103


Cookies:Small data files are called Cookies. These are sent to local computers by web browsers forthe purpose of storing user identification data and other information to a website for each visitor.Cookies allow tracking of visitors, customization of web pages for each user, along with other userspecific functions.

Image:On web browsers, a file commonly in JPEG, Bitmap or GIF format is used to displaygraphics. Animated Image changes or moves using a series of frames assembled together insequence. Animated images are extensively used for special effects and in ad banners.

Flash/Shockwave: It is an animated multidimensional image application designed by

Macromedia. The advantage of Flash lies in its movie like graphics and quality. However, usersgenerally do not have the software required to use this technology. Hence, an alternate websitewithout Flash should be created.

2. Server Side ApplicationsThe Server Side application first processes the data on the server to send it to a web browser fordisplay and further processing.

Linux:Linux, Solaris, BSD, FreeBSD along with other Open Source operating systems are known fortheir scalability and security, and these are applied to over 60% of the web servers powering theInternet.

Windows NT:Windows NT and Windows 2000 besides the built in IIS (Internet Information Server)are server operating systems designed by Microsoft for the Internet and networking.

CGI:Common Gateway Interface (CGI) enables the performance of server side applications such asgenerating dynamic web pages, accessing data sources, server administration etc. C++, Perl andPython are the most common Open Source languages applied for CGI. Into HTML pages, CGI scriptscannot be embedded, as these are commonly placed in a separate directory called cgi-bin forexecution.

SSI: Server Side Includes (SSI) enables the web server to perform commands set into HTMLdocuments. SSI acts best for displaying time and date, merging CGI scripts and multiple documents,last modified date, click counters and different simple server side applications.PHP:For server side applications, this is the most advanced and latest Open Source scriptinglanguage. PHP can be embedded into HTML and it is superior to CGI, and can be executed from anydirectory on the server. PHP executes all CGI functions like receiving and sending email, accessingdatabases, writing to and reading from files, user authentication, sever administration, formvalidation and much more. It is a combination of Java, C and Perl, making it easy for mostdevelopers to learn.


6/1104


ASP/ASP.NET: Active Server Pages (ASP) and ASP.NET is the server side application platformdesigned by Microsoft based on the VB Script programming language. For people who know VBScript, its code is easier for implementing. PHP is similar to ASP as it can be integrated into HTML,provided it is not Open Source.

Cold Fusion:It is another platform for server side application developed by Allaire Corp and ColdFusion is used for its proprietary scripting technology. It is also another alternative to ASP and PHPand it too can be enclosed into HTML, unless it is not Open Source.

Active-X:A plug-in developed by Microsoft allows applications, generally written in VB Script. It canbe embedded in web pages and is similar to Java Applets.

SSL:Secure Sockets Layer (SSL) is a process of encrypting data on the internet. Every website must geta digital certificate for proving its true identity to end users. On almost all E-commerce sites thistechnology is widely used in order to provide a secure environment for exchanging financial andpersonal information.

Databases:The Database is an essential component of dynamic and data driven web sites, as itretrieves and stores data in real time. The basic method of communicating with databases on theInternet is through server side scripts.

MySQL:On the Internet, it is widely used and the most popular Open Source database. Developersmostly prefer MySQL for ease of implementation and its speed, and its ability for importing data fromother databases like Microsoft Access. Some of the most popular and largest websites such as Yahoo,Google and many others use MySQL.

MS SQL:Microsoft's Sequel Server or SQL database is mainly used for medium to light size webapplications written in Visual Basic and ASP.

MS Access: It is a lightweight database designed by Microsoft for its uses mainly on personal

computers or desktops. MS Access is also commonly used on the Internet due to its familiarity to PCusers.

Oracle:it is an industrial strength database developed primarily for government agencies and largecorporations. Oracle is popular for its ability to handle variety of data and very large volumes.

Sybase: It is also an industrial strength database meant for government agencies and largecorporations.

Visual FoxPro:Microsoft's FoxPro is one of the first databases to be used on the Internet. However, itis not widely used any longer.


7/1105


Technology Trends

1. Market Branding and CommunicationDesign:Marketing and communication design on awebsite helps in identifying all the features that willwork for its target market. This can be a particular agegroup or strand of society or culture, accordingly thedesigner can understand latest market trends and themindset of its audience. Design professionals always

understand the kind of website designs they plan, andthereby making a business-to-business web designconsiderations absolutely different from a customertargeted website like an entertainment or retailwebsite. Careful consideration of specific web designplanning ensures the overall design or aesthetics of a site. Ideally, it should not clash with theaccuracy and clarity of web navigation or content, especially if it is an e-commerce site. Designexperts often consider the standing of the business or the owners reputation while making the sitethat truly portrays the commercial purpose favorably.

2. Interactive and User Experience Design:The user experience design depends on what the

content is and how any website works. User experience is associated with labeling, clear instructionsand layout on a website. The interactive design of a website also greatly influences the level of usersunderstanding along with their interaction on a site. If a user perceives the usefulness of that website,they are more likely to continue using it. Users who are well versed and skilled as far as using websiteis concerned may come across a more unique, less user-friendly or but less intuitive website interfacehelpful nonetheless.

On the contrary, less experienced users are less likely to find the usefulness or advantages of a lessperceptive website interface. It is for this reason trends for a more universal and easily accessible userexperience are on demand. Easy and simple navigation helps to accommodate a large number ofusers regardless of their proficiency. Much of the interactive design and user experience design istaken into consideration in the process of creating user interface design. In case coding languageskills are not advanced, interactive functions often require plug-ins. In the user experience design,choosing factors like whether to use interactivity which requires plug-ins is a crucial decision. If it is notinstalled previously with most of the browsers, there lies a risk that users may neither have the knowhow, nor the required patience to set a plug-in just for accessing the content. The function oftenrequires developed coding language skills.

3. Page Layout:The user interface design is partly affected by the type of page layout quality. Forinstance, when scheming the layout, designers may consider the consistency of page layout onvarious pages of the sites. Page pixel width is another vital factor of layout design for aligning objects.

The best-selling fixed-width website generally has the same width set to match the most popularcurrent browser window, at the best latest screen resolution, on the best available monitor size. Most


8/1106


of the pages are center-aligned for aesthetic concerns on larger screens. Fluid layouts are alsoincreasing in popularity as an alternative to grid-based design and layouts based on HTML table inboth coding technique and page layout design principle.

4. Responsive Web Design:It is a newer design approach based on CSS3 as well as a deeperlevel of particular device specification within the designing of the sites. It is a process that employs anadvanced use of the media pseudo-selector and CSS. Responsive Web Design (RWD) is a trend thatsuggests development and design should respond to users behaviors and environment based onplatform, screen size and orientation. The practice comprises a mix of layouts and flexible grids andimages along with the intelligent application of CSS media queries. As the modern users tend to

switch from laptops to their iPads, websites should also automatically switch and improve toaccommodate for image size, resolution and scripting abilities. This highly sophisticated designprocess makes websites technically enable to respond to the users preferences automatically. Thistechnology is going to eliminate the requirement for a different development and design phase forall new gadgets in the market.

5. Motion Graphics:Uses of motion graphics may also affect the user interface and page layout.The choice of using motion graphics is optional and it generally depends on the target audience forthe site. Motion graphics may be better received or at least expected with the entertainment-orientedwebsites. However, any website targets market with a more formal or sincere interest like business,government or community and hence might find animations distracting and unnecessary if only fordecoration or entertainment purposes. This does not mean that purposeful content can not beenhanced with video or animated presentations that has relevancy to the content. In any of suchcases, motion graphic design can make a difference between more efficacious or distracting visuals.

6. Typography:Instead of using a variety of website type styles or typefaces web designers may optto limit the them to just a few ones that are of similar style. Most browsers accept a limited number ofsafe fonts that designers use mainly to avoid complications. Font downloading process was includedlater in the fonts module CSS3 and since then it has been used in Opera 10, Mozilla Firefox 3.5 andSafari 3.1. This enhanced method has subsequently become popular with increasing interest in theimplementation of font downloading and web typography as well. Many layouts on a website

incorporate negative space in order to avoid center-aligned text and also break the text up intoseveral paragraphs.

7. Quality of Code:Website designers may consider it to be good practice to conform to standards.This is usually done via a description specifying what the element is doing. A successful website thatconforms to standards may relate to the accurate layout of pages for organized coded elements aswell as readability.


9/1107


Types of Websites

The visual appearance and design of a websitedepends on the function of a site. There are a numberof categorized web designs that are used to build anddescribe sites. Even though the possible types ofwebsites may appear endless, these can be groupedsafely in a couple of general ways. Starting from theabstract there are various visual categorizations also.

Abstract Categorizations

A site can be of two types: task focused andinformation focused. This distinction sometimes canbe described as document-centered site and application-centered site. Informational or document-centered sites offer information for users, though such sites provide very little interactivity instead ofallowing the users to search, browse or find the information presented. Websites that areapplications or task oriented allow users to interact with information and accomplish tasks like onlineretailing or shopping and transferring funds from any bank account.

Hybrid sites combine both the tasks in a limited way. In recent times these type of web design conceptare becoming more common. As the line between application and information blurs, a general staticdocument-oriented site may be converted into full-blown software applications.This abstract grouping also suggests the transition from more print or document oriented websites tomore interactive programmatic sites. With the onset of sophistication in the field of web developmentand designing, contention and innovation play a major role.

Broad Visual Categories

Turning to more visual characteristics of the sites, with some sample categories usually seen on theweb, websites may also be grouped based upon an organization that is running or somehow payingfor a particular site. Within such categorization there are some major groupings.

1. Informational websites: The sites that provide information regarding a specificorganization or subject fall into this category. These are also known as the brochure waresites. These are found to be most commonly used websites on the Internet and over timethese sites take on aspects of other site categories. Commercial sites are mostlyinformational in form.

2. Transactional websites:These sites are used for conducting some task or transaction. E-commerce sites and Government sites are included in this category. Transactional

websites generally refer to on-line stores which allow customers to order various productsand services. Transactional site facilitates commerce by enhancing businesses networkwith target customers all across the world. The primary advantage of transactional


10/1108


websites is that customers do not need to step out the door or travel, as 24 hour on-linestores are just a click away.

3. Community websites:These sites are intended to provide transaction-related facilities orinformation, but mainly focus on the user interaction among the site's visitors. Community-based websites tend to highlight a particular type or topic of a person and thus encourageinteraction between like minded visitors or individuals. Educational sites fall into thiscategory.

4. Charitable websites:These are intended and designed for gaming or some sort ofamusing interaction including informational, transactional and community elements.Such sites help users find out information about charity, but the primary objective of thewebsite is to get visitors involved with charity.

5. Personal websites:Among various other classifications or types of websites there areexperimental or artistic sites, personal web spaces like blogs or web logs as well as siteswhich may not follow common web standards or conventions or involve some well-defined economic purposes.

6. Online Business Catalog/Brochure Websites:In early days when the Internet was not in

use, the print, television media and radio were used for spreading awareness aboutbusinesses. Now you can easily promote your industry by reaching out to literally millionsof people with the help of just one website. With your online catalog or brochure, you canshow anyone who looks for your website, photos, descriptions and various other relateddetails of your products and services. To some it may sound like an E-commerce Website,but there are a number of businesses that market services or products such as dentist, hair-stylist or day-care center and these are not sell-able over the web.

Web design partly overlaps the process relating to web engineering so far as the wider scope of webdevelopment is concerned. In the year 1996, the first competitive browser of Microsoft was releasedin its own complete form with tags and its features. It was the first advanced browser that is meant to

back up the style sheets that earlier seemed to be an obscure authoring technique.

In this informative e book you will find various usefulthings about professional website designing. Righthere in this book you will get to know about thefundamentals of everything important relating to webdesign, optimized graphic files, CSS layouts and somuch more. This thoroughly revised comprehensiveedition offers lessons on website design programsaccording to professional standards and moderndesign practices.

Conclusion


11/11

Need any help in web design and development? Get in touch with us at

Y8, Block - EP, Sector VSalt Lake

Kolkata - 700091INDIA

Ph: +91-33-40200844Email: [email protected]

Website: www.webguru-india.com


...designing imaginations across boundaries

fundamental of webdesign trends 2014

Documents