Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardized code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.

Web designers use a variety of different tools depending on what part of the production process they are involved in. These tools are updated over time by newer standards and software but the principles behind them remain the same. Web graphic designers use vector and raster graphics packages to create web-formatted imagery or design prototypes. Technologies used to create websites include standardized mark-up, which can be hand-coded or generated by WYSIWYG editing software. There is also proprietary software based on plug-ins that bypasses the client’s browser versions. These are often WYSIWYG but with the option of using the software’s scripting language. Search engine optimization tools may be used to check search engine ranking and suggest improvements.

User understanding of the content of a website often depends on user understanding of how the website works. This is part of the user experience design. User experience is related to layout, clear instructions and labeling (navigation) on a website. How well a user understands how they can interact on a site may also depend on the interactive design of the site. If a user perceives the usefulness of the website, they are more likely to continue using it. Users who are skilled and well versed with website use may find a more unique, yet less intuitive or less user-friendly website interface useful none-the-less. Much of the user experience design and interactive design are considered in the user interface design. However, users with less experience are less likely to see the advantages or usefulness of a less intuitive website interface. This drives the trend for a more universal user experience and ease of access to accommodate as many users as possible regardless of user skill.

Web Design Examples

i3D logo

The creation of a mobile application prototype documentation that includes the architecture and design phases. i3D is the ultimate 3D photographic image creator that manipulates your iSight Camera functions to the max and beyond. With its landscape view, it creates stunning panoramic photographs in sharp HDR. i3D is a highly creative photographic imaging tool for the discerning photographer that wants to take their photography to the next dimension. i3D rationale

The i3D application is a 3D photographic imaging tool for the iPhone, that creates 3D digital photographs. In accordance to the iOS Human Interface Guidelines, the application is launched in its supported orientation (landscape), this view supports superior depth for 3D imagery, and is more acceptable when viewed on both television screens and computer monitors. The i3D is a purely internet image device for viewing 3D media. Though prints can be made from images, they will appear as 2D prints on standard paper from standard printing devices. i3D function

The development of archetypal users (personas) to direct the vision and design of the iPhone app “i3D,” the 3D pictorial image creator using a multi-layered single image. The target audience in relation to numbers is the 2.66% share of the app market that placed “Photo- & Video” apps into the 14th most popular position on the 2013 app list statistic conducted by “Statisca.” The demographics of that target audience stretch to all users of the camera function within their smartphones - especially those inclined to buy and use photo apps. i3D objective

(To view the application's Web landing page, please click on the logo image to the left).






Wedding Belles logo

The Web site will open with a home page that will navigate to the individual photographers and their styles (traditional and journalistic). There will be pages that include samples of their work (javascript slideshows), and a contact page where potential customers can ask questions, make bookings, or request visitations. For present clients, there will be a registration page where each client can individually log into and view the full collection of their recent wedding ceremony. The login information will be initiated by the photographer, via the database, and will comprise of a login name and password that will be forwarded to the client. This will allow for them, their friends and family to make orders for reprints of various numbers and sizes, mounted and/or framed etc.

The development of this web site will be approached from a designer with a wealth of experience in both the Web Design and Photographic genres. The creative flow will be a match with the clients needs in mind and the technical possibilities that a dynamic Web site can offer. The use of scripting languages such as PHP, MySQL, and database driven content, should provide for a fast, efficient, and reliable dynamic Web site that will enhance both the Photographers and Designers professionalism and credibility. Documentation (site proposal) can be downloaded by clicking on the following link. Wedding Belles proposal

(To view the web site, please click on the logo image to the left).






PSA logo
Concept

Aristotle and Plato greatly recognized the importance of play and leisure as a foundation to learning, a philosophy that is just as, if not more relevant in this present day and age. The project will be a public service announcement (PSA) targeted at urban stress, and the importance of "time out." This involves the busy lifestyle that many people (young and old) have become accustomed to in a "all work and no play" environment. While it is understood that the present economic climate has had a negative effect on living standards, and many working people naturally think they do not have the time or capacity for relaxation, this PSA is aimed at stressing the importance of taking/making time for periods of leisure through the use of contrasting scenes of both lifestyles.

(To view the web site, please click on the logo image to the left).

Production

During this course, you will produce a short video production tailored for compressed delivery. You will then compress your video production for a variety of target bandwidths and incorporate your compressed files into interactive authoring projects that demonstrate varying levels of media/project interactivity. Your production should be exactly thirty seconds in length and should employ the information provided in this week’s lecture. You can choose any appropriate topic for your video, but it should fall into one of three categories, commercial, public service announcement (PSA), or artistic expression. Your video should also allow interactivity, which you will implement later in the course. Site storyboards can be downloaded by clicking on the following link. PSA Storyboards

The pre-production planning document should consist of:
• A paragraph describing the general concept for the project and its genre (i.e. commercial, public service announcement (PSA), or artistic expression)
• A paragraph describing the demographic characteristics of the target audience
• Simple storyboards illustrating the general compositions of your shots and the approximate duration of each shot (if the shots encompass movement, please illustrate this movement with text and/or graphics)

Further Web Design Examples

Additional Information

Advanced interactive functions may require plug-ins if not advanced coding language skills. Choosing whether or not to use interactivity that requires plug-ins is a critical decision in user experience design. If the plug-in doesn't come pre-installed with most browsers, there's a risk that the user will have neither the know how or the patience to install a plug-in just to access the content. If the function requires advanced coding language skills, it may be too costly in either time or money to code compared to the amount of enhancement the function will add to the user experience. There's also a risk that advanced interactivity may be incompatible with older browsers or hardware configurations. Publishing a function that doesn't work reliably is potentially worse for the user experience than making no attempt. It depends on the target audience if it's likely to be needed or worth any risks. This Web site does include Flash playback files and Flash movies, this involves using the latest Flash Player (plug-in) in order to view the interactive movie. If your hard drive does not have the latest Flash player embedded on your PC, you may be prompted to download the player from Adobe.com in order to play the movie. Should you choose not to view the movie, you can watch the movie clip from the Web pages link to vimeo.com.