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: 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: 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.

The S4C Project.

For part of our branding work we were thrown a live brief from the Welsh TV channel S4C, to make a variety of ident pieces for their st davids day celebrations.

As a group we worked fairly well together; everyone had a voice and was able to contribute creatively. This made it a relaxing atmosphere and pleasant to work with them. Perhaps it had its downfalls, as we took possibly a bit too long to narrow it down to a single idea.

I drew the storyboard above after we ended up singling in on the idea of someone going for a run near welsh monuments and displaying elements of modern welsh culture during. After a meeting with tutor Ian, we decided we needed to involve more of a narrative in the film, so team member Jacob produced a whole new moodboard:

This one had the added narrative of a young gent running to see his daughters eeisteddfod celebration. There were also ideas of animations thrown on screen, although we eventually nixxed this after we were told it didnt serve any purpose, which I was inclined to agree with.

After more discussion we put together a larger moodboard with a few kinks in our idea more worked out which came to this;

 

Which we then after more discussion became this:

img_4068

and then finally, after feedback from a rehersal pitch with tutors, became this;

img_4070

Here, we had removed any animation ideas as it was superfluous, we changed up the opening shot to be of the daughter in town, so the idea of her waiting is there from the start, as well as popping back to her in the middle of the advert. We also accepted advice to make the journey “harder” by addind in our man jumping a fence. With this, completed visuals, a animatic made by Izzie (which we added music too to try and put the feeling that we wanted across) and a script we were ready for the actual pitch.

The actual pitch went quite well, we introduced our idea and after I altered our script slightly, the S4C guys seemed to understand our idea and what we were trying to get across. We communicated well; we all did our delegated parts of the talking well. I probably would have changed from a straight up script for myself to cue cards as I find these easier to read from and I probably wouldnt have sounded half as nervous. Either way, I think we did the best job we could and if they dont want our idea, itll be because they dont like the idea itself and not because we didnt sell it as well as we possibly could! I cant wait to hear back from them.

Dragon Glass

img_4065

This week we were given our job bags ;- I was given “Dragon Glass” a premium stained- glass glazing company aimed at rich upper-middle class people living in the country side. Ive been tasked with creating the “Brand Identity”, a workshop sign, business cards, A5 fliers, Tshirts and Craftsmen’s aprons. Straight away I had several questions for my new client; – who would the Tshirts be for; would they be something sold to customers or something staff would wear? What kind of workshop sign; would it be something accrylic to screw to a wall or could I play about with a swing sign? I have at this point messaged joel with these queries.

Looking at the job bag, the consumer profile indicated a market of people willing to pay more for quality, obviously more interested in upper market than value products. The moodboard I recieved along with this had a lot of traditional materials; wood, worked metal, stone,  and of course glass. It also had refernce to fire and old thatched workshops.

This all gave me the feel for a brand that wants to showcase its longevity; to broadcast that it was established in 1850 or something. I think it would have am emphasis on its traditional, hand crafted methods; as a luxuary artisan brand. So my research begins.