Development of Internet Applications WebDesign Ing. Jan Janoušek 9

What is WebDesign -Webdesign is interbanch discipline, which use insights from visual communication, interaction, design, psychology, marketing, branding, copywriting and many others. The goal of webdesign is create functional web page or web application.

Webdesign -Webdesign is not just about design. -The label webdesign often covers a variety of activities (necessary to meet the needs and preparation for implementation) -Requirements specification – who is an user, how the user uses a web -The general solution design – needs, design of technical solution, specification of plans, price -Exploration and discovery – analysis of competitors, design manual, definition of content and structure -Design – wireframes - mockups - prototype -Presentation and revision – presentation, feedback -Implementation of design – output for next phases -Next phases: implementation, content creation, testing, deploying, maintanance, update, propagation, etc.

Webdesign lifecycle

Wireframe – mockup - prototype -Wireframe -Schematic representation of the interface in different level of details. -Overall concept. -Mockup -Fully visual model designed for presenting and commenting -Focus on visual look and graphical details. -Prototypy -Fully visual and functional model designed for testing. -Focus on the user interaction and functionality. -Functionality simulation in a real environment (web browser)

User eXperience (UX) -A person's perceptions and responses that result from the use or anticipated use of a product, system or service. -User's emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use. -Usability / Usability Testing

User eXperience - tips -Don't make people think. -Completed actions - Give immediate and clear feedback of successful user's actions. -Waiting times - If your users have to wait ages for the page to load, at least show them a loader, if take longer why don't you try something more entertaining? -UI elements - Reuse elements and patterns. -Use of images and icons -Errors - Be clear and specific on what and where user's error is. -Keep it simple

Tools for development -Design Presenting and review - -

Trends in webdesign -The content in the first place -Responsive design/layout -Support for retina graphics – 2x softer with same resolution) -Fixed / floating items -Flat design, material design -High resolution photo / background -Transparency, shading, animation -Infinite scrolling – lazy loading -Typography -Animation panels -Single-webpages

The content in the first place -The content determines design -An information dedicated to a specific group of users is more effective than „cool“ design without informations. -The focus on „Call To Action“

Responsive design/layout -Not only about appearance, but mainly about offering content and functions queries -Example:

Support for soft graphics -Physically 2x more pixels = softer graphics with the same resolution -Bitmap graphic should be delivered with higher resolution or vector graphics should be used. -Apple for picture with 2x resolution -CSS3 media queries - device-pixel-ratio (2)

Fixed / floating items -Static placement of items even when scrolling content (headers, menu, buttons) -Dynamic placement of floating items with regard to the position when scrolling (commercials, graphics items) -CSS position: fixed, JavaScript pageYOffset -Example: ndex.html comunitatii/ ndex.html comunitatii/

Flat design / material design -Using basic shapes in simple style. -Inspiration from Modern UI/Metro UI – Windows. -Effective implementation of the „grid layout“. -Making full use of the browser width. -CSS floating, round-corners. -Examples:

High resolution photos/background -High resolution photos uses for backgrounds (dynamic adjustment of the resolution) -Often used not just like visual element, but like main content.(portfolio, interactions with an user) -CSS3 background, HTML 5 video element

Transparency, shadowing, animations, … -There exist many solutions (PNG, Flash). For effective and simple way use CSS 3 -- CSS3 rgba, box-shadow, transition, animation, …

Infinite scrolling -The user friendly way how offers large amount opf the data in accordance with the functionality. -JavaScript (scrolling, DOM), AJAX -Example:

Typography -Uses own fonts for text content of the web. -Focused on typography and way how to present informations -CSS3 font-face

Animated panels -The animation of the specified part of the page (usually slider) with respect to users interaction. -CSS3, JavaScript

Single-webpage design -All website content on the single page -Design sections within „long“ page, often with animation of transition between parts of single-webpage. -HTML anchor, JavaScript