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

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/graphics. 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 the design – output for next phases Next phases: implementation, content creation, testing, deploying, maintanance, update, propagation, etc.

Wireframe – mockup - prototype 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)

Wireframe

Wireframe – mockup - prototype Fidelity Cost Use General trails Wireframe low $ Documentation, quick communication Sketchy, white & grey, representation of the interface Mockup middle to hight $$ Gethering feedback and getting buy-in from stackholders Static visualisation Prototype $$$ User testing, reusable bounds of the interface Interactive

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

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?

Use of images and icons

Errors Be clear and specific on what and where user's error is.

Tools for development Design Presenting and review http://pencil.evolus.vn/ http://www.hotgloo.com/ http://www.mockflow.com/ http://www.invisionapp.com/tour http://balsamiq.com/products/mockups/ Presenting and review http://www.bounceapp.com/ http://www.influenceapp.com

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 CSS3 @media queries Example: http://foodsense.is/

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 postfix @2x for picture with 2x resolution CSS3 media queries - device-pixel-ratio (2) https://cloud.google.com/console

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: http://wedesignthemes.com/html/restaurant/icecream/index.html http://www.fundatiacomunitaraiasi.ro/programe/cardul-comunitatii/ https://developers.google.com/maps/documentation/javascript/tutorial

Flat design / material design Using basic shapes in simple style. Inspiration from Modern UI/Metro UI – Windows and Android. Effective implementation of the „grid layout“. Making full use of the browser width. CSS floating, round-corners. Examples: https://www.truedigital.co.uk/ http://www.getmdl.io/templates/text-only/index.html

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: https://www.pinterest.com/

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