DigitalMe: CV generation

As part of my previous work, I looked at a lot of design CVs. One thing I really, really wanted to stay away from was overly Infographic CVs. I wanted to treat my CV as a piece of editorial design. I did start off by playing with fonts  & colours, although this started to evolve into me designing a logo for myself, which I am not as interested in doing; Screen Shot 2017-05-12 at 17.25.37

Wanting to stay away from creating a tacky over- designed logo for myself (again) I decided to stick with using an orange dot on further design here. why orange? I did a bit of investigating into colour theory, and it seemed the most appropriate. On my old self- branding stuff I used a lot of pink because I thought it made me seem energetic and really outspoken. Of course, this was born out of anxiety that I needed to be super super confident and extroverted to ever work in design; It wasnt actually very honest to me as a person. Since then, I have gained a little more faith in myself and know that I don’t need to be a big- shouty person to work. Orange embodies enthusiasm, happiness, creativity and determination. I had also considered green, as part of my branding here was veering towards me being honest about having little experience and wanting to experience as much of the creative sector as possible. I did feel however that framing that with green colour would perhaps emphasise the more negative aspects of being unexperienced, whilst orange with a focus on un-jaded (pardon the pun) enthusiasm would work better. With that in mind, and after spending some time writing the content of my cv (and lots more time reading exactly the most effective way to do that) I started putting together some rough CV ideas. I came up with this: Screen Shot 2017-05-18 at 14.06.45

As I have said, I wanted to make this as functional and non- flashy as possible, and just show off my type skills as plainly as possible. Obviously, this isn’t 100% ready; the text itself needs a once over by someone who’s better at written english than I am, and then it’ll need a final comb over for things like widows, orphans and the like. I tried to bring the orange back in with the // artefacts in the text but I am not completely happy that its brought back strong enough as is. Originally they weren’t bold and they weren’t quite as large in point size and after talking to some friends bolded it out. I also tried putting some text- sized circles to mimic the larger mark at the top, but they came through far, far too strongly. This will be something I mention with tutors at the next crit. I also realise that making this in portrait makes it specifically a print CV, as its a bad shape for screens, so I put together an alternate layout to use digitally; Screen Shot 2017-05-18 at 14.08.17

But it needs way, way more work until I’m happy with it. I cant quite make the line lengths something that I like whilst not killing the white space balance. Its a problem and its going to take several hours of messing about to make it something I am happy with.

I actually did quite a lot of reading in the interests of making the copy work, reading this, thisthis, and this. I think a lot of designers forget the most important part of a design CV is the copy. thats where you really sell yourself. Perhaps the design is lower down on the CV’s hierarchy of needs, but the copy is probably more important, just like it would be with any other CV.

Now I have something of a house style for myself and it will be something I can easily extrapolate to my website & PDF portfolios.

 

Advertisements

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.

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.