Production Blog

Graphic Design Production II

Creating an interactive PDF is actually a fairly simple task. To do so you can open your document in InDesign. From here, highlight the text you wish to make interactive.
Right click > Hyperlink > New Hyperlink.
screenshot of hyperlink text box in InDesign
This dialogue box will appear. You are able to select whether you would like your link to go to a URL, or a page within the document, etc. You are also able to create a character style to apply to them.

PART 1 Organization is Essential
To get your websites to work properly, you need to follow rules for organizing files. The files fall into a few different categories, viewable content (text and imagery), the presentation of the content (design and layout), and the interactivity or animation of the content. Each of these is controlled by a core language, HTML, CSS, or JS.
Web pages (HTML) contain the code that talks to the web browser and the unstyled written text for the site. The style sheets (CSS) hold the instructions for styling the content, the page layout and other effects. Script (JS) enables user input, interactions and some animations to take place.
For simple websites, the web pages, content and instructions all live together in a folder or directory. This main website folder referred to as the root folder, Inside the root folder there are also other folders for the different kinds of content and instructions.
Here’s a simplified example of a root folder for the fictional company Flying Rooster:

Naming Conventions for Web Files
Code demands that you write it in a very particular way. A single character out of place can result in a whole web page displaying incorrectly or not at all.
You need to know that the naming conventions for web pages and files are also prescribed and are not optional. Specified methods must be followed and names assigned so web browsers can ‘read’ the files.
Files, documents and folders have special names. The root folder is called that, or the root directory, but it is not usually named that.
We call the first page of a website, the home page. This page uses a special naming convention. It is either named ‘index’ or sometimes ‘default’ or ‘home.’ Browsers read these names as a signal to open this page first.

Rules for naming:
When naming files or folders for the web, just say ‘no’ to:
special characters — Because the coded instructions for web browsers use special characters, you need to avoid using these when naming your files.
including spaces — Web browsers interpret spaces as special characters, so, don’t use them in your file or folder names.
long, weird names — You will not be the only one working with the files for a given website, so using short, descriptive names is a good practice.
varying your cases — Commonly all lowercase is used for file naming, but not always. Some people use what is called camelCase and some use all UPPERCASE. It is important, however, to keep your naming method constant.

Languages are alive! How do we know that? They change. Like any language, HTML, has gone through changes and continues to be adapted to new needs of the society and our technology.

Super brief history
HTML was developed by an awesome dude named Tim Berners-Lee, along with some colleagues at CERN, an international scientific organization based in Geneva, Switzerland. Around this time (1989–1991) they also developed the Hyper Text Transfer Protocol (HTTP) and the Universal Resource Locator (URL).

Syntax — the rules of HTML structure
All languages have rules that govern how the parts are ordered. This is the syntax. The absolute most basic parts of HTML are the ‘elements’ and ‘tags.’ Tags are recognized by their use of angle brackets.

Tags come in pairs, a start and an end tag.

Elements are the parts made from using tags.

Elements are nested.

Page Structure
In order for web pages to communicate with and be able to be displayed in browsers, they need to have specific HTML elements and in a specific order. All web pages have prescribed parts, nested elements and are divided into head and body areas.
A set of basic elements for a web page might look like this:

Because of the shared structure in web pages, a template, also called a boilerplate, is used to jumpstart the process of coding. The first piece of code on the page is the document declaration or the ‘doctype’ telling the browser what code language it is.

Text Editors
Text Editors are a kind of program used for writing code. Most automatically number the lines of code and allow for you to choose a color scheme to ‘color code’ the different parts of the language.
Many options are available for Text editors. You can use Notepad on Windows or TextEdit on iOS (though TextEdit is a pain), or even Adobe Dreamweaver as it has a Code View that works pretty well.

