DigitalMe: Matt’s HTML & CSS workshop

Today I attended a session to learn how hand- code a website from scratch. Here are my notes:

Website Architecture

Save all HTML, CSS & Images into one file together. Linking between them works only in the same directory.

Create a .html file & .css file.

HTML: 4 essential divs:

<!DOCTYPE html> comes at the beginning. Doesn’t have a closing <>

<html> </html> comes after but goes around everything that comes after

<head></head> contains metadata that isnt going to show on the page.

<body></body> this is where the magic happens.

Link from HTML to CSS in the head:

<link rel= “stylesheet” type=”text/css” href=“whatever you named the style sheet as.css” >

This means that the html page will refer to that specific style sheet for constructing the page.

In CSS, strip away the automatic formatting of browsers with c&p code from

https://meyerweb.com/eric/tools/css/reset/

Divs

There are now specialized Divs:

<header> <nav> <article> <section>

You can still make regular Divs in HTML:

Defining a class gives the Div a specific name. you can then use the name you give it to refer to it in CSS.

Altering in css

.divname {text-align: center; max-width: 900px; margin:0 auto; }

When using a user defined name for your div, put a dot before it in CSS. If it’s a built in Div or tag, you don’t need it.

Image sourcing in html: 

You can imbed an image (saved in your site architecture) like so;

<ing src= “File_from_site_arch.png” alt= “some text for the blind” >

HTML tags

<h1> tags are of course headers </h>

<p> are for paragraphs </p>

Adding colour in CSS

body { background-color: #B3B6B7;}

https://htmlcolorcodes.com   <– you can get hex codes from a color picker here.

You can also use the names of basic colours such as black, white, orange, pink or whatever.

making a div stretch the height of the page:

To make a div stretch the entire hight of the page, you need to apply this funtion not just to the div in question but to the HTML div itself also. This is weird and possibly a bug but its how It works.

Eg: body, html {height:100%;}

Specifiying special divs

You can give section divs a class so you can speak to specific section divs directly rather than all section divs on a html page. (section divs are a kind of built in div)

Eg: <section class=”divname”> </section>

Aligning text within a div in CSS

.divname{align-text:left; }

Inserting Fonts

fonts.google.com

can import fonts from this website that’ll work on most devices.

stick a link to it in the HTML’s head

Eg: <link href=”https://fonts.googleapis.com/css?family=Martel:300” rel=”stylesheet”>

specify where its used in CSS. for example, if you want to apply a font to your h1:

h1 { font-family: “Martel”, sans-serif; }

The google site gives you the appropriate things to just paste in.

Other font modifiers: font-size:10px;  line-height: 20px;  color:#FFFF

Padding

This creates space around inside of div, around content.

You define the pix around each side clockwise starting from the top. Ie padding:top right bottom left;

Eg: h1{ padding: 0 10px 0 10px;}

When its zero, you don’t need px. Also note the lack of comma between values. This aint python, punk.

Mouse rollover effect

In HTML in image source add onmouseover=“ “this.src= ‘nameofanotherfile.png’”

To change back after add onmouseout=“this.src=theoriginalfilename.png”

Eg: <img src= “pic1-off.png” onmouseover=”this.src=’pic1-over.png'” onmouseout=”this.src=’pic1-off.png'” alt=”image one”>

Floats

Lifts an element out of the normal document flow, allows other elements to “float around it” in CSS

In its simplest use, the float property can be used to wrap text around images.

Eg: .somediv{float: left;}

if you want a section to ignore a float, add a div class= clear, then on css .clear{ clear: both; }

This will add a div that after everythign will ignore the floating element.

Adding a Navigation bar.

<nav> creates a div in the place you’d expect a navigation bar . </nav>

<ul> creates an unordered list (i.e. bullet points rather than numbered. each individual item on the list gets the <li> list div </li>

this will create a vertical list on the page. to change it to a line, on CSS:

nav ul li { display:inline; }

Here, CSS takes the nav, unordered list, list item as an argument. This Is how we specify particular elements within CSS.

Adding a hyperlink to text

“a tags” are how we create hyperlinks from a webpage and are handled with the following code in HTML:

<a href= “www.theplaceyouwanttolinkto.com”>Text that will be a hyperlink</a>

Changing background and text colour on a mouse hover over links in CSS: 

a:hover{ }

this will change things in the div of all A links, but you can be more specific to divs for example:

nav ui li a:hover{ background-color: pink; color: orange; }

this will change the colour of specifically the div and text colour for the links in the nav bar.

Advertisements

Changing Faces: Ultimate

My feedback from a final critical:

  • Layout continued to need mixing up
  • Twitter image still seemed too static
  • Last image didn’t read.
  • Text needed splitting, cutting, mixing up.

 The Changes made

  • Layout of final page drastically altered; no longer resembles other two at all.
  • Twitter image re-vamped. Extra circles of differing opacities introduced, line broken up further. Made the distance between circles less uniform.
  • Text edited on a line by line basis to shorten.
  • Margins increased, text given more white space.
  • Change to final callout; in black against white image, variant on callout before, visual links keep it consistent, differences keep it fresh.

This slideshow requires JavaScript.

Typographic detailing

  • Rag. I Spent lots of time sorting my rag out, to make sure it didn’t make any obvious shapes with the negative space, as well as removing rivers, orphans and widows.
  • Fonts:
    • Header Acumin Pro Bold
    • Subhead Acumin Pro Bold
    • Callouts Adobe Garamond Pro
    • Crosshead: Adobe Garamond Pro bold italic
    • Standfirsts Acumin Pro Bold italic

As I said before, I chose these two fonts as they pair well together, the sans acumin and the seriffed garamond work well as title and body text respectively and do not clash.

  • I used a 10 column grid. Mainly used as a 2 grid, but I like the versatility of higher numbers for my images and callouts
  • I had a margin of 20 milimetres and a gutter of 15. I liked the amount of white space this gave me around the text.
  • Point Sizes:
    • title: 75pts
    • Subhead: 20pts
    • Crossheads: 15pts
    • Lead ins: 11pts
    • Body: 9
  • Leading; 9/11 for body text; gave it more room to breath as there was so much of it. slightly more spaced out again for the lead ins at  11/14.
  • Ligatures; left on. Ligs good in body text because they improve the flow of the eye. So im told.

Other points

Format size; I  increased size from basic minimum bastard size to something that I could get away with using large margins, using the scale of the guardian weekend magazine as a guide.

 

 

Changing Faces: Working Method & Design Processes III: Redemption.

 

This slideshow requires JavaScript.

Here is a completed (but rough) layout that I brought to a final critical which I created based on feedback from tutors.  My choice of title was me attempting to invoke the sense of the articles link to biological warfare; I have read in the past about biological warfare having been the next “big thing” after nuclear weapons, and I think with the virus- looking images, I have a design that isnt at first obvious but still effectively communicates its message.

My final image was an attempt to follow the narrative set forward by second image. it was originally planned to have one large red circle looming over the page with “attempts to neutralise ISIS’ media juggernaut have proven inept” lower down. Circle by itself seemed too simple, so wanted to just put a little bit of detailing in; the smaller circles to mimic the language of the previous image more.

I based this layout on criticisms from my tutor’s feedback on an earlier version, the critisim I recieved and the changes I made are listed below;

Break up twitter image; needs movement, needs to be less perfect

  • sorted. circles added & removed to contradict line
  • put through the image trace treatment to make circles not perfect, interact a little more

dirty up first image

Screen Shot 2016-05-11 at 17.58.17 1I tried this, but I didnt like the results very much. It removed even more negative space from my design, which didn’t help the design

Try adding more colour, less black. 

I tried experimented with using other colours on the first page, but I don’t think they looked as strong as the black;

I think that these could have worked better if I changed the red from my original image, but I didn’t want to lose the red; my classmates agree it is a pretty integral part of the design, being symbolic of danger.

Layout repeats itself too much.

One big criticism was that my layout was too repetitive, all my original pages having a splash image across the fold. I attempted to remedy this by moving a split image/text spread to the centre and putting a splash image over an entire spread for the final page.

Ill be presenting this on friday, and will be making final adjustments to my layout for submission based on any comments and criticisms for the following week, as well as spending time perfecting the type.

 

 

Changing Faces: Interpretation & Context.

After completing some perliminary research into editorial design, I picked my article; “Why ISIS is winning the social media war”. I started by printing my article out, and going through the printed version, annotating it, highlighting the key themes, selecting possible callouts, and finding errors in the text I would need to correct. I also used this analysis of my text to decypher its tone, and get a better idea of its desired audience.

Annotated Text

I found the article differed from most written pieces about ISIS in the way that it sought an understanding of why they do so well in terms of their “marketing”, likening them to a modern day online media company like BuzzFeed. It seemed to be aimed at a vaguely intellegent audience, and isn’t all out scare mongering as you might expect from an article about ISIS that you might find in something like The Sun.

From my analysis, I was able to start mindmapping with the themes I had uncovered and feed this into the generation of themes for my imagery. My take away was themes of “viral” ma0rketing, social media. I needed to mix this up a little bit to create strong imagery, however.

Mind Map

 

This left me with a good foundation to start image making and designing layout.

Changing Faces: Editorial Research

For the next five weeks we will be completing a project in Editorial Design, so I have been researching into exactly what that is.

I started by looking at Design Is History and found an article on editorial design, which confirmed to me that it is, obviously, the design of magazine spreads and books. Of course in more recent years the term has started to stretch to include some aspects of web- design; Ie the digital wing of magazine publication.

I also had a look though creative bloq and found a list of 10 rules for better editorial design here which I had a look through and will be refering back to when it comes to my designing.

 

I stumbled across the designer Albert Ibanyez on behance where I found these spreads he did for “Fontag” magazine;

What particularly drew me to this particular spread is the use of white space around the first page, in contrast with the slightly more filled out right side. I like how different a 4 column can look page to page whilst still retaining a consistency between the two pages.

I also found designer Paul Marcinkowski on behance, and particularly liked compositions he completed as a school project on “yourmag”;

Print

What first made me notice these spreads was the turning of the page on its side, a rather confident move I feel, that happens to work very well. I also really like the way the text on the 5- column grid interacts with the images set behind it, as well as the use of the red to make the black and white photographs pop. Also worth mentioning is the difference in busy-ness of the two neighboring spreads.

I also found an interesting  article on Creative Review about a redesign of the Bloomberg Business week ( and how elements rejected by the guardian were used in the design, but irrelevant.)

apple_0chaos_0swap_0

I really like the diversity between these spreads, whilst the style that seems inspired by 50s swiss design (I.e international typographic style) keeps the pages consistent. It seems like the style is so strong that grids dont even seem to need to be applied consistently, particularly with the final image here which seems to go entirely grid-less.

I finally found this interesting design spread, which after some research I found to be a creation of a student designer Josh Stokes for this student project; an interview with a graphic designer of his choice;

picture8

What particularly attracts me to this spread is the use of the title across the page, leading into the text. On Josh’s blog he talks about how he did this because of the clever irony of covering his photo’s eyes with the phrase “made you look” but I think this works on a higher level; I think faces are great focal points and tend to jump to the top of any hierarchy you can design, given enough size just because of the ways our brains work. This probably explains why faces looking directly into camera are such popular design elements, particularly when something is trying to get attention to be sold, ie magazine covers. I think the eyes specifically are where we as humans are drawn to when looking at faces, so I think having a title lead from just the first place you look, straight into the body text is excellent. With this, Josh Stokes is able to keep his right hand page simple, not needing to distract from the article itself, on a nice simple 4 column grid, with lots of space for the article to breath. Ill be printing this one off to bring in on tuesday.

Field: Personal Response

To conclude semester two, we spent three weeks on a personal response to our entire field experiences. We were tasked with creating a poster denoting the place of Graphic Design in making the world a better place, with the two First Things First manifestos as a research starting point. After reading the manifestos, I researched the work of Ken Garland, looking through the projects his personal website had to offer; I was looking specifically for the kind of work he, and the other signatories of First Things First were advocating for. Garland’s famous Campaign For Nuclear Disarmament stood out of course, but I think the manifestos at large aren’t asking all designers to engage in free activist work, but in general with work for the benefit of society, rather than the benefit of a large company.

As a starting point for my research into expressive typography, I researched into David Carson, a designer I had heard of in the past and knew for his experimental use of type. After a google search I stumbled upon This interview with him, which I read in full, really feeling inspired by the work he showcases and discusses.

From my research into David Carson, I also stumbled upon the work of Neville Brody, who does fantastic work with type, for example this which lead me to read further into an interview he did with dezeen magazine.

To kick off our project, we had a workshop day with ray where we experimented with different techniques in photoshop, using photos of hands and objects. I learned how to create duo tone imagery, something I needed to know for the brief

RayDay

We then had a day with David, where we experimented with hand- painted expressive typography, first taking a quote from Stephen fry, to try and show the way in which he speaks:

This exercise allowed me to experiment with demonstrating visually the way in which a sentence is said; it laid a foundation for me to control the way text “sounds” in a reader’s head. I’ve seen this done before during my graphic design education, and has made me wary of how this technique can be misused. An example can be found in this example, where I feel the constantly changing font size and position can actually lead to the reading of the phrase to be rather stilted, with a similar effect to putting a full stop after every word. I think when done right, this doesn’t occur though, and I will endeavor to make sure this doesn’t happen in my poster.

We also experimented doing the same with quotes of our choosing, I found a couple from the manifesto itself;

I think after playing around with these phrases I felt I could find something much more actionable and punchy. Ill come back to this.