GD202 Week 8
Visual Design for Web Applications
GD202 Interactive Design I
- Learn how to create a style tile. Explore color theory, visual design, composition, for web applications.
- Digital Typography.
- Explore font pairings for the web in google fonts, legibility on screens, typography rules for web applications.
- Assign Project 6: Style Tile Variations.
A Guide to Visual Design
Visual Design Resources for Web Applications
by Miranda Ting
Design Inspiration Design School
Learn Design - Canva's Learn Platform has everything you need to create simply great graphics…
Canva's Learn Platform has everything you need to design graphics for your social media, business, homework or just for…
Paletton - The Color Scheme Designer
In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly…
Adobe Color CC
Create color schemes with the color wheel or browse thousands of color combinations from the Color community.
Whether you are looking for inspiration for projects, or seeking a little mental vacation in your day, welcome to…
Color Trends + Palettes :: COLOURlovers
COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns…
Pictaculous - A Color Palette Generator (courtesy of MailChimp)
Generate a color palette from PNG, JPG or GIF image/photo. Receive color suggestions, download Photoshop swatches…
ColorZilla for Chrome - Eyedropper, Color Picker and much more
Advanced Eyedropper, Color Picker, Gradient Generator and more
Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!
As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When…
Web Typography Resources
Font Pair - Helps you pair Google Fonts together
Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
Beautiful web type - the best typefaces from the Google web fonts directory
A showcase of the best typefaces from the Google web fonts directory.
The 40 Best Google Fonts-A Curated Collection for 2018 · Typewolf
A curated collection of the absolute best free fonts available on Google Fonts in 2018-open-source and 100% free for…
Typ.io: Fonts that go together
Here at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites to…
The Web Font Combinator | A Web Typography Tool
The Web Font Combinator was built for the classic reason of "scratching my own itch". I am a web designer/front end…
10 Web Typography Rules Every Designer Should Know | Webdesigner Depot
When someone visits a website you've designed, the odds are that they don't care much about the colors, images or…
A More Modern Scale for Web Typography - Typecast
Try this new relative typographic scale to avoid gangly headers, undersized body text, and odd looking spacing as your…
The Good, The Bad And The Great Examples Of Web Typography
Choosing typefaces is an integral part of every web design project. With thousands of typefaces available from hosting…
Web Typography Course
As web features barrel ahead, web typography advances with it. We now have more control over type than ever before…
Web Type For Designers
Design educators are tasked with keeping up in the industry, which is not always easy, especially when it comes to…
A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution…
Mood Boards: Dressing For Different Occasions | Viget
For designers at Viget, Mood Boards are consistently among our favorite topics to discuss and deliverables to create. I…
Style Tiles and How They Work
How do you involve your client in a successful design process? Many of our processes date back to print design and…
Samantha Warren's Web Design Blog | Design ~ Web Typography ~ Inspiration
A few years ago, Jim and I attended an open house at an architecture and interior design studio near our home in…
Style Tiles: An Alternative to Full Design Comps
If you're like me, you'll agree that the initial design phase of a project can be time consuming, fraught with…
Samantha Toy Warren | The Washington Examiner
The personal site of Samantha Toy Warren. This is her project for The Washington Examiner.
Graphic Standards and Style Guides
Once upon a time, there were graphic standards manuals. Interbrand is a company that specializes in international corporate brands, gathering data to compare the best global brands.
However, not everyone has the resources of Apple, Google, Microsoft and Coca-Cola to develop comprehensive graphic standards and identity systems.
BBC Global Experience Language
The BBC has created a site dedicated to communicating the importance of consistent application of brand design, focusing on three essential components: grid, iconography and typography.
BBC GEL | Foundations Index
This guideline explains how to use typography across BBC online. It covers initial guidance for using BBC Reith and…
UBC Brand Toolkit
Closer to home, Matt Warburton, Design Director at UBC, has been guiding the process of developing the brand for the university.
The UBC Brand
Here you will find resources that will help you confidently communicate on-brand and present your idea - whether in…
Applied Arts Mag - Awards Winners - brand.ubc.ca
Applied Arts is Canada's premier magazine of visual communications. Since 1986, we have delivered gorgeous imagery…
The UFV brand has been going through some changes. The new home page reflects the work that has been progressing to give the university the ability to better represent the brand design with a responsive web design.
University of the Fraser Valley (UFV.ca)
Among Canadian universities, the University of the Fraser Valley in British Columbia, Canada, stands out for high…
Brand identity, University Relations
UFV is all about nurturing students and helping them grow to reach their full potential. Our colours represent growth…
Even a basic style guide is a useful tool to guide a team to maintain the integrity and consistency of a brand identity on the web and across all media.
Website Style Guide Resources
A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries
How To Design Style Guides For Brands And Websites
A website is never done.** Everyone has worked on a project that changed so much after it launched that they no longer…
Design Patterns & Coding Standards | Domain7
For a team intranet for Domain7, I proposed developing a style guide and a set of reusable design patterns to guide our process.
Online Exercise: Web Typography
This week’s assignment:
Home | Professional Web Typography by Donny Truong
"If you're looking for one comprehensive guide that covers all the essentials of professional typography, check out…
Read through the following chapters in “Professional Web Typography”
- A Brief History of Web Typography
- Selecting Body Text
- Picking Type for UI
- Conclusion (More Resources Available)