Elements + Attributes
You remember elements are the parts of HTML defined by tags. Other key concepts are:
Elements have attributes.
Attributes provide additional information about the element.
Attributes are always specified in the start tag.
Attributes come in name/value pairs and the structure looks like this: name=”value”
An example of an attribute would be:

In this example the body element is being assigned the attribute bgcolor for background color. The background color has a value that equals red.
the value #FF0000 is a hexadecimal definition for red.
the hexadecimal system is based on the color space of the computer screen, RGB.
Web colors can also be specified by using the r, g, b values or by using text.

Links: anchors away! / relatives / absolutely
So much of the web is “...Click on this to go here.” Hyperlinks are the fundamental interactive parts that enliven web pages and serve a site’s navigational functions.
Links are made by using the anchor element. The anchor element uses an ‘a’ to stand for ‘anchor’ along with the letters ‘href’ meaning ‘hypertext reference’ to designate the place the link goes.

example: The following code

appears as visit w3schools

In the example above the words ‘visit w3schools’ would become the clickable link because they are between the start and end anchor tags.

Absolute Links
The link above references a page outside of the root folder of the web site. The name for this kind of link is an absolute link.

Relative Link
A link that references a page within the website (inside the same root folder) is called a relative link. This kind of link does not need to use the same URL information like ‘http://www ’ and it would be written like this:

example: More About Us

Keeping your files organized will help you succeed in building web sites that function.

HTML Basics — Meta Tags
To the html start tag, add the attribute... lang (for language) and the value... en-US (for english-US). The example is below.
meta tags — give important info about the website to browsers. Meta tags do not have end tags. Meta tags include specific attributes and values.
We’ll add meta tags with the following attributes + values to our page.
a. charset =”UTF-8”
b. name=”description” content=”A description of the content on the site”
c. name=”keywords” content=”word, word, word, word”
d. name=”author” content=”Your Name”
e. name=”viewport” content=”width=device-width, initial-scale=1”

Path

Unlike our written text content, which is contained in the html page, images are referenced in HTML by describing their location. Images in a website live in a ‘images’ folder. The path to get to an image must be spelled out for the browser. The signal to tell the browser to “go into another folder” is by including a forward slash in the path name.

ALT TEXT
It is mega-important to clearly describe your images in words. This enables screen readers to speak out loud what the images are. For individuals with vision impairment this is essential for understanding the website’s content.

DIMENSIONS
Your images should also be defined dimensionally. We will use width and height in pixels.

IMAGE AS LINK
In order to make your image a hyperlink all you need to do is wrap anchor tags around your image element and then specify the destination.Select a destination (somewhere on the web) and create the link.

HTML basics — More working with Images / Making Images Links
Images for web have specific file formats depending on the kind of image. The formats all have adjustments that you can make when saving them in order to achieve the highest quality with the smallest file size. This process is called Optimization. You will want to optimize all of your web images before you use them in a website. The most common file formats developed for the web are:
.jpg / .gif / .png / .svg
Photographs are most often saved as .jpg or .jpeg and sometimes .png. Vector images are saved either as .gif or as .png or .svg

