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

DigitalMe: Meet the Previous Work.

A couple years ago on my previous course (HNC in Graphic Design) I attempted a similar project that involved setting up an online presence for myself and establishing a bit of my own brand. I like it about as much as anything I did about three years ago;- not much.

I went for a slightly aggressive pink house style, and its something I have very much grown out of now. I wrote in the original design notes for this project that I liked the audaciousness of making a logo out of my own face. I just cant agree with that now.  I think I was trying to adopt a more rambunctious persona because I think at the time I felt thats what employers would want, even though it is literally in no way applicable to me or my personality. Also the colour scheme reminds me of Kaspas, the night- time ice- cream place.

Screen Shot 2015-06-16 at 00.53.56

As part of the college unit I did all of this work for, I had to get in contact with a local design agency and apply for a “mock interview”. I had an interview with Cheltenham based agency Third Floor Design. One piece of feedback I still remember from the interview, -and something thats going to have a massive effect on the designs I create for this- was that all the bright colour, and the intricacy of the logo, made me look less confident; that it might seem more like a desperate attempt to try and prove I have skills where I didn’t need to. This has had an effect on most of my work since then, I’ve realised that elements that sit on a page, or a website or whatever, need to have a function and cant just be there because they look pretty. Its getting the small things right that makes design good or bad.

Consequently, this time around I’ll be making my house style for the CV, Online portfolio et al. be paired back. I’d like the portfolio itself take a back- seat to the work I present within it, Id like the design of the CV to be un- obnoxious and un- intrusive and just function to allow ease of reading. I’m going to focus more energy on things like getting the rag edges right than I would on any kind of logo. Hopefully the end sum of all this is going to be an air of quiet confidence. Or so I hope. It certainly feels closer to how I want to sell myself than the bright pink monstrosity from before.

I did make a CV too, and it is way more relaxed than the other stuff I produced:

CVInteractive

I had done previous research into other graphic design CVs for this, and had come across loads of info-graphic style ones. Many of them were straight- up bad graphic design, and many of them were just kind of obnoxious in the approach they’d taken, cramming in as many vector style illustrations and zany touches as possible. I already knew that was terrible so, as you can see, my CV is a little more grounded. There are still decisions made here that I wouldn’t make now. For one, I would ditch the big pointless pie chart I stuck in the middle. Its doesn’t make any sense, I seemed to think I played guitar for about as much time as I slept in a day. Ridiculous. I also would alter the blocky software skills section  to be a little less chunky, and no longer rate myself 5/5 for photoshop and illustrator, despite my knowledge of the two programs having improved since then. More mundanely, I would probably not give experience a smaller column width because I think its quite a wordy section, particularly now that I have a little more to talk about. Lastly, I would probably not put on the glasses touch at the top. Thats just a bit cringey.

Anyway, Now I’ve trashed my old work, Im in a better place to build a stronger set of work atop its foundation.

DigitalMe: Dewi’s Social Media Workshop

We had a session with Dewi Gray, the Business Start-Up Manager​​ from the centre for Entrepreneurship at the university, to tell us about social media managing for self promotion. Whist I am dubious as to how much an online presence is necessary for getting work in a studio (as I plan to), following the session I do understand how a good online presence is good for generating work and self promotion.

One thing I took away from the session was a better idea of what to put on social media, and I realised better what makes for good content online. It seems so many companies just put straight- up advertisements for themselves on their social media. and no one likes ads; no one goes out and follows you on any platform just so you can advertise to them better. Social media advertising needs to be less direct than that. Content needs generating that people will seek out and watch. Tips, tricks, showcases of other good designers, anything. It also depends on your audience. Often graphic design blogs ect. generate content that other graphic designers would enjoy, which if you’re freelance is exactly who will never hire you.

The session also inspired me to create some kind of product to generate some interest in me as a designer with the added bonus of a passive income to keep me going. Id like the idea of creating some Tshirts which I could sell though redbubble or inkthreadable with a link to on my portfolio page or social media. Specifically what I would put on those shirts I’m not sure about. It’ll be a venture I document over summer and hopefully have up and running before September; Im considering using the International Style Network system we have access to for inspiration on design ideas that are currently trending and put out work based on that. It will be a massive and hopefully worthwile venture that I attempt for a summer project.

Penguin Books: A Summary

I recently received word from Penguin that the book cover I designed was not shortlisted. Of course, there were hundreds and hundreds of entrants so I don’t take this to heart too badly, but I thought it would be useful to review my cover and investigate what I could have done better. Penguin themselves couldn’t give feedback because of the sheer volume of entrants, but I think reflecting myself would be invaluable. Heres the cover I designed:

COMPLETE

There were a lot of things I could have done better with this cover. I think I didn’t spend long enough on the early idea development, and went straight into refining this idea. I think that landscape style images don’t work as well in linoleum, at least not at my level, and of course not as well on a portrait book cover! Looking back, I wish I had pursued the big-yellow-bird angle which I can already picture in my head as a nicer textural close up of feathers which would have taken more naturally to lino, and would have given me better opportunity to add some colour to it, which is something this cover lost out on, I think.

