Fundamental of-web design-trends-20142

i n f o s y s t e m s

FUNDAMENTALS OFWEBSITE BUILDING & WEB DESIGN

TRENDS 2014

www.webguru-india.com

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


01

Introduction

Techniques & Skills Used by Web Designers

Website design incorporates many disciplines and skills involved in the creation and maintenance of internet sites. The different fields of web designing include interface design, web graphic design, authoring along with proprietary software and standardized code, search engine optimization and user experience design. Web Design is defined as the process related to the client- side or front-end design and writing mark up of a website.

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

In modern times, a variety of sophisticated tools are used by web designers and the application procedure of such different technologies mostly depends on what type of the production process those are involved in. Technologies used for building websites cover standardized mark-up and it could be either hand-coded or generated by editing software WYSIWYG. Over time, these tools are updated by newer software and standards, but the principles behind website designing remain the same. For the purpose of creating design prototypes or web formatted imagery, web graphic design professionals use raster graphics packages and vector. Proprietary software that is based on plug-ins also bypasses the browsers versions of clients. They are often WYSIWYG although having the option of applying scripting language of the software.

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


02


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

HTML: Hypertext Markup Language (HTML) is a scripted language which is mainly used for displaying images and text on the Internet. This is the primary internet language and all other applications revolve around this. Its disadvantage is that it only displays website pages, but cannot perform more complex functions like calculations, content manipulation and validation. There are different variations of this language including XML, that allow more flexibility, but none is as widely supported and used as HTML.

DHTML: Dynamic HTML or DHTML is only HTML generated by some other application, like a server side script in PHP or Perl, or a JavaScript written client side script. The advantage of Dynamic HTML includes the ability to change, delete or add HTML text whenever the web page is presented to the web 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 sending complex data over the internet irrespective of the platform or technology being used. A data can be decoded 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 very nature 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 the execution of Java applications, these must be compiled first.

Java Applet: Applets are small web applications embedded into HTML with a reference to other file comprising the source code and written in Java. The primary advantage of Java Applets includes their 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. For complex functions executed by the browser, it is the language of choice and hence it is more stable and 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 image effects and text.

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

03


Cookies: Small data files are called Cookies. These are sent to local computers by web browsers for the 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 user specific functions.

Image: On web browsers, a file commonly in JPEG, Bitmap or GIF format is used to display graphics. Animated Image changes or moves using a series of frames assembled together in sequence. 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, users generally do not have the software required to use this technology. Hence, an alternate website without 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 for display and further processing.

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

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 as generating dynamic web pages, accessing data sources, server administration etc. C++, Perl and Python are the most common Open Source languages applied for CGI. Into HTML pages, CGI scripts cannot be embedded, as these are commonly placed in a separate directory called cgi-bin for execution. SSI: Server Side Includes (SSI) enables the web server to perform commands set into HTML documents. 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 scripting language. PHP can be embedded into HTML and it is superior to CGI, and can be executed from any directory on the server. PHP executes all CGI functions like receiving and sending email, accessing databases, writing to and reading from files, user authentication, sever administration, form validation and much more. It is a combination of Java, C and Perl, making it easy for most developers to learn.

04


ASP/ASP.NET: Active Server Pages (ASP) and ASP.NET is the server side application platform designed by Microsoft based on the VB Script programming language. For people who know VB Script, 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 Cold Fusion is used for its proprietary scripting technology. It is also another alternative to ASP and PHP and 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 can be 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 get a digital certificate for proving its true identity to end users. On almost all E-commerce sites this technology is widely used in order to provide a secure environment for exchanging financial and personal information.

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

MySQL: On the Internet, it is widely used and the most popular Open Source database. Developers mostly prefer MySQL for ease of implementation and its speed, and its ability for importing data from other 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 web applications 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 PC users.

Oracle: it is an industrial strength database developed primarily for government agencies and large corporations. 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 large corporations.

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

05


Technology Trends

1. Market Branding and Communication Design: Marketing and communication design on a website helps in identifying all the features that will work for its target market. This can be a particular age group or strand of society or culture, accordingly the designer can understand latest market trends and the mindset of its audience. Design professionals always understand the kind of website designs they plan, and thereby making a business-to-business web design considerations absolutely different from a customer targeted website like an entertainment or retail website. Careful consideration of specific web design planning ensures the overall design or aesthetics of a site. Ideally, it should not clash with the accuracy and clarity of web navigation or content, especially if it is an e-commerce site. Design experts often consider the standing of the business or the owner’s reputation while making the site that 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 instructions and layout on a website. The interactive design of a website also greatly influences the level of users’ understanding 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 website is concerned may come across a more unique, less user-friendly or but less intuitive website interface helpful nonetheless.