The color space on screens is RGB (Red,Green, Blue). The Hexadecimal color system, which is rooted in the RGB color space, was developed when computer monitors were pretty limited in the range of colors they could represent.
Web designers often designate colors using the values for each of the colors R, G, B (or the Hex # or will sometimes use the color names). Transparency can be designated along with the r, g , b values by setting the alpha value. Then you would set the r, g, b, and a (for alpha) values. Here is an example of the hex code for this particular color.
hex color example

You might be tired of looking at all that default Times New Roman and want to change your font and maybe make your type a different color. We are going to do this and a lot more with the help of CSS (Cascading Style Sheets).

Syntax for CSS
CSS like HTML, has a syntax to it’s language that needs to be learned. Let’s take a look.
In writing CSS, you define rules for the HTML elements. These are called rule sets.

example of rule sets

Declaration blocks contain one or more (usually more) declarations that express the properties you want to style and how you want it to look. These blocks are surrounded by curly brackets a.k.a. braces.


declaration blocks example

Each declaration includes a CSS property and a value, separated by a colon.
A CSS declaration always ends with a semicolon.

An example of basic CSS would be to style the headers, the body text, and the background of the page.

Here is an example of the HTML doc, the content that we will be styling with our CSS. Note line 11, which links our style sheet to our HTML document. This is crucial if you want your styling to work.

basic html example

Next is the CSS styling that we've linked to our HTML document. This is what will change the appearance of our page.


basic css styling example

Now that both are saved, here is what the website will look like. You are able to edit each element in your CSS page, or apply the *same* style declarations to multiple elements by placing a comma between (as shown in line 19 of the CSS example).


Styling Links
Just like styling your text, and paragraphs you are also able to style the appearance of your links. The default is the blue underlined look. When we stylize the links you can make it appear however you'd like. There are four states to a link:
a:link - The normal, unvisited link.
a:visited - The link after a user has visited
a: hover - The link as the user mouses over it
a: active - The link as it is clicked.

Here is an example of the css code I've used to style the links on this page.

css code for styling links

And here is an Example Link so you can see how this styling changes them.

Adding captions to images
To add captions to your images use the HTML tags ‘figure’ and ‘figcaption’. These tags work with the 'img' tag as a set. The figure tags wrap the image and the caption together. Nested inside is the img tag the words of the caption are wrapped inside the figcaption tag.
It should look like this:
html code for figure captions
In your css file, create a style for your caption.

Using images to create unity
By repeating elements you can reassure users they are in the same site. Images—either icons or photographs—can act as visual references to other sections or pages of a site.

Using Images in the Background
Just like changing the background color of an HTML element, you can also use CSS to set an image as the background of an element. There are a few different ways you can do this. One way is to set an unobtrusive pattern in the background of the body so that there is some subtle color and/or texture behind the content on the entire page.
First, you need an image to use for your background. In the best case scenario you build a small(ish) image designed to tile or repeat over and over again. Another name for this is a seamless pattern. Seamless patterns are great because one small image that repeats loads much faster than a large background image and it automatically adjusts to fill whatever size screen being used.

Set the background with CSS
In order to set an image as your background it has to be done on your CSS page. It is likely that you have to image saved in your images folder however so you will need to tell your CSS page to back out of the CSS folder so it can enter the images folder to pull your background. The ../ is what alerts the browser to do this. This is what you code would look like:

body {
background-image:
url(../images/background.png);
}

More Seamless Patterns
Its fun to make patterns. There is a fine art to making viable and effective seamless background patterns. Some illustrators / designers make them for sharing, some for profit.
You are able to use a free online resource called Subtle Patterns.
Go to the site and explore the many options by browsing the thumbnails.
Preview how the patterns look as backgrounds and choose one you want to work with.

Make your own Background Image If you have never made a seamless pattern in Illustrator, or if you have, but want to refresh you knowledge, or just watch an awesome 7-minute video demo... go to the Creative Market and scroll down to watch Bonnie Christine's how-to video from Skillshare. In this video, Bonnie takes us through making a pattern and saving it to use in Illustrator.


Web browsers see everything — every HTML element that is — as a box. These boxes have certain physical characteristics including width, height, space around it, space inside of it, contents, and sometimes a frame or border. By creating the boxes and specifying their characteristics, we can control how the content on our web pages is displayed.
If we style each element differently these boxes become much more apparent. Here is an example: example of box model with no styling

Block-Level / In-Line Elements
You might remember back in an earlier lesson we talked about block-level vs. inline elements and their behaviors. See how the yellow spans nearly the whole width of the browser? That is because an h1 is a block-level element.
By adding the color in the background, we can now see that the element does actually span the width of the browser window. The browser sees it as a box that has content inside—the text.

Box Model Properties — padding, border, margin
The block-level boxes run the full width of our screen. The properties we can change are like other characteristics we can style with CSS.

Padding is the CSS property that controls the space inside the box around the content. Padding, like font-size, can use various units. For now, I’ll use pixels. You can add padding uniformly or to a specific side around the content.

Border is a line that can be thick, thin, solid, dashed, dotted, etc. It is the CSS property used to style the outer perimeter or edge of an element. So, if our content is in the center of the box, and padding is wrapped around the content, the border is then wrapped around the padding. The border property uses three values for line width, line type, and for line color.

Margin is the space between the boxes. Every element has a margin applied by default. Margin is what is creating the space between our h1 and our p in our page.

CSS Margin Reset Before we set a new margin, we'll turn off any existing default browser margin using a magic trick in our CSS. Before any other elements, type an asterisk * This is a special selector that means “every element in the page.” Now add...

* {
margin: 0;
}

This turns off all margin defaults. This reset technique can be used on any webpage to reset any default margin on the page. You can, and will want to add padding: 0; to the reset as well. This way you can control all the spacing manually on your site giving you precise control over your layout.
The analogy I have devised to think about these box properties relates to actual boxes.
Padding is like the packing peanuts inside the box
Border is like the kind of cardboard (heavy-duty, corrugated, thin, etc.),
Margin equates to spacers or bumpers attached to the outside of a box.

Width and Height
The last two properties that we can change on our box is the width and the height. It’s important to know that it is actually best not to mess with these unless you have to. Browsers automatically set these based on the content and other box properties that are already defined. This generally works really well. However, sometimes you want to set specific values for a box (block-level element).

Text Alignment
Default alignment for all elements in HTML is left. It makes sense that browser use this as a default because we know that left aligned text is easiest to read. That's why novels, textbooks, and almost all other longer form text is always left aligned. Sometimes we might want to align text to the right or center for a certain design effect. Seeing where the content such as text lives inside a box helps us do that.
The CSS declaration we use to do this is text-align: and the acceptable values are left, right, and center.

I have applied a variety of styling to the box model I placed above. Here is the CSS:
element styling css
And here is how the page looks with the new styling. website example with styling

Navigation lists can be extremely helpful for organizing a webpage that holds a good amount of text. It would be a list of headers, or titles, and when the user clicked on them, it would bring them to that desired section of the page. In order to make the navigation list work you need to use anchored links.
An anchor link “anchors” a navigational link to another element in the same page. In order to make the anchor tags work we have to add to the HTML tags that are the anchors and add to the HTML tags that are the links. To establish a connection between the two requires that we learn a new HTML attribute, the id= attribute.
This particular attribute is used to identify (id) the HTML element being anchored to. Each id is given a unique name which is placed inside the double quotation marks. You can use any word you want, though descriptive words work best.
After the anchor links are made, you add the id class to the section you wish each headline to match with. Here is what the list would look like:
html of unordered list
and here is what the id on the corresponding place of the page would look like:
html of corresponding list code

Dealing with Images
There are many techniques out there for handling images, some more technologically advanced than others. We can use our CSS to tell all images in our page that the largest they can ever be is 100% of the available width. Essentially, we tell images that they are free to be full size if they fit, and if they don’t, they will automatically scale themselves. It doesn’t matter the screen size or if it is ever changing, the image will take on an elastic personality. This would be placed in our CSS using this code:

img {
max-width: 100%;
}

This tells the browser to resize the image along with screen size.

Mobile First Approach to Web Design
Most users are accessing the web from a variety of devices. The premise of 'mobile first' strategy is to design for the smallest screen size that a user is likely to use first. A bright individual named Luke Wroblewski thought this up in 2009 and another bright person named Karen McGrane expanded the ideas in 2012. This approach teaches us to be thinking about content and functionality of the user interface on a mobile, or small screen first.
Using a finger or thumb to navigate instead of a mouse presents challenges mainly because a finger is far bigger and much less precise than the mouse cursor. User frustration, confusion and errors in navigation are often called 'pain points.' It’s the designer's job to make our sites as functional and usable as possible. We do this by discovering where there are problems (user testing) and eliminating (or at least minimizing) the pain for the user with better design.

Styling Navigation
Unstyled text links in a navigation List are small and close together. This makes it difficult for a user to hit the correct link. Styling these links is incredibly important. We’ll go through a few good ideas for this.

Removing the Bullets
Unordered lists use bullets to indicate each of the list items. This is great in some cases, but for navigation this just gets in the way. You can use CSS to remove these. Bullets are connected to the parent element, so go to the ul { selector.
The value to remove the bullets is none; The code would look something like this:

ul {
bullets: none;
}

The bullets are now gone from our list.

Creating Larger Buttons (Hit Points)
When dealing with links, the spot a user needs to click, tap or touch to activate the link is called the hit point or hit target. In text links, the hit point is only the text—a pretty small target. The user needs to click directly on the text to use the link. When using fingers to navigate a touch device, users typically need a much bigger hit target to be accurate.
To better see the changes you can add background colors to the h, ul, and a elements. To increase the hit target on a text link, you need to do two things.
First you need to 'promote' the link from an inline element to a block-level element. This will expand the hit target to the full width of the screen. It will also allow you to put padding on the link.
To promote the link from inline to block use the property display:
The value you would use in this case is block;
To add padding, use the property padding. Here’s an example:

a link styling css

These links are now much easier to select, however there is one issue. There is no space between them and it is impossible to tell where one link starts and one ends. So that will need to be fixed.

Creating Separation Between Links
The best way to move objects apart is to use margin. Margin will allow you to separate links with an invisible barrier. Since you only need to have the margin between the links which stack vertically, you only need to add the margin to the bottom of each of your links.
Add margin-bottom: 5px; to your link CSS
That works to create visual separation and actual separation between our links.

Centering the Link Text
To make links look a little better, begin styling the text.
Adding text align: center to your a element will center the text on your buttons and make them look much better. You can center any text inside a block-level element this way.

NAVIGATION PLACEMENT
A website designed for the desktop generally has the navigation at the very top. On a mobile site real estate is at a premium so having the navigation at the top presents a problem because it takes up all of the screen effectively hiding site content. There are several design options used to address this situation.

The Hamburger Button
One conventional method to indicate navigation is to use an icon made of three lines which is referred to as the hamburger button. The set of navigation links is usually hidden from view until it’s accessed by the user. There are lot's of ways to hide and show navigation, but almost all of them require knowing the programming language called javascript. We can accomplish something similar using only HTML and CSS.
To do this simply you could add an image of a hamburger menu to the top of your page, and then use the anchored links described in the previous section to link it to your navigation list at the bottom of the page. For this you would move your unordered list to the very bottom of your html page (still within the body) and then wrap your id tag chosen for the hamburger menu around the entire unordered list.

Differentiating Navigation Links From Other Links
This navigation change requires you to make sure the hamburger button is styled differently than the other links. The easiest way to do this is by using more specific CSS selectors to target all links inside of an unordered list.
Change your CSS link selector from a { to ul a {. By adding the ul it tells the browser that it is to look for the first element —the unordered list— first, and then to look for the next element —the a— nested inside the first. Here’s my new link CSS:
css code of nav styling

CSS classes
When using classes you can style them differently just like you can with p tags or h1, h2 tags etc. To do so you would use .classname { styling }. Here is an example of styling on a class I have titled header
css code of class styling

Header and Footer Elements
Header Element
html code of header tag
The header lives at top of a web page and usually includes a logo, the navigation, and sometimes other things like a tagline or a search function. You can wrap the header page around the hamburger button you’ve already used. The benefit to this is that you can style your hamburger link directly. If you use header a { as your css tag you can specifically style the links within your header.

Specificity
Specificity is an important concept that refers to the order that CSS styles are applied. When using more than one HTML element name in a selector for your CSS this becomes crucial.

Footer Element
In web design footers refer to the content that appears consistently at the bottom of every page of a website. The content can vary, but it’s common to see site navigation, contact information, links to social media as well as all sort of other bits of company information. Similar to the header, the footer content rarely changes between the pages in any given website. Having this content grouped together in a footer element is just smart. You could wrap your unordered list within footer tags, just like the hamburger menu was wrapped in header tags.

Additional Footer Content
Another common piece of footer content is a copyright statement and symbol. To do so, Add a p tag to begin your copyright paragraph. Type: Copyright, add a space and then to get the copyright symbol you have to use a special bit of code. Type: ampersand Copy ; with no spaces to create the © symbol; add a space and then Type: 2017 and then close the paragraph tag. Your code should look like this:
html code making copyright symbol

The Nav Element
HTML offers a pair of tags to help you organize and identify the major navigation on your page. By wrapping your links in a pair of “nav” tags it allows you to use as a nested selector and helps you scan the code to more easily identify and edit your site navigation.

The Section Element
Another organizational piece of HTML is the section element. A section defines an area of content that is separate or distinct from the rest of the content.

The Float Property
The most basic positioning method is called floating. This command allows any element to be positioned inside its enclosing element to either the right or the left. Floating an element changes it's default behavior and allows other elements that are below the floated element in the HTML to also “float” up and sit next to it – creating a wrap effect around the floated element.

Floating Images for a Text Wrap Effect
Floating came about as a way to deal with images and text together. It is a way to include an image inside of text, or have the text to wrap around the image.
The basic CSS declaration to float an image left or right, tells the image to "go be on the right side or left side" aligned inside of its enclosing element. It also tells any text below it fill available space to the left or right of the image.
To utilize this method you would create a selector for images in your CSS file. You would add the property float, and assign the value left. You would also want to add a little space between the text and images you are using. To do this add a margin property. If you are floating multiple paragraphs and images you will run into an issue of them all stacking next to each other. To fix this there is a simple bit of code you can add to fix this issue. To do so you would add a section class titled “group” around each of your paragraphs. You would then enter the fixing code to your CSS. Here is what your entire CSS page would look like.
css code for image floating
The section id css code is used to float different images in different ways. Here is what my page looks like with the above css styling.

Font vs Typeface
The term 'font' is used in digital typography, though it truly refers to a specific typeface. The term 'typeface' includes all the sizes, styles, and weights of that face, where 'font' actually describes a subset of the typeface.

Type Designers
Fun fact: designing typefaces is a real job. It is a legitimate speciality area in the world of graphic design. Creating a single typeface takes an extraordinary amount of time and a keen sense of detail. Type designers spend their time drawing, adjusting, digitizing, scrutinizing, tweaking and packaging all those little glyphs/characters and their many different combinations into various typefaces.

The final typeface package is really a piece of software. And, like any software, it has copyright laws to protect it. A type designer needs to be paid for their work just like any other professional. Though designers who dabble in type design for fun will offer their works for free, professionals create a much higher quality product and therefore ask for payment.

Readily Available ≠ Free
The typefaces that come preinstalled on your computer are not free. They are there because of licensing agreements between software and hardware companies and the font foundries or companies that own and sell fonts. Apple and Microsoft are two of the biggest players that have agreements with font companies. They pay to use those fonts on the system. The cost of those fonts is included in the cost of your computer.

Copyright
As already stated, typefaces or fonts are protected by copyright. This means that that only the font creator has any rights over how the final font is used, sold, edited, etc. A font is essentially a piece of software, but also an original work, like a painting, novel, or scientific invention.
Copyright law protects creators, and anyone who infringes on those rights can be punished. By using a font that you do not have permission to use is a direct infringement on copyright and you risk incurring punishment. The punishments for copyright infringement can be serious. Penalties include fines and/or jail time.

Font-family Property and Font Fallbacks
You can specify your font-family: property as one of several generic categories: serif, sans-serif, monospaced, cursive, fantasy.  You are able to do this because we are simply asking that the user's computer display a sans-serif (or whatever category) font already installed on their computer.

The succession of Font Fallbacks
If we use font-family: 'Times New Roman';... this tells the browser to display Times New Roman if it exists on the computer. We can request our own fallbacks by adding another font request following our first like this:

font-family: 'Times New Roman', Georgia, serif;

This tells the browser to look for Times New Roman on the system first, if it does not find that, it is to look for Georgia, and if that can't be found, it would use a generic serif and display that.

Custom Fonts
Websites have been, in the past, dependent on the fonts installed on the user’s computer. In the last decade or so, the ability to specify exact fonts has evolved. There are two general methods: hosted and self-hosted.
Hosted — This means that the font doesn’t live in your root folder, but instead that font lives somewhere else on the internet. Font companies or services (like Google fonts) provide designers with access to fonts by providing a way to link to them on their server. Copyright issues are managed and monitored by the hosting company. There are hosted fonts that are paid and those that are free.
Paid — Some font foundries or type designers offer paid options for using their fonts online. These are subscription-based models that allow you pay monthly to have access to a certain font or set of fonts. You pay for the rights to use the font on your site and for to be exempt from worry about copyright violations.
Free — These are similar to paid hosted fonts in that another company actually takes care of hosting the font files and provides access to those fonts. The major difference here is that you don’t actually have to pay for the service. 

Pros: No worries about managing your own font hosting, typically slightly easier to setup than self-hosted fonts
Cons: Privacy issues (your site can be tracked by these companies), Need to manage subscriptions and accounts for paid services, often limited to a certain number of fonts or sites for paid services

Some Services:
Google Fonts (Free)
Adobe Edge Webfonts (Free)
Adobe Typekit (Paid)
Cloud Typography (Paid)

Self-Hosted — This means that you are actually uploading your own font files (in a folder, just like your images) for browsers to download and display in your webpages. There are both paid and free models for this as well.

Pros: Full control of your content, You own (rather than rent the fonts), Good variety, No tracking of font use by third parties (privacy issues)
Cons: You are responsible for policing copyright, Your are responsible for managing hosting, Costs (you are paying for the hosting of the font files)

Some Services:
Font Squirrel (Free)
Fontspring (Paid)

Using Google Fonts (Hosted)
Google Fonts is a great resource for free hosted web-fonts. It contains a huge and growing number of fonts to choose from and their service makes it really easy for designers to link to them using just a simple attached stylesheet. When working with typefaces and fonts, it is always good to test your fonts for use in both headings and body text. Some fonts are only designed to be seen large as in headings where others are specially designed to work well in smaller more dense text like paragraphs.
Now, let's find suitable web fonts to use.
  Navigate to Google Fonts. Scroll the page and you’ll see tons of fonts to choose from. You can filter the kind of face you want using the check boxes on the side.Each typeface is displayed in its own area offering additional content on rollover and many options for previewing the font styles, the specimen and characters. You can even try typing in new text.
  By clicking the red plus sign, you add it to your collection and it will appear in the 'drawer' at the bottom of the page.
When you open the collection drawer it shows you the text to add for linking to the stylesheet.
Once you’ve placed this text in your html doc, you are able to style your elements on your CSS page by using the font names.

Favicon
Short for "favorite icon" a favicon is that tiny little image or graphic associated with a website you see when you bookmark the page. Web browsers use favicons in the address bar, on tabs, and in the book mark lists to identify sites visually. It is really an extension of the brand. Favicons used to be typically 16 x 16 pixels square, though now they can be up to 48px square. They are saved with the name:  favicon.ico and are stored in the root folder of your website.

Creating a Favicon
Favicons can be created using online services or any image editing software that allows the saving of .ico files. (Photoshop needs an extension).
The image you use should be a graphic with very little detail and designed to match your site's identity. It will take some work to strike the right balance of detail and communication.
Experiment with an online service to create your very own favicon. favicon.cc, favicon-generator.org, faviconer.com, Dynamic Drive, to name a few.
Follow the instructions provided by the site and then download the favicon.ico image to your computer.
To place it on your webpage place your favicon.ico into your root folder.   >> Do not put it in your images folder.
In the head of your test HTML page type:
html link to favicon
Your favicon will now appear next to the title of your website.


Box-Sizing Property
Relating to the box model, the so-called boxes are the divs, sections, headers, etc. which are simply containers for page content that can then be styled with padding, border, margin.
You may have already noticed that when you add padding or border to your parent element (div, nav, section, header, etc.) that the size of the element grows. That's because border or padding values are added to the dimensions of the 'box' (div, nav, section, header, etc.). The box-sizing property addresses this issue.In the following CSS an asterisk (*) is used as a selector, which basically means:
"Hey, you, browser... apply this to all elements on the HTML page this stylesheet is attached to."
css box sizing property
The value 'border-box' includes the values of padding and border in the size of the box.

COLUMN GRIDS — CONTROL YOUR LAYOUT
You have been able to use the float property to adjust how elements display on a page. This is good for simple 2-column layouts. However, once you get into more columns more control is required. Many, if not most, responsive websites use a multi-column grid structure to exercise greater control over the positioning of the page elements. A 12-column grid is fairly common. By adopting this approach, you can ensure that our pages look right in all viewports.
The 12-column Grid can be visualized by this figure:
figure of column grid
So, a 1-column layout uses all 12 units, a 2-column layout would use 6 + 6 units, a 3-column layout would use 4 + 4 + 4 units, 4-column layout would use 3 + 3 + 3 + 3, etc.

Designer/developers have calculated how to best work with these columns. If you begin with a one column layout = 100%, the percentages for each of the 12 single columns will equal 8.33%, 2 columns then equal 16.66%, 3 columns equal 25%, and so on. You will use these percentages as values in our CSS.

Defining the Column Styles - In Your CSS
You need to make CSS classes for each of the 12 columns. You will use class="col-number" where the specified number defines how many columns the parent element or div is to span.
This is how that list will look:


Each Content Area - In Your HTML
To control the layout each content area will be defined as a row of columns. Each of these rows needs to be wrapped in a parent element. Use a div tag to contain each content area. Since you are using a 12-column
Here is an example of how the HTML would look:
html code of columns

FLOATING
If you want your columns to float left, you’ll need to float them and then add some extra css so that they do not overlap. Here is the full css you would need:
css code setting up columns
and here is how it would look in the webpage
webpage example of columns

Project 1 involved creating an app concept, developing the functions of the app, creating the design of the app, making that digital and then later, creating a promotional website for the app.

Initial Planning
We started with some mind maps to develop a few ideas for apps.
I chose to continue with an app that assisted in saving money, because I personally am terrible at it. From here I started to develop some name and logo ideas.
hand rendered logos and names
I was pretty stuck on the name Spend and Save at first, however it really didn't sound that great so that quickly changed.
After the ideas were more developed, we sketched out some wireframes of what we'd like our app to look like.
hand rendered wireframes

Digital Development
After working our hand rendered comps we moved on to digital comps. I created a new logo, and made my wireframes using Illustrator. They were similar to the hand rendered with a few tweaks.
digital wireframes
Using the wireframes we had created, we were tasked with creating a sell sheet and user journey that promoted the app and let users know how the app would work.
image of sell sheet
image of user journey

Website Building
After working on the app concept we then began with working on a website to promote the app. You can visit my final version of the website here. This took all of the knowledge detailed above that we had learned throughout the semester and applied it to the project we had been working on throughout the semester.