This document discusses trends in web interface design and elements of effective design. It outlines trends like longer scrolling sites, storytelling/interaction, simplicity, and large typography. It also covers web components like responsive design for multiple screen resolutions. The document details elements of good design like simplicity, consistency, identity, useful content, and navigation. It discusses site structure models and layout. Finally, it provides an assignment to design an e-commerce site using tools like Photoshop.

1. Web Interface
Human Computer Interaction
By Yaowaluck Promdee, Sumonta Kasemvilas

2. Index
• Trend Web Design Interface
• Web Component
• Element of Design
• Site Structure
• Layout
• Fonts
• Color

3. Trends
Web Interface Design

5. Web Design Trends in 2015
o Longer scrolling sites
o Storytelling and interaction
o Absence of large header background images
o Removing non-essential design elements in favor of simplicity
o Fix width centered site layout
o Professional high quality custom photography
o Flyout/slideout app-like menus
o Hidden main menus
o Very large typography
o Performance and speed
http://thenextweb.com/dd/2015/01/02/10-web-design-trends-can-expect-see-2015/12/

6. oLonger scrolling sites

7. oStorytelling and interaction
http://www.spaceneedle.com/home/

8. oAbsence of large header background images
http://newwavecompany.co/
Very large typography

9. o Removing non-essential design elements in
favor of simplicity

10. o Fix width centered site layout
http://michelemazzucco.it/

11. oProfessional high quality custom photography

12. o Hidden main menus
http://brianhoffdesign.com/

13. Responsive Design:

14. Designing for Multiple Screen
Resolutions
• Screen resolution is the width and height of the
computer screen in pixels
• Most monitors have many screen resolutions to
choose from
• This is a variable you cannot control
• The current most common resolutions are 1024 x
768 and 1280 x 1024
• Wide-screen resolutions such as 1366 x 768 and
1200 x 800 are popular as well

16. Web Components

17. The elements of Design
1. Simplicity
2. Consistency
3. Identity
4. Useful Content
5. User-Friendly Navigation
6. Visual Appeal
7. Compatibility
8. Design Stability
9. Function Stability

18. Site Structure Design
Site Structure
1. Content-based Structure
2. User-based Structure

19. Model of the site structure
1. Sequence
2. Hierarchy
3. Combination

20. Layout

22. Font

24. Color

25. Assignment
Design eCommerce website from information provided using
Photoshop or any tools
- Homepage
- About
- Product
- Contact
Uploading file to lms >> LAB_ID_SEC.zip <<