Web Design and UX Styles

ReSEARCH

Website Templates

• The Best Designs - https://www.thebestdesigns.com/
• Theme Forest - http://themeforest.net/

Web Design Software

• Adobe Photoshop
• Sketch for Mac - https://www.sketchapp.com/ - $99
  • better tools for UI design, icon design, and offers pixel+vector support in one program
  • Sketch App Resources - http://www.sketchappsources.com/ - To download free layouts

Articles

• Sketch GUI Kits for Web Design - http://www.hongkiat.com/blog/sketch-gui-kits-web-design/
• 50 Useful Responsive Web Design Tools For Designers - http://www.hongkiat.com/blog/rwd-tools/

Web Design Styles

Material Design (Google)

What is Material Design?

• A Google paper-and-ink inspired visual language
• 3D and Depth Language

Resources for Prototyping Material Design

• Tools
  • Just in Mind - https://www.justinmind.com/ - Wireframe and Prototyping software. Basic Free. Pro is paid.
• Website Examples
  • http://kenyaapps.net/
  • 10 Superb examples of Material Design Websites - http://materialdesignblog.com/10-superb-examples-of-material-design-websites/
  • Top 5 Examples of Material Design on Polymer Sites - http://materialdesignblog.com/top-5-material-design-and-polymer-websites-examples/
• Apps Examples
  • 15 Cool Material Design Examples - http://www.woltbit.com/resources/15-cool-material-design-examples

Flat Design (Microsoft)

What is Flat Design?

• use of bright colors, sharp edges and lack of depth.
• Appeals to minimalism, and visual hierarchy
• White Space is important as with positioning of elements.

Resources for Prototyping Flat Design

• Guides
  • The Beginner's Guide to Flat Design - http://www.creativebloq.com/graphic-design/what-flat-design-3132112
  • UX Pin's E-Book - https://www.uxpin.com/studio/ebooks/web-ui-design-trends-flat-design/ - Evolution of Flat Design
• Tools
  • Sketch - http://www.sketchappsources.com/free-source/303-flat-ui-kit.html - Flat Design UI Kit.

Card Layouts (Pinterest, Spotify, Google)

What are Card Layouts?

• Top design Pattern of 2016
• Onscreen information presented in the form of cards that can be stacked, flipped over to reveal underside, grouped then spread out.
• Non-hierarchical organisation of information and independent of screen or device.
• Facilitates design on responsive sites

Resources for Prototyping Card Layouts

• Use Responsive codes
• Use Templates

Parallax Scrolling

What is Parallax Scrolling?

• Popular in 2015
• Site's foreground moves at a different speed to the background, and tricks the eye into seeing a 3D effect
• Multi-plane animation and multi-directional scrolling
• Design gains depth and foreground pops up, focusing users and creating a sense of narrative progression.
• Useful for CTA Calls to Action and guides users towards next step.

Resources for Prototyping Parallax

• Tools
  • Axure - http://www.axure.com/
  • Adobe Muse -

Illustration

What is Illustration?

• Avoids stock photo and range from specially sketched font, custom vectors, 3D illustrations and illustrated backgrounds.
• Greater control and branding and messaging of the site.
• Can be interactive.
• Use SVG

Resources for Prototyping Parallax

• Tools for Making Illustration
  • Photoshop
  • Illustrator
  • Sketch

References

• 5 Webdesign Trends and how to Prototype them - http://www.creativebloq.com/features/5-web-design-trends-and-how-to-prototype-them

Resources

• 20 Free Responsive html5 Css3 one page templates - http://ninodezign.com/20-free-responsive-html5-css3-onepage-templates/
• Material Design Resources by Webteacher - http://www.webteacher.ws/2014/12/31/resources-material-design/
• Material Design Resources by Design Modo - http://designmodo.com/material-design-resources/
• Material Up - http://www.materialup.com/
• Color Picker: http://www.materialpalette.com/