More Recent Reading Updates
General: Please listen to this podcast:
The Seduction of UX > Etsy
Listened to this already and posted about it
Designing a responsive Grid in 2016
As tech develops, design should too
At first, they designed to ios, which had pros and cons. Like if the frame is ever in between the largest and smallest, the design might break and things weren’t always relative
In subsequent designs, they saw the benefit of *nested grids*
Content first--keep this in mind during design
Some key pieces of advice to keep in mind
“(1) Design at the lowest threshold of each breakpoint range. If you design at the upward threshold of your breakpoint range, it is highly likely that your design decisions will break.
(2) Test 3–5 key layouts by wireframing at your proposed grid at a bunch of screen sizes. It’s easy to experiment and it will help you find pitfalls early.
(3) More complexity equals bigger scope which equals longer timeline. And time is money. More breakpoints, more problems. This is a pretty simple concept that is easily forgotten by clients and creative alike. Keep it as simple as you can. Did you know that Lexus.com only has two main ranges: small screens and large screens? And that site is beautiful.”
Includes a helpful glossary “in case you are like WTF”
How to design a grid system
Ratios and complex grid systems
Grid systems for web design: Part 1
Grid systems for web design: Part 2 Fixed
Grid systems for web design: Part 3 Fluid
Could not find the pages tho :/
Grids lend themselves to make order out of chaos
(Reminds me of the Oulipo where constraints can foster creativity)
Choosing base units for starters
Check out other grid-based sites to get ideas and keep track of things
Grids arrange content and communicate consistency
You can break the rules, but it’s important to understand them first
Many advantages to using a grid-both in developmental phases and in managing content later on
Grid = you can use proportions
Some disadvantages include rules/constraints and difficulty
“Set an overlay of your grid onto your design.
Create some guides to help you.
Try to work with constraints and restrictions.
Pay attention to your spacing.”
Assignments and exercises to keep things fresh
designing with grid based approach
“solid visual and structural balance of web-sites”
Aggregated list of “things you didn’t know” from various articles and sites
List of resources, tools, and tutorials
Articles, tutorials, and resources set up in grid
Really effective way of communicating information
Responsive design & the Fluid grid system:
Adapt, respond, and overcome
Understanding responsive web design
Similarly organized in grid fashion, very effective collection of articles
“Adaptive(Multiple Fixed Width Layouts) or Responsive(Multiple Fluid Grid Layouts)”
It’s an industry standard at this point--like an expectation that everyone is doing it
“Things to Consider: Time & Money, Older Browsers, Performance, Content, Website vs. Web App, Design/Development Process”
“How? ‘Stop Thinking in Pages. Start Thinking in Systems.’- Jeremy Keith ”
The Fluid Grid in Responsive Design
What is a Fluid Grid Layout?
Dynamic systems that respond to environments
Web Design Using Grids: Tools and Inspiration
“Grids are one of the smallest differences between good and great design.”
DiscountHotels – Design a Modern Business Website
Trendy Web Designs From Deviantart
“50 splendid and trendy web designs.”
Understanding Visual Hierarchy
Design = visual communication
It’s really relevant to web designers
An exercise to test visual hierarchy
“List the key information points that visitors are likely seeking.
Assign values (1-10) according to their importance to the average visitor.
Now, look at the actual design again.
Assign values (1-10) according to the actual visual importance as you see it in the live design.
Consider: Does the expected importance match up with the actual designed importance?”
Principles of Visual Hierarchy
Visual hierarchy as it relates to the goals of the service/website
The design school guide to visual hierarchy
“01. Use Size to Enhance (or Reduce) Visibility”
“02. Color and Contrast: Direct Viewers’ Attention”
“03. Typographic Hierarchy: Start With 3 Levels to Organize Your Design”
“04. Fonts: Choose Typeface Categories & Styles Carefully”
“05. Spacing: Give Your Layout Balance, Flow, and Focus”
“06. Composition: Give Your Design Structure”
Testing your visual hierarchy...
Aesthetics: Mood board and visual concepts TOOLS & TIPS:
Color schemes, inspirations and tools:
Look at Adobe Kuler or Coolers Or palettes catalogue like color scheme designer
Design patterns & inspirations: (colors/directions/moodboards/type treatments/ etc)
Pinterest : moodboard search tool
Dribbble : examples of moodboards
Type and font examples and resources on:
https://www.google.com/fonts
http://www.fontsquirrel.com/
