June 30, 12 a concept is appropriate if is independent of other concepts or when its relationship to other concepts is unambiguous. a concept is appropriate if it lives in the application domain. a concept is appropriate if it supports the creation of appropriate concepts.
you name a concept you change the concept into whatever concept that name invokes in another person. Any concept worth creating is a concept worth naming well. Take the time to name it right, or it will be misunderstood and misused. This is the source of most software defects. This is hard for designers because they speak a visual language. they can concisely convey concepts visually for which there is no concise terminology. It’s ok to make up words.
• Typography • Background • Foreground • Spacers • Interaction States • Medias • Height • Differences OK Saturday, June 30, 12 We must embrace these fundamentals. Our concepts cannot fight them or they are not appropriate to our application.
a page. CSS3 will bring alternate layout methods. • Page layouts - Defines how primary elements adhere to the grid and respond. Blog Post Saturday, June 30, 12
elements are styled. • Vertical Rhythm • There is no default typography. Saturday, June 30, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.
elements are styled. • Vertical Rhythm • There is no default typography. Opt-in To Typography Saturday, June 30, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.
elements are styled. • Vertical Rhythm • There is no default typography. Saturday, June 30, 12 opt-in typography is not the industry standard approach. The industry is mostly wrong about this. Typographic inheritance is annoying.
except for positioned content, You almost never want to set the hight of anything that has a variable width or variable content (hint: that’s almost everything)
is a pipe dream. Embrace progressive enhancement. Krys: tell designers this is ok. do you have some tips for how to design with enhancement/ degredation in mind?
name. Unfortunately, designers are not often good at naming things. Saturday, June 30, 12 Coders have to name everything they make, but designers don’t. Naming is a skill that must be developed. You have to learn to explain your intuition and instinct.
Change the design Wait: Don’t name it Saturday, June 30, 12 Sometimes you cannot find a good name, or you find some use of a design that doesn’t match the current name.
a design change just because a name doesn’t match. Intuition is a tricky thing, if you trust your designer, trust their gut feeling. If you don’t trust your designer... :(
traditionally are a document but no one refers to them so what’s the point consistency is the point - so apply the principals of usability and make a styleguide people can use make it in code. This is an actual screenshot of a page of our styleguide. But where do you start? It's better to show than to tell. Make a living styleguide for documentation and prototyping. This is your design catalog. Teach the design, don't just exemplify it.
pages in terms of areas, elements, and relationships. Have to break that down fundamentally and think of the building blocks of your elements. Add to traditional design mindset: Interchangeable elements Start with your content inventory. Then look carefully at the elements that live around and within your content.
pages in terms of areas, elements, and relationships. Have to break that down fundamentally and think of the building blocks of your elements. Add to traditional design mindset: Interchangeable elements Start with your content inventory. Then look carefully at the elements that live around and within your content.
in terms of areas, elements, and relationships. Have to break that down fundamentally and think of the building blocks of your elements. Add to traditional design mindset: Interchangeable elements Start with your content inventory. Then look carefully at the elements that live around and within your content.
How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
12 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
and high-level concepts, not style primitives. Saturday, June 30, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.
and high-level concepts, not style primitives. Saturday, June 30, 12 Isn’t this simpler to understand if you’re reading the code? We read code more often than we write it. Be nice to your future self.
Presentational Concepts Concept App Styles Foundation Classes Mixin Library Saturday, June 30, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
Presentational Concepts Concept App Styles Foundation Classes Mixin Library Saturday, June 30, 12 This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear in the foundation.
this and suddenly your design process and development process start to look alike. Hell, if you think that way, suddenly you start being able to design IN CODE. (I don’t think that way)
work Saturday, June 30, 12 1-2 days of training to become capable. 3-4 weeks to be competent. It will take > 1 month for an experienced team to build a comprehensive styleguide. These styles will be used by a team. For the love of god, don't do this for your blog or a marketing/promotional site.