On the contrary, less experienced users are less likely to find the usefulness or advantages of a less perceptive website interface. It is for this reason trends for a more universal and easily accessible user experience are on demand. Easy and simple navigation helps to accommodate a large number of users regardless of their proficiency. Much of the interactive design and user experience design is taken into consideration in the process of creating user interface design. In case coding language skills 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 not installed previously with most of the browsers, there lies a risk that users may neither have the know how, nor the required patience to set a plug-in just for accessing the content. The function often requires developed coding language skills.

3. Page Layout: The user interface design is partly affected by the type of page layout quality. For instance, when scheming the layout, designers may consider the consistency of page layout on various 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 popular current browser window, at the best latest screen resolution, on the best available monitor size. Most

06


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

4. Responsive Web Design: It is a newer design approach based on CSS3 as well as a deeper level of particular device specification within the designing of the sites. It is a process that employs an advanced use of the media pseudo-selector and CSS. Responsive Web Design (RWD) is a trend that suggests development and design should respond to user’s behaviors and environment based on platform, screen size and orientation. The practice comprises a mix of layouts and flexible grids and images 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 to accommodate for image size, resolution and scripting abilities. This highly sophisticated design process makes websites technically enable to respond to the user’s preferences automatically. This technology is going to eliminate the requirement for a different development and design phase for all 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 for the site. Motion graphics may be better received or at least expected with the entertainment-oriented websites. 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 for decoration or entertainment purposes. This does not mean that purposeful content can not be enhanced with video or animated presentations that has relevancy to the content. In any of such cases, 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 opt to limit the them to just a few ones that are of similar style. Most browsers accept a limited number of safe fonts that designers use mainly to avoid complications. Font downloading process was included later in the fonts module CSS3 and since then it has been used in Opera 10, Mozilla Firefox 3.5 and Safari 3.1. This enhanced method has subsequently become popular with increasing interest in the implementation 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 into several 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 that conforms to standards may relate to the accurate layout of pages for organized coded elements as well as readability.

07


Types of Websites

The visual appearance and design of a website depends on the function of a site. There are a number of categorized web designs that are used to build and describe sites. Even though the possible types of websites may appear endless, these can be grouped safely in a couple of general ways. Starting from the abstract there are various visual categorizations also.

• Abstract Categorizations

A site can be of two types: task focused and information focused. This distinction sometimes can be 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 of allowing the users to search, browse or find the information presented. Websites that are applications or task oriented allow users to interact with information and accomplish tasks like online retailing 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 concept are becoming more common. As the line between application and information blurs, a general static document-oriented site may be converted into full-blown software applications. This abstract grouping also suggests the transition from more print or document oriented websites to more interactive programmatic sites. With the onset of sophistication in the field of web development and 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 the web, websites may also be grouped based upon an organization that is running or somehow paying for a particular site. Within such categorization there are some major groupings.

1. Informational websites: The sites that provide information regarding a specific organization or subject fall into this category. These are also known as the brochure ware sites. These are found to be most commonly used websites on the Internet and over time these sites take on aspects of other site categories. Commercial sites are mostly informational 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 products and services. Transactional site facilitates commerce by enhancing businesses network with target customers all across the world. The primary advantage of transactional

08


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

3. Community websites: These sites are intended to provide transaction-related facilities or information, 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 encourage interaction between like minded visitors or individuals. Educational sites fall into this category.

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

5. Personal websites: Among various other classifications or types of websites there are experimental or artistic sites, personal web spaces like blogs or web logs as well as sites which 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 about businesses. Now you can easily promote your industry by reaching out to literally millions of people with the help of just one website. With your online catalog or brochure, you can show anyone who looks for your website, photos, descriptions and various other related details 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 web development is concerned. In the year 1996, the first competitive browser of Microsoft was released in 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 useful things about professional website designing. Right here in this book you will get to know about the fundamentals of everything important relating to web design, optimized graphic files, CSS layouts and so much more. This thoroughly revised comprehensive edition offers lessons on website design programs according to professional standards and modern design practices.

Conclusion

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]: www.webguru-india.com


...designing imaginations across boundaries

Fundamental of-web design-trends-20142

Education

Transcript of Fundamental of-web design-trends-20142