1. Development of Internet Applications WebDesign9
Development of Internet Applications WebDesign
Ing. Jan Janoušek

2. 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.

3. 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.

4. 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)

5. Wireframe

6. 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

8. 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

9. 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

10. 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?

11. Use of images and icons

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

13. Tools for development Design Presenting and review
Presenting and review

14. 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

15. 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“

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

17. 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)

18. 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:

19. 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:

20. 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

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

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

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

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

25. 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