Add canonical design trail, a web design map and combine the HTML and CSS maps #78

Merged
merged 1 commit into from Nov 27, 2012

Conversation

Projects
None yet
5 participants
Owner

kylefiedler commented Nov 14, 2012

  • Design trail map is meant as a place to start learning about design.
  • Web design is meant to include some design and theory aspects for the web that wouldn't normally be accommodated with just HTML & CSS.
  • The resources for HTML and CSS over lap so much that this seemed to make more sense.

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/design.json
@@ -0,0 +1,68 @@
+{
+ "name": "Design",
+ "description": "Visualy commuicate a message or action with text, images, and shapes.",
@kaishin

kaishin Nov 14, 2012

"Visually communicate"

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/design.json
+ "name": "First learn design basics: Visual Principles, Grid Systems, Typography and Color",
+ "resources": [
+ {
+ "title": "Read Visual Grammar for an introduction to visual principles of design",
+ "uri": "http://amzn.to/visual-grammar"
+ },
+ {
+ "title": "Read Grid Systems: Principles of Organizing Type for an introduction to grid systems",
+ "uri": "http://amzn.to/grid-systems-principles"
+ },
+ {
+ "title": "Read Thinking with Type for an introduction to Typography",
+ "uri": "http://amzn.to/thinking-with-type"
+ },
+ {
+ "title": "Read Understanding Color: An Introduction for Designers for an inroduction to Color theory",
@kaishin

kaishin Nov 14, 2012

Can we visually distinguish book titles (quotes)? This one in particular is confusing.

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/design.json
+ "title": "Read Grid Systems: Principles of Organizing Type for an introduction to grid systems",
+ "uri": "http://amzn.to/grid-systems-principles"
+ },
+ {
+ "title": "Read Thinking with Type for an introduction to Typography",
+ "uri": "http://amzn.to/thinking-with-type"
+ },
+ {
+ "title": "Read Understanding Color: An Introduction for Designers for an inroduction to Color theory",
+ "uri": "http://amzn.com/0470381353"
+ }
+ ],
+ "validations": [
+ "Have a basic understanding of visual principles",
+ "Use visual priciples in your design",
+ "Communicate visual design priciples in your work and others",

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/design.json
+ "uri": "http://amzn.to/thinking-with-type"
+ },
+ {
+ "title": "Read Understanding Color: An Introduction for Designers for an inroduction to Color theory",
+ "uri": "http://amzn.com/0470381353"
+ }
+ ],
+ "validations": [
+ "Have a basic understanding of visual principles",
+ "Use visual priciples in your design",
+ "Communicate visual design priciples in your work and others",
+ "Create and use a simple grid within your work",
+ "Maintain a clear hierarchy within your work",
+ "Elements in your design are aligned to the grid and have relationships to the other elements in the design",
+ "Are able to properly set type within your work",
+ "Are able to choose a adequate typeface for the message in your design",

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/html-css.json
@@ -0,0 +1,135 @@
+{
+ "name": "HTML & CSS",
+ "description": "HTML is the markup language for displaying web pages and other information that can be displayed in a web browser. CSS is a language used for describing the the look and formatting of HTML. Together the form the foundation of the web."
@kaishin

kaishin Nov 14, 2012

"the --the-- look and formatting of HTML"
"Together they form"

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/html-css.json
+ "name": "Dig deeper into CSS3",
+ "references": [
+ {
+ "title": "CSS3 for Web Designers",
+ "uri": "http://www.abookapart.com/products/css3-for-web-designers"
+ },
+ {
+ "title": "Refer to CSS3.info",
+ "uri": "http://www.css3.info/"
+ }
+ ],
+ "validations": [
+ "Can apply a box shadow, rounded corners, and text shadow",
+ "Can use RGBa, HSL, HSLa, and opacity",
+ "Know trasitsions and animations and where to apply them",
+ "Know what vendor prefixes are why they are used and when to use them",
@kaishin

kaishin Nov 14, 2012

"Know what vendor prefixes are, why they are used"

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/web-design.json
@@ -0,0 +1,70 @@
+{
+ "name": "Web Design",
+ "description": "Visualy commuicate a message or action with text, images, and shapes through the World Wide Web.",
@kaishin

kaishin Nov 14, 2012

"Visually Communicate"

@kaishin kaishin commented on an outdated diff Nov 14, 2012

trails/web-design.json
+ },
+ {
+ "title": "Skim through Designing With Web Standards",
+ "uri": "http://amzn.com/0321344758",
+ },
+ {
+ "title": "Read Understanding Web Design"
+ "uri": "http://www.alistapart.com/articles/understandingwebdesign/"
+ }
+ ],
+ "validations": [
+ "Apply basic design priciples to the web.",
+ "Create hierarchy within the design and type",
+ "Design a layout that is flexible and changes based on screen size",
+ "Understand the challenges and differences for designing for the web",
+ "Understand what goes into building an HTML page ith CSS.",
Contributor

adarsh commented Nov 23, 2012

@kylefiedler I will add this guideline to the README.md, but we'd have to remove the corresponding https://learn.thoughtbot.com/css if we remove the css trail.

/cc @calebthompson

Owner

kylefiedler commented Nov 23, 2012

I don't think we should remove that. It should just now point to the HTML & CSS page.

@adarsh adarsh commented on the diff Nov 23, 2012

trails/html-css.json
@@ -0,0 +1,135 @@
+{
+ "name": "HTML & CSS",
+ "description": "HTML is the markup language for displaying web pages and other information that can be displayed in a web browser. CSS is a language used for describing the look and formatting of HTML. Together they form the foundation of the web."
@adarsh

adarsh Nov 23, 2012

Contributor

Needs a comma after this line.

Picked it up by validating JSON files using http://jsonlint.com.

@adarsh adarsh commented on the diff Nov 23, 2012

trails/visual-principles.json
"uri": "http://amzn.to/universal-principles"
- },
+ }
+ ],
+ "validations": [
+ "Intentionally use visual design principles in your design.",
+ "Intentionally break visual design principles in your design.",
+ "Use the vocabulary of visual design principles when articulating the reasons for your design and when critiquing teammates' designs.",
+ "Point out what visual principles, in any medium, that are being used in a design and why they are helping the design be successful or unsuccessful"
+ ]
+ }
@adarsh

adarsh Nov 23, 2012

Contributor

Comma needed after this line.

@adarsh adarsh commented on an outdated diff Nov 23, 2012

trails/web-design.json
+ "name": "Web Design",
+ "description": "Visually communicate a message or action with text, images, and shapes through the World Wide Web.",
+ "prerequisites": [
+ "design",
+ "visual principles",
+ "grids",
+ "typography"
+ ],
+ "steps": [
+ {
+ "name": "First learn visual design",
+ "resources": [
+ {
+ "title": "Visual Design on Learn",
+ "uri": "https://learn.thoughtbot.com/design"
+ },
@adarsh

adarsh Nov 23, 2012

Contributor

Comma unnecessary here (no second element inside square brackets)

Contributor

adarsh commented Nov 23, 2012

Good to merge after some JSON syntax fixes. Please lint beforehand using http://jsonlint.com.

Also, please remove
https://learn.thoughtbot.com/html
https://learn.thoughtbot.com/css

and add
https://learn.thoughtbot.com/design

Owner

kylefiedler commented Nov 23, 2012

I pushed fixes for those and changed the jsonlink link in the contributing to point to the site not the repo. Not sure what you mean by this:

Also, please remove
https://learn.thoughtbot.com/html
https://learn.thoughtbot.com/css

and add
https://learn.thoughtbot.com/design

Contributor

calebthompson commented Nov 25, 2012

@kylefiedler, that's for me I think. @adarshpandit I'll take care of it tomorrow morning.

Contributor

calebthompson commented Nov 26, 2012

Hmm. Adarsh, I can't change the learn site until this branch is pushed.

We should add pages for each of the new trails and certainly remove the ones that aren't around anymore.

Looks like html, css, and design-principles are removed, and we should add design, html-css, visual-principles, and web-design.

/cc @cpytel

Contributor

adarsh commented Nov 27, 2012

@calebthompson Let's coordinate doing both of these tomorrow AM around the same time.

I'll open an issue to discuss doing this dynamically in the future on the learn repo.

Owner

cpytel commented Nov 27, 2012

Please don't use github issues to discuss Learn, we use Trajectory.

On Nov 26, 2012, at 9:49 PM, Adarsh Pandit notifications@github.com wrote:

@calebthompson Let's coordinate doing both of these tomorrow AM around the same time.

I'll open an issue to discuss doing this dynamically in the future on the learn repo.


Reply to this email directly or view it on GitHub.


Chad Pytel, Founder and CEO
thoughtbot, inc.
t: 617-482-1300 x113
f: 866-217-5992
http://www.thoughtbot.com
http://www.twitter.com/thoughtbot

Contributor

adarsh commented Nov 27, 2012

Yep - noticed GH issues were closed. Added to Trajectory.

On Mon, Nov 26, 2012 at 9:49 PM, Chad Pytel notifications@github.comwrote:

Please don't use github issues to discuss Learn, we use Trajectory.

On Nov 26, 2012, at 9:49 PM, Adarsh Pandit notifications@github.com
wrote:

@calebthompson Let's coordinate doing both of these tomorrow AM around
the same time.

I'll open an issue to discuss doing this dynamically in the future on
the learn repo.


Reply to this email directly or view it on GitHub.


Chad Pytel, Founder and CEO
thoughtbot, inc.
t: 617-482-1300 x113
f: 866-217-5992
http://www.thoughtbot.com
http://www.twitter.com/thoughtbot


Reply to this email directly or view it on GitHubhttps://github.com/thoughtbot/trail-map/pull/78#issuecomment-10744328.

@adarshp http://twitter.com/adarshp
developer at thoughtbot, inc http://www.thoughtbot.com.
313.454.1515 (m)

Kyle Fiedler Add canonical design trail
Start to add main design trails and edit others
Combine html and css trails
Polish up design and web design maps
Add Reda's fixes and user experience
Add requirements for webdesign trail
Revisit visual principles
Use real jsonlint link not link to its repo
43bf43b

@adarsh adarsh merged commit 43bf43b into master Nov 27, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment