Digital Me: A House Style

 

This slideshow requires JavaScript.

Here is the house style I have constructed for myself for my self- promotion pieces. I created a simple circle as a logo which is a subtle call back to my original self promo stuff from my college days but more authentic to me. I used orange rather than pink to try and convey an increased sense of maturity as a designer whilst preserving young enthusiasm in my brand. I changed my fonts from Jaapokii to just a touch of Helvetica coupled with Baskerville for a more refined look. I made the whole thing much more type- reliant rather than infographics, which is exactly why I used the forward slash as a header marker rather than any vector element I could have produced. All in all, I feel its quite successful and I am happy with it. I even used this material to apply to an internship at the Welsh Rugby Union.

 

Persuasion: A post- mortem of Dementia Friends

I don’t fully believe that my Dementia Friends project was as completely successful as I would have liked it to have been. I think I made some mistakes on a technical level which made the outcome, in regards to the video, slightly more crude than I would have liked. The problem was that I had never really done stop motion before, and because of that I made a few key mistakes that I didn’t foresee during production. Principally, I should have taken a lot more care with the lighting levels whilst capturing the images. the camera was automatically making changes to the white balance depending on how much of the black background was on the screen.  I will be attempting to make changes to this in Premier Pro, although I fear it will be a frame- by- frame job.

The client was kind enough to email us individual feedback for us to work on;

Billy Barnes – Enjoyed the video, very good clear message, you took on board what Pat our resident said how she felt about living with dementia. Could it be more colourful? I’m no graphic designer so I’ll leave this with you to decide.

I am glad that it was obvious I had taken on information from our discussions. As for colour, I understand the issue. the posters themselves being mainly dark grey. I think that its important that the background isn’t colourful itself as it allows the colours of the paper- people to pop. Perhaps I could improve it by increasing the vibrancy of the colours involved? Similarly, I may see if i can decrease the darkness of the background just a hair, as I had multiple printing issues with the shadow of the paper- chain not showing up against the background after print.

I also reviewed the feedback gained from my tutor:

Your presentation slides are well constructed with a consistent, thoughtful connection with the colours of the Dementia Friends flower. The embedded animations all worked without any hiccups. You worked well as a team in setting this up and in delivering it to your clients and general audience. You should have introduced yourselves at the beginning however.

You introduced the presentation clearly and with confidence. When presenting your own work you were suitably animated with good positive body language. You need to try to reduce the number of times you say “sort of like” when presenting in future however. Your idea is simple and clearly communicates working together. The images on the poster and Facebook post square work well but the social media banner does not have the nice shadow like the others. The shadow gives it depth and makes it more interesting. Some items need more information on them to make it clear what the viewer can do to become a friend.

The animation has a charm despite its unsophisticated production standards but needs to have a consistent, dense black background. Some shots reveal a textured, lighter background which interrupts the narrative – it should be the same background all through. Some of the transitions are a little crude and need refinement I feel. The hand across the image happens so quick it doesn’t communicate your intentions. The character in what looks like bandages also is a little confusing. The lines that appear when the character disappears is too playful and is not needed. The audio is also a little too playful and light for the subject matter. Perhaps it would be better without the backing track altogether but with the voice over being a bit louder. The voice over is well written and clearly delivered and communicates the narrative well. Despite all these comments I feel that with further refinement, this could be a very successful outcome.

In regards to the presentation: Im glad for the feedback on us not introducing ourselves; I didn’t even realise! I think I was so nervous it completely passed me by. I am encouraged by the fact I was perceived as being confident however, because I most certainly did not feel that way. I have learned however that its never a case of feeling confident as much as acting confident. I will likely always hate presentations and speaking in front of any number of people, but as long as I can literally do it well its no massive deal. If I don’t find myself with every presentation I do more confident, I most certainly find myself more functional and thats progress.

Attention is called to the changing background which I have already talked about here, and is something I’m going to try my best to fix. Ideally, I would capture the whole thing once more under improved conditions, perhaps with the camera set to have a fixed white balance to ensure the background stays dark. As to the “pop” lines when the central figure disappears, looking back I’m not sure exactly what I was going for. I feel like the whole thing in my head was inspired in part by the Change4Life campaign, and the lines were a direct result of that influence. Of course, this animation doesn’t have any of the same kind of cheerfulness as the Change4Life initiative so just seems out of place here. They will go.  Lots of the feedback seems to stem from the fact I was recording it at about 8 frames per second; the transitions would have likely seemed a lot less clumsy and something like the hand would have been in frame for longer should I have stuck with 12 or even 24 frames. I was trying to find a happy medium where the animation didn’t seem to janky whilst not ending up having to spend too many weeks getting it captured. What little experience I have with animation, doing a rotoscoped piece last year, I did myself a disservice by trying to animate in too many frames per second and ending up spending far, far too long on what ended up being a fairly low quality and incomplete one minute of footage.

I have a feeling the whole concept could be pared back to its core components to make a higher quality final outcome. A friend working on their persuasion piece recently showed me a gif they had created to improve on an animation they had originally submitted. It stripped the whole concept down to its core, and worked so so much better for it. I think thats the problem with my idea here; it was just a little bit too bloated. It could have been a much more simple solution if some extraneous elements were to be removed. Just like in the S4C brief, I learn once again that it is always best to Keep It Simple (Stupid). I think thats the biggest take away from this project: I need to learn to not add more than I need to, and focus on doing what is needed to a high, high quality. It would have also helped if I didn’t try to create a final outcome in a completely new medium I had never tried before first time around in a short time span, haha.

 

 

Branding: Reflecting on Dragon Glass

I’ve been reflecting on my Dragon Glass recently, and am going to be doing some improvements to the whole thing based on that. First things first, I’ll be reviewing my feedback from the conclusion of the project, a couple months back;

I like your research progression, especially as you begin to develop iterations of colour and pattern. Well thought out and documented. However, as you reference heraldry a lot in your documentation, it would have been great to see some evidence of research into heraldic forms and colours, as it’s a huge resource.

A good outcome. I think the dragon’s head loses its form a little on the embossed leather touchpoint, but that’s nitpicking.

I do question your perception of the target audience. You’ve focussed on a social demographic, rather than a commercial one. The people who need stained glass services are quite simply ‘the people who need stained glass’. Think about targeting the NEED, not the person. Case in point – I had a lot of stained glass work done while renovating my house, and I don’t fit your demographic one bit!

Spellcheck is there for a reason. Use it!

I particularly take on board the target audience comment here, I will be revisiting my development PDF for this and rewriting that part. Whether this will have a knock- on effect and alters the outcome at all will become evident after I’ve sorted it. I did write a very specific target market though, and I think I may have bordered on being tongue in cheek with it, perhaps even looking down onto my target audience a touch, which was silly. Ill be reworking that for sure.

As for the research, I will be revisiting heraldic forms and colours, and because of the embossed leather stuff, I will be attempting to rework the logo just a little bit.

I’m also going to be assembling the whole thing into a nicer display package for my final touch points, because this was something I think I rushed a bit and its not presented pristinely!

Easy.

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.

 

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.