I could have handled the title text better, I think. I actually put it together whilst running out of time after trying to construct the text using lino and failing. I think it could have benefitted with a better treatment to make it less drastically  different from the lino itself.

Its too bad that I didnt get shortlisted, but I completely understand why. Ill be entering again next year the moment the make the books public!

DigitalMe: Matt’s Online Portfolio Workshop

Matt put on a workshop to help us start to consider how we would put together an online portfolio website to best showcase our work.

Purpose of online portfolio

  • To get a job, work placement or internship.
  • Show enthusiasm for your craft.
  • To attract clients if you work freelance.
  • To show what you care about.
  • To communicate your ability as a graphic designer & a problem solver

Who should my site appeal to?

People who go freelance would aim their website at non- designer potential clients and would shape their language that way. Then theres people who aim their website towards customers, that is, people they want to sell a designed product towards (such as cards or tshirts or whatever) Then theres more what I want to do, which is create a website aimed at potential employers. There is always going to be a difference in tone between copy aimed at clients, customers or employers. As I would be talking to employers, I can use a more design- centric language, and focus more on my work than perhaps a customer- centric cutesy brand.

The biography should be:

  • Concise
  • Precise
  • No waffle
  • No buzzwords
  • Clear
  • Unambiguous

It should answer the questions Who am I? How did I get here? How may I help you? Can you Trust Me? and how to contact me.

Some websites we looked at had a blog post section, which can give the website a more lively and updated feel and gives another medium to showcase your personality and enthusiasm in. However, they are only worth putting on if its something you can update frequently, as a blog that hasn’t been touched in months looks absolutely terrible and it would be better if it wasn’t there at all.

What an online portfolio is not

  • A place for your life story.
  • A place to rant; don’t badmouth the injustices of the creative industry or bad interviews. It will make you unemployable.
  • An archive of everything you’ve ever done.
  • A place for experimental web design (Unless it’s a web design portfolio. And youre good.)
  • To be put up before it is ready (No under construction pages)
  • A place to make claims you cant back up.

 

Little Jess Jenks Design

Screen Shot 2017-05-02 at 12.37.30

As part of the exercise we examined others’ portfolio websites. I got Little Jessi Jenks Design , pictured above. I analysed it through the following questions:

Who are they/ what do they offer? Information easy to locate?

all easy to get to from main page

Purpose of portfolio? target market?

targeted at potential clients.

does site feel alive?

a dead link to instagram, although all else doesn’t seem years old. no dates on anything though

Social media?

Dead link to instagram on front page

Conversation between designer and audience

testimonials, easy contact links. no text based social media for public conversation.

how easy is to to view content of portfolio

laid out simply and easy.

consistency in design and navigation of site

consistent feel, although navigation is different on home page to the rest. don’t know if this is a problem.

contact details easy to find

easy to find contact page. everything you need including a form, an email address and a phone number. not going to find out if this is up to date.

typos

not that I saw

passion for their work?

seems super into it. mentions passion in bio, and extensive writing on each her projects seems to illustrate she has a lot to say and feels pretty passionate about it.

personality? how achieved?

personality illustrated through her copy as well as the work she chooses to show.

Descriptions on work

Extensive. possibly a little too much on some of them.

evidence of claims

says into photography but none on page? but I suppose she’s not trying to become a photographer.

previous professional works and clients? testemonials?

a couple testemonials

SEO?

not amazing, but jessica jenkins is a common name. Little jessi jenks brings back only her website though.

amount of work 

a decent amount. Demonstrates a good range.

ideas you would use in your portfolio. 

Has a good range of work; I should probably attempt to put up the best and most contrasting examples of my work to show my range of ability. I love the big square images as links; its nice against the white background and makes for something a bit different to a lot of the other examples shown.

DigitalMe: Ian’s CV Workshop.

For the first week of the Digial:Me self-branding project, I had a session with Ian about what makes for a good CV.

Design

  • Has this been created by a designer?
  • How thoughtful is the design?
  • Bad design is a quick way to get rejected

Content

  • Spelling Errors
  • Qualifications & Experience
  • Language
  • Is it accessible? Does it use jargon you don’t understand?
  • Do you want to meet this person?

We created a dos and don’ts list based on a stack of old design CVs we were given to go though:

Good Practice

Layout, white space, Use of colour,  Restricted colour palette? Software skills, indicator of expertise, Well written, Personality & flavor, Keywords, Attention to detail, Nice paper? Keep It Simple Stupid, Consistency of Type, use & colour.

Bad practice

Dark, heavy backgrounds, Word processed, Whole page line length, Lack of a grid system, No Hierarchy Spelling Errors, Inconsistencies, Unsophisticated, Gratuitous graphic elements, Poor legibility, Unprofessional email address, Too many italic, unprofessional photos.

Here are a couple contrasting examples of CVs I appraised;

The first one was one I selected for being one of the worst possible examples of a graphic design CV. The yellow circles are gratuitous and unthoughtful, and the stroke around the edge of them decreases readability whilst confusedly drawing attention to the type within for no conceivable reason. The document itself appears to be put together on word, so the line length takes up the whole page and is far too long, as well as having no control over the rag. Its harder to read here but the copy itself is poorly written.

The second one was my favourite out of the small pack I went through. The information given is useful and paints the author in a good light. the pretty grid system works well to break up the text as well as lend an element of hierarchy vis-à-vis the leftmost column of keywords. there is overall a much greater quality of professionalism. The only things I didnt like so much about it was the strange, perhaps slightly needless shapes floating around at the top right of the page; it doesn’t serve a purpose in the same way other graphical elements on the page do. Also something I picked up on was the orphan left at the top on the right column, after some header text pertaining to it sitting by itself on the bottom left. This is an oversight that simply shouldnt happen in as important a document as a CV, and certainly something a trained graphic designer should notice.

Level 5 Constellation Reflection

I found the first week of constellation this term challenging. The writing of Arnheim at first seemed impenetrable to me, and it did take several readings to start to parse meaning from his text. I think learning to properly read academic text is a skill I’ve been slowly developing since arriving at university. It is something I still struggle with now, but I am improving with every reading. Flowcharting and mind- mapping out the ideas from highlighted notes, a method we learned in this years study- groups, has been a great help; particularly, of course, in researching for my dissertation. Without the support in learning how to properly do academic reading, there would have been no way I would have been able to put to use the likes of the infamously abstruse Theodor Adorno  (who’s theories will be a cornerstone of my dissertation) in any meaningful way.

Juhani Pallasmaa’s writing, The Thinking Hand had a direct effect on my graphic design practice. Pallasmaa’s postulation that we “think” with our entire bodies and not just our brain; that a painter is thinking in the motions in which they move their hands. Graphic design has always been a very static pursuit for me; my process almost entirely includes sitting at my laptop working on it. Pallasmaa’s writing ended up inspiring me to alter my ideation methods; by engaging in ideation at the computer I feel like I was forcing myself out of a visual frame of mind, presented with the keyboard as my main input device. Ive been trying to involve more physical sketch- booking and cutting of paper and the likes to broaden my style of thinking when it comes to generating ideas. This in all likelyhood was a big influencing factor in the outcome of one of my most recent projects, work for an older folks housing association promoting dementia care; the outcome was very computer- light in its production. I made a animation using physical stop motion and cutting out shapes. I feel like this outcome wouldn’t have come about from the more linear computer thinking I tended to employ before.

In week two, I found the notion of Wabi- Sabi intriguing. At first glance, I was ready to dismiss it as interesting but completely inapplicable to my own practice before realising I was perhaps being a bit close- minded. I was willing to completely disparage a design ethos just because it didn’t apply properly to the one I have been trained to work within. Although Wabi- Sabi ideals do not necessarily align perfectly with the capitalist mass- production model of design I follow it doesn’t make it invalid. I left this session (or after some additional reflection at least) with an altered and extended definition of design in my head. Whilst I don’t reference Wabi- Sabi specifically in my 1000 word essay from earlier this year (How Critical Is Critical Design?), I do talk about what makes something a piece of design, instead of a piece of art. Learning about Wabi- Sabi definitely informed the base thinking that culminated in the essay being written, as well as informing my definition of design.

It admittedly can be hard to quantify changes to design ethos in terms of my work, particularly when it comes to learning about something like Wabi- Sabi, a philosophy that seems to have its ground in the materiality of work produced; this is of course somewhat limited in graphic design to print or screen.

luckily week three  constellation took different design ethos outside of the simple materiality; the video of Cameron Tonkinwise’s lecture is something I held onto as an additional consideration when it comes to design. The idea of design having larger re-directive elements that Tonkinwise outlines through his talk about the washing machine was the original new idea that gave way to my entire dissertation idea. It promoted me to consider designs wider implications. Whilst always having enjoyed and respected graphic design as a pursuit, I don’t think I ever considered it to be a truly world- changing force. Constellation this term has prompted me to reconsider that.

Sticking to a similar theme again, exploring Dunne & Raby in week four also continued to expand my ideas relating to the directive power of design. Talk about the “positive use of negativity” opened up my thinking about design in yet another new way. Id never been conscious to the fact that design as a whole tends to ignore everything slightly negative about human nature. I haven’t found a specific chance to exploit more negative human traits in my design yet because of the topics I have been doing, but I very much would like to base a personal project on it over summer using some coding skills.

Overall, this year of constellation has had a massive effect on my perspective of what design is. I came into constellation this year already believing in the directive ability of design, as a persuasive tool specifically, and the ethical implications of that (Studying the First Thing First manifesto in subject last year taught me that). What I had never considered what the extent at which it could be behaviour shaping, and that design that alters behaviour in turn alters thought, both of which lead to an altering of the environment humans inhabit. I have left constellation this year with an inflated respect for the directive nature of design, and because of that, a greater sense of purpose and appreciation for the field in which I practice.

I suppose I have moved on from seeing design as a simple problem- solving apparatus to a influencing apparatus too.