Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.
Web design is a kind of graphic design intended for development and styling of objects of the Internet’s information environment to provide them with high-end consumer features and aesthetic qualities. The offered definition separates web design from web programming, emphasizing the functional features of a web site, as well as positioning web design as a kind of graphic design.(source: Denis Borodayev. Web site as a Graphic Design Object. Monograph. (Бородаев Д.В. Веб-сайт как объект графического дизайна. Монография. – Х.: Септима ЛТД, 2006. – 288 с. – Библиогр.: с.262-286. ISBN 966-674-026-5)
The process of designing web pages, web sites, web applications or multimedia for the Web may utilize multiple disciplines, such as animation, authoring, communication design, corporate identity, graphic design, human-computer interaction, information architecture, interaction design, marketing, photography, search engine optimization and typography.
- Markup languages (such as HTML, XHTML and XML)
- Style sheet languages (such as CSS and XSL)
- Server-side scripting (such as PHP and ASP)
- Database technologies (such as MySQL and PostgreSQL)
- Multimedia technologies (such as Flash and Silverlight)
Web pages and web sites can be static pages, or can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the end-user, input from the Webmaster or changes in the computing environment (such as the site’s associated database having been modified).
With growing specialization within communication design and information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages and web development for the overall logistics of all web-based services.
Purposing web design is a complex, but essential ongoing activity. Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed, are extremely important.
Web design is similar (in a very simplistic way) to traditional print publishing. Every website is an information display container, just as a book; and every web page is like the page in a book. However, web design uses a framework based on digital code and display technology to construct and maintain an environment to distribute information in multiple formats. Taken to its fullest potential, web design is undoubtedly the most sophisticated and increasingly complex method to support communication in today’s world.
It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Goal setting practices and measurable objectives should be identified to track the progress of the site and determine success.
Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do or feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need or use the content, a list of characteristics common to the users such as:
- Audience Characteristics
- Information Preferences
- Computer Specifications
- Web Experience
Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.
Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience’s needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site’s content ensures that the wants or needs of the target audience and the purpose of the site will be fulfilled.
Compatibility and restrictions
Because of the market share of modern browsers (depending on your target market), the compatibility of your website with the viewers is restricted. For instance, a website that is designed for the majority of websurfers will be limited to the use of valid XHTML 1.0 Strict or older, Cascading Style Sheets Level 1, and 1024×768 display resolution. This is because Internet Explorer is not fully W3C standards compliant with the modularity of XHTML 1.1 and the majority of CSS beyond 1. A target market of more alternative browser (e.g. Firefox, Safari and Opera) users allow for more W3C compliance and thus a greater range of options for a web designer.
Another restriction on webpage design is the use of different Image file formats. The majority of users can support GIF, JPEG, and PNG (with restrictions). Again Internet Explorer is the major restriction here, not fully supporting PNG’s advanced transparency features, resulting in the GIF format still being the most widely used graphic file format for transparent images.
Many website incompatibilities go unnoticed by the designer and unreported by the users. The only way to be certain a website will work on a particular platform is to test it on that platform.
Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.
The first step may involve information architecture in which the content is categorized and the information structure is formulated. The information structure is used to develop a document or visual diagram called a site map. This creates a visual of how the web pages or content will be interconnected, and may help in deciding what content will be placed on what pages.
In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.
Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning, though it can be used for selling ideas to other web design companies.
Adobe Flash (formerly Macromedia Flash) is a multimedia platform originally acquired by Macromedia and currently developed and distributed by Adobe Systems. Since its introduction in 1996, Flash has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, and various web page Flash components, to integrate video into web pages, and more recently, to develop rich Internet applications.
Flash can manipulate vector and raster graphics, and supports bidirectional streaming of audio and video. It contains a scripting language called ActionScript. Several software products, systems, and devices are able to create or display Flash content, including Adobe Flash Player, which is available free for most common web browsers, some mobile phones and for other electronic devices (using Flash Lite). The Adobe Flash Professional multimedia authoring program is used to create content for the Adobe Engagement Platform, such as web applications, games and movies, and content for mobile phones and other embedded devices.
Files in the SWF format, traditionally called “ShockWave Flash” movies, “Flash movies” or “Flash games”, usually have a .swf file extension and may be an object of a web page, strictly “played” in a standalone Flash Player, or incorporated into a Projector, a self-executing Flash movie (with the .exe extension in Microsoft Windows or .hqx for Macintosh). Flash Video files[spec 1] have a .flv file extension and are either used from within .swf files or played through a flv-aware player, such as VLC, or QuickTime and Windows Media Player with external codecs added.
Motion graphics are graphics that use video and/or animation technology to create the illusion of motion or a transforming appearance. These motion graphics are usually combined with audio for use in multimedia projects. Motion graphics are usually displayed via electronic media technology, but may be displayed via manual powered technology (e.g thaumatrope, phenakistoscope, stroboscope, zoetrope, praxinoscope, flip book) as well. The term is useful for distinguishing still graphics from graphics with a transforming appearance over time without over-specifying the form.
Computer generated motion graphics
The term motion graphics originated with video editing in computing, perhaps to keep pace with newer technology. Before computers were widely available, motion graphics were costly and time consuming, limiting their use to only high budget film and TV projects. With the reduced cost of producing motion graphics on a computer, the discipline has seen more widespread use. With the availability of desktop programs such as Adobe After Effects, Discreet Combustion, and Apple Motion, motion graphics have become increasingly accessible.
The term “Motion Graphics” was popularized by Trish and Chris Meyer’s book about the use of Adobe After Effects, titled “Creating Motion Graphics”. This was the beginning of desktop applications which specialized in video production, but were not editing or 3D programs. These new programs collected together special effects, compositing, and color correction toolsets, and primarily came between edit and 3D in the production process. This “in-between” notion of motion graphics and the resulting style of animation is why sometimes it is referred to as 2.5D.
Motion graphics continue to evolve as an art form with the incorporation of sweeping camera paths and 3D elements. Maxon’s CINEMA 4D is known for its ease of use, plugins such as MoGraph and integration with Adobe After Effects. Despite their relative complexity, Autodesk‘s Maya and 3D Studio Max are also widely used for the animation and design of motion graphics. Maya — traditionally used for high-end special effects and character animation — has the advantage of including an extremely robust feature set and wide-ranging user base. 3D Studio Max has many of the advanced features of Maya and uses a node-based particle system generator similar to Cinema 4D‘s Thinking Particles plugin. There are also some other packages in Open Source panorama, which are gaining more features and adepts in order to use in a motion graphics workflow. Blender and its node-editor is becoming more and more powerful.
Many motion graphics animators learn several 3D graphics packages for use according to each programs’ strengths. Although many trends in motion graphics tend to be based on a specific software’s capabilities, the software is only a tool the designer uses while bringing the vision to life.
Lending heavily from techniques such as the Collage or the Pastiche, motion graphics has begun to integrate many traditional animation techniques as well, including stop-motion animation, cell animation or a combination of both.