Design for developers (april 25, 2017)

Design for Developers (
April 2017
http://bit.ly/ﬁrst-website-la

More about Thinkful
We train developers and data
scientists through 1-on-1
mentorship and career prep

About me
• Anna Mendoza
• Designer + Developer
• Work in Design + Digital  
Services as a hybrid
• Co-Founder Curve Design
• Thinkful teacher FEWD + UX  
+ Backend ( full stack! )

Thank you for joining us
HI EVERYBODY!
let’s talk about you ﬁrst

What’s your programming/design background?
• Will today be your ﬁrst time learning about code/
design?
• Been self teaching for 1-3 months?
• Been at this for a couple of years?
• Been at this since you were a kid? ( secret ninja )
Let’s see a show of hands!

What are your Goals?
• Learn how the web works
• Wireframe an Idea
• Advance your HTML & CSS
• Come to practice building
• You want to work ( communicate ) better with designers/
developers
Feel free to share them at the end of the workshop!

What are your Goals?
Rest assured, wherever you came from,
and whatever your trying to do…
We’re here for you tonite!
Ask us some burning questions!

Why start by learning “Frontend”?
A LOT OF PEOPLE START HERE BECAUSE: 
• Its more tangible
• See if working with code is for you
• Get clear & immediate gratiﬁcation
• Discover job opportunities:  
UX / UI Designer 
Frontend Developer 
Content Strategist
• Design is more appealing than hard logic

What is “Frontend” development, anyway?
First, let’s understand the term. 
We all ‘google’ it, shop, read, watch movies, etc…
Every websites we visit is displayed inside a browser window.
That browser is a software application that’s accessing the
internet. And it lives on your computer.
 
Both can be called the ‘client’ in this scenario. 
And they are accessing a service on a ‘server’.

What is “Frontend” development, anyway?
Frontend web development is the practice of developing the
HTML, CSS and JS that people see and interact with directly.
 
That’s why its also known as “client-side development.”
client
client
client

How that relates to what we’re doing today
Today, we’ll be talking about how design and
development interact.

Well, how do they interact?
Designers create content that developers build using
HTML, CSS, and JavaScript.  
In an ideal world, designers would know some frontend and
developers would know some basic design. Why?
This makes collaborating with each other much easier.

Tonight’s project: AGENDA
1. Common design tools
2. Typography and readability
3. Color
4. Design and build our page ( 1 hr. )
• Determine content
• Broadly sketch out sections
• Choose design features
• Build it!
5. HTML & CSS crash course in the index

Common design tools
Modern software has created more design tools than
previously accessible in the past. InVision, Balsamiq,
Sketch, the list goes on!
Every designer has their go-to tool. For most at Thinkful
HQ, it’s Sketch. Why? It’s a good multi-tool app.
With Sketch you can wireframe, prototype, create
original images and design, etc. And it’s also not
subscription-based, so you buy it for life.
But, Sketch is exclusive to Macs 😒

Not ready to make an investment? Try them out.
Sketch, InVision, and Balsamiq all have free trials.
Tonite we’ll be doing it the old-fashioned way: by hand!

Choosing the right font, for the right occasion
Choosing fonts can be like deciding what to wear to an
event. Black tie, business casual, smart casual?
What we mean is, every page has a unique purpose and
the font you choose should match it.

What if The New York Times had chosen Rockwell (20’s
theme party) or even worse, Comic Sans MS (casual wear)

Thankfully there’s the font Times New Roman (readable)

Choosing fonts
Not all font libraries are available on your  
device. You can load fonts with your website,
or use a third-party service to include them.
Free service: Google fonts
Paid service: Typekit
Include in head: <link href="https://
fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">

EX: These are San-Serif Modern Fonts
Google Fonts
Source Sans Pro
If you want a Serif to pair it with: Playfair Display
Typekit
Proxima Nova
Gotham
Avenir
More: https://www.typewolf.com/blog/most-popular-fonts-of-the-year

Color: system defaults
System defaults. Meh, boring.
color: red;
background-color: blue;

Color Patterns are more interesting
Warm
Cool
Neutral

Color: smart defaults
Use black, white, and multiple shades of one color

Color: inspiration is out there
When it comes to choosing color, you have  
inspiration all around you.
Check out the several color schemes below to get some
inspiration on color schemes for your page:
https://designschool.canva.com/blog/website-color-schemes/

Tonight’s project
Design & build an “about me” webpage
— your personal homepage on the internet

Tonight’s project
1. Wireframe / Sketch our page ( 15 min. )
• Determine content
• Broadly sketch out sections
2. Look through different font styles online and select
your favorite (10 min. )
1. Google fonts!
3. Decide on a color scheme ( 15 min. )
4. Build it! Or begin learning HTML/CSS ( 30 min. )

Sample wireframe
A wireframe consists of: 
• Skinny drawings
• Sections of a Page
• Dummy or ﬁller text  
represented as lines
• A Navbar - for all pages
• X-BOXES generally  
represents images / illust.

Sample wireframe: Sitemap
Sitemaps are then created to showcase all the pages of a website,
organized with a hierarchy. Today, we’re building 1 of those pages.

Wireframe exercise for “About Me”
What is the purpose of a wireframe? 
• Lo-ﬁ sketches are meant to get ideas down and get a
rough concept… fast.
• Saves time and money before development
• It focus’s your attention on the structure and content of  
a page without the distraction of design elements, 
like the ‘right’ picture or font. 
• Quickly iterate and test out layouts. Testing a message, 
or we are testing our logic.

Font styles exercise for “About Me”
Using Google Fonts, ﬁnd a new font-style for your page. Save the
export link and family name to include in your HTML & CSS ﬁles.

Color scheme exercise for “About Me”
https://coolors.co/
Play around with the color scheme generator and decide
on a color scheme of your new page.

Build your page!
This is where we’re assuming you have some
experience with HTML & CSS.
If you do, feel free to fork this repository and begin making
changes: codepen.io/danfriedman9/pen/pEOWZA or
create your own using CodePen.io
If you don’t have experience, feel free to begin
working through the HTML & CSS slides at the end of
this presentation.
We’re here to answer any questions you have.

Our Program
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor

Our Mentors
Mentors have, on average, 10+ years of experience

Our Results
Job Titles after GraduationMonths until Employed

Try us out!
Try the program for two
weeks, includes six mentor
sessions - $50
Learn HTML/CSS/JavaScript
Option to continue onto web
development bootcamp
Come talk to me if you’re
interested (or email me at
noel@thinkful.com)

October 2015
Questions?
email me at noel@thinkful.com

Let’s start with HTML
You should have a basic Wireframe of your site,
and now we’re going to build it with HTML.  
 
HTML is a language. Hypertext Markup Language,  
that tags the raw content and determines the structure  
of a webpage.  
 
It's the skeleton of your website.

What does it look like?
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSSDemo</title>
<style></style>
</head>
<body>
<div class="container">
<h1>My background color is black</h1>
<div class="el el-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse.  
Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis  
blanditiis nihil.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse.
Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium  
facilis blanditiis nihil.
</div>
I also have a background image set but the URL is invalid so the background color shows.
</div>
<p>
The following has a background image with lots of transparent areas.
</p>
<div class="el-4"></div>
</div>
</body> 
</html>
let’s look here!

We’ll polish the elements later
We will start with just HTML — then add a Cascading
Style Sheet (CSS) ﬁle to “style” your website.

Getting Started with Codepen
• Normally developers use a text editor
• Codepen lets us write HTML/CSS and see the
results instantly
• Create an account: codepen.io/signup/free
• Skip proﬁle info => Go to create a new “Pen”
• “Fork” this code:
http://codepen.io/anna_curve/pen/mWopeP

First lines of HTML
<html> 
 
<head></head>
<body>
<h1>About me</h1>
</body>
</html>
html is the root element of the document tree and
everything that follows is a descendant of that root element
head element contains metadata—information
that describes the document, and lists it 
with resources such as css style sheets.
body element contains everything that you  
can see in the browser window is contained here
This is a typical HTML Element, 
made up of the h1 tags, and wrapped content

Key HTML concepts
Hyper Text Markup Language is made of the following
concepts and syntax. Just like any other language it
has rules and structure. 
• Elements
• Tags
• Attributes

HTML elements
HTML elements usually consist of an opening tag, closing tag,  
and some content. Notice all the nesting going on.
<html> #html element starts here
<body> #body element starts here
<h1>About Me</h1> #this is an HTML element
</body> #body element ends here
</html> #html element ends here

More about elements
Some consist of just a self-closing tag, which means they 
don’t have a closing tag. 
<img src=“http://i.imgur.com/Th5404r.jpg">

HTML tags
All tags compose elements. We are essentially ‘tagging’ the content,
so that the browser knows how to render the elements. Every tag
starts with a “less than” sign & ends with a “greater than” sign.
<html> #this is an HTML opening tag
<body> #this is a body opening tag 
<div> #this is div opening tag
<h1>About me</h1> #this is set of H1 tags
</div> #this is div closing tag
</body> #this is a body closing tag
</html> #this is an HTML closing tag

More about tags
• Tags instruct a browser about the structure of our website, 
and how to render the page ( DOM ). See it in action!
• Semantic elements clearly describe its meaning to both 
browser and the developer. It’s a language after all, 
used by machine and humans.
• There are hundreds of built-in tags though you’ll use the same
few a lot. ( Built-in means, they are provided as part of the  
fundamental syntax of the language. )

A note about <div>’s
<div> stands for DIVISION of a page, and are one of the earliest 
syntaxes that describe how a page is divided up. 
 
We use <div> tags to separate sections of our site. 
With the advent of HTML5, <div> is now less used, because its 
not as semantically meaningful as say: <article>,
<section>,<form> or <footer>.  
But its still quite heavily used. 
<div>
<h1>Hello world!</h1>
</div>

Non-exhaustive list of HTML tags
• <html> #html tags wrap your entire page
• <head> #head tags holds info about the page
• <body> #body tags wrap around your content
• <h1> #signiﬁes the largest headline (through h6)
• <p> #wraps a paragraph of writing
• <div> #div tags are generic container tags
• <a> #anchor tags for text to be a link
• <ul><li> #unordered list of items
• <button> #this is a button

HTML attributes
HTML attributes set properties on an element — the are attached in
the opening tag. They are made of name / value, pairs.
<a href=“https://somewhere.com">This is a link</a>
href is an attribute that sets the destination of a link
<h1 class=“headline”>This is a headline</h1>
class is one attribute that identiﬁes element (for CSS & Javascript)
<h1 id=“headline”>This is a headline</h1>
id is another attribute that identiﬁes element (for CSS & Javascript)

“About Me” website — HTML
FORK IT, If you haven’t done so… 
codepen.io/anna_curve/pen/mWopeP
 
• Drill — Add another section of your choosing
• Drill — Add a title and a paragraph in that section
• Drill — Try and add an image underneath “About Me” 
 
Resources:
• https://www.w3schools.com/html/html_basic.asp

What is CSS?
Cascading Style Sheets (CSS) interact with your
HTML to determine the visual presentation of your
webpages. They are basically attributes of tags.

CSS example
p.red {  
color: red; 
font-size: 36px; 
} 
 
In html: 
<p class=“red”>hey I’m red!</p>
selector is selecting the p tag in the document
properties or keys are constants
values are what can change
p tag is also a selector.
attribute ‘class’ is being assigned to ‘red’
class .red’ is deﬁning the p selector

CSS solves two problems
1. It updates the visual presentation of  
each element. 
2. Creates the structure which defines the
layout of all elements that basically  
designs the page.
The browser reads a css file from the
TOP down and ‘cascades’ down the css file. 
Hence the name: Cascading Style Sheet.

Key CSS concepts
• Selectors
• Declaration / Declaration Block
• Property
• Value

CSS selectors
• Selectors are what allows you to target speciﬁc HTML
elements and apply style to them
• They include tag selectors, class selectors, id
selectors and attribute selectors and much more!
• Selectors can be combined or ‘daisy-chained’ in 
HTML with singe spaces, and in CSS with dot notation

Example of selectors
p ( selects all paragraph tags )
<p>I’m a paragraph</p>
.name ( selects HTML elements with class attribute: “name” ) 
<h1 class=“name”> I’m a headline</h1>
#intro (selects HTML elements with id attribute: “intro”) 
<p id=“name”> I’m a paragraph</p>
p.name (selects paragraph tags with class attribute: “name”) 
<p class=“name”> I’m a paragraph</p>

Declarations and declaration blocks
This is a declaration block containing two declarations
p {
color: red;
font-size: 36px;
}

CSS properties
Constants that determine which aspect of an element’s
appearance we wish to target:
• color: (set the font color)
• font-family: (sets main typeface and backup typefaces)
• background-image: (sets background image)
• height: (sets the height of an element)
p {
color: red;
font-family: Helvetica, sans-serif;
background-image: url(“/imgages/puppy.png”);
height: 400px;
}

More on CSS properties
• Each property has a default value — when you write
CSS, you override that default with a new value
• There are lots of CSS properties! For a full list see
http://www.htmldog.com/references/css/properties/
• And my favorite: code drops CSS reference:
https://tympanus.net/codrops/css_reference/

CSS values
Determine the aspect of the element’s appearance we  
wish to change
• color: red, blue, green, #CCCCCC;
acceptable values for the color property
• font-family: helvetica, arial, sans-serif;
acceptable values for the font-family property
• background-image: url(“imageFile.jpg”);
points to a URL value that will access and load an image
• height: 40px, 50%;
set in pixels or percentage of container height

CSS challenge
• Pick a typeface, color, and size for the words
• Add a “More About Me” section and put a border around it
• Add background colors to each section to separate them

From Codepen to reality
• Download Sublime Text (or another text editor)
• Create a new folder (“First Website”)
• Create a new HTML file in First Website folder (index.html)
• Copy & paste your Codepen HTML into this file
• Create a new css file in First Website folder (index.css)
• Copy & paste your Codepen CSS into this file
• Add link to your CSS in your HTML <head> section
• Save both files
• Double-click & open your index.html file

Design for developers (april 25, 2017)

More Related Content

What's hot (16)

Similar to Design for developers (april 25, 2017) (20)

More from Thinkful (20)

Recently uploaded (20)

Design for developers (april 25, 2017)