Last day of website!

Spent last night tweaking up the last few bits of my site.  For some reason, on the home page, the intro text was missing, until you started scrolling, which i resolved.  Also put a 10% opacity box behind the text, so it stood out more. Then i needed to update the typeface, for one that i had pre selected on Google fonts.  The first font i had chosen was one called 'Poiret One', but when i installed it, it looked horrible, as the 'e', had an upstroke on the crossbar, which when you put it into a body of text, looked awful.  So i went with my second choice, which was called 'Questrial', which worked a lot better.

And that was the final thing! Or so i thought.....turned out i'd missed out something on the brief, which involved 'validating' all the html, which meant we had to copy and paste all the index and css into w3.org, and it told you if there were any errors, which lo and behold, there were alot! But Dean showed me a site called 'dirty html', which you paste the html in, and click 'clean', and voila! Well almost....it cleaned alot of my index, but not all.  So i did the rest manually.  Luckily Dirty html cleaned all my css pages perfectly.

So here is a screen grab of the home page, which shows the new typeface-

Site is taking shape

So its been a while since i posted here, but what with half term, girlfriend visiting, generally just getting my head in the game etc, its been a bit of a blank period.  But i came back with a vengeance last night, and asked a friend who is a sort of web designer, if he could help me out, and thankfully he was willing.

I'd already got the template for my site up and running, and with the help of George, managed to change it here and there to put in the content that i needed for my site, but only had got a few pages done.  My problem is, is that if i'm learning something new, especially something that is complicated, i can really only do it one to one, with a good teacher, and no disrespect to my tutors, but they haven't got time to do this with me! Hence why i have taken so long to get this thing up and running!

But thankfully my friend was a great help, and was very patient, and worked with me exactly how i like, making sure i do everything, and he just points me in the right direction until i understand.

Last night i learned how to duplicate pages, and rename sections, as the template i was using didn't have enough sections in it, also some of the sections weren't a useful layout to me at all, so i just deleted them, and added in another section of the same layout.  I also learned how to add in a link to Google maps, which was great, as it was something that i had in my ibook, and had no clue how i was to insert it in my site, and i even found a png of the Google maps icon which looks great.  Also i put in the AI that i created for my ibook.

So heres what i acheived-

Maybe doesn't seem like much, but it was a lot to take in for me, as HTML i still find completely bonkers!

First day of having an actual page to work on

Finally managed to get something done today! HTML wise anyway.  We'd done some stuff in lessons before, but i knew it wasn't what i wanted.  I'd come across a site a few weeks ago with free responsive web page templates on it, and there was one in particular that really took my fancy.  So i went ahead and downloaded it, not knowing quite what i was doing.....I obviously got a bunch of files- images, css etc.  But had no idea what to do with it.
So i collared George today and asked him to sit down with me and help me get my head around it, which fortunately he did.  I got him to show me how to insert my own images and change the generic text.  I really just needed to start on something, i was beginning to think i was going to get nothing done, as friends of mine i had hoped would help me out have let me down. 
So heres where im at-

From here, i still want to change the fonts (apart from the title), and maybe put a drop shadow on the intro, or change the colour so it can be seen against the sky.

And there is still the matter of inserting sections, as i only have chapter pages at the mo, so still a way to go.

Barcelona OFFF Festival

I'm writing this a bit later than i would normally as i wrote a few posts on the app version while in Barecelona, and the app decided to erase my draughts.

Day 1- We all went down to Gloriés together on the first day, and saw the opening titles/show reel by Lorum Ipsum, who are a group of 10 multi nationality artists and designers.  
First off, they showed us the teaser trailer they had made of the OFFF festival- https://vimeo.com/84451337.  This is a great little video, and reminds me of the brief we had for our own video project, being that all the clips are very short, most less than a second long.  It was styled on retro american tv commercials from the 50's and 60's, and is coloured in pastel shades, which in contrast, is quite a modern style.

They then went on show the actual show reel they had made.
The video is supposed to portray love and relationships in a round about way, and i think works very well.  Its very arty and contemporarily styled.  There are some good ideas on angles to shoot from, and content for the shots themselves, e.g. filming a person in the mirror instead of the person themselves.  Most of the shots are metaphors for what a person id feeling or thinking during various stages of a relationship.
https://vimeo.com/95364777

They certainly were an interesting bunch, and had obviously planned and choreographed, and rehearsed their presentation to the nth degree.  After the video, they went through the process of making the films over the year, which was very interesting, they obviously had a lot of fun, and all get on very well.  It made me think how i would like to work in a team like that on a project one day.

At 14:45 we watched a small bunch of Germans called Polynoid.  They were film makers based in Berlin.  They certainly are very 'out there' when it comes to their video making, e.g. its outstanding!  No idea how they do the effects they do, but then i've never dabbled with such technology.  This was one of the first clips they showed us, a ad for Lonovo- https://vimeo.com/50522392.  Once the clip is finished, i was wondering what the point of the carbon fibre was, as when it starts showing the laptop, it doesn't appear to be made from carbon, but its almost irrelevant, as its a very cool effect.
The last film they showed us, was another that really made me sit up.  They said it was for Greenpeace, then let us watch it........https://vimeo.com/93239025.  Obviously at first, you think it may be real, but then i realised it is a bit far fetched, and doesn't really fit with Greenpeace's ethos.   But then it finishes with the phrase, 'should we create a new world, or save our own', which is a poignant thought.  Again, insanely clever, the robotic bees look completely real, which for a small team, seems pretty impressive, especially when you look at a film like Transformers (Michael Bay), which obviously had a massive team, and massive computing power.  Again obviously, Transformers is hugely complicated and long, but i'm still very impressed with what the Polynoid boys do.

At 16:45 we saw Seb Lester, who was the first person i really wanted to see, as he is a typographer.  And he did not disappoint.  His presentation was flawless, and everyone was riveted from start to finish.  he started out with a little bio on himself, then went on to what fonts he has designed over the years, which is comprehensive, and includes Waitrose.  He spent most of the talk, telling about how he has got into calligraphy, which is super impressive.

I'm not going to waffle on about it, but i'm super inspired, as i got into calligraphy when i was a kid, but never stuck to it, and now i'm gagging to get back into it, and have already ordered a basic tutorial book.

Day 2-  Friday was a bit of a mess.  The first thing i saw, i couldn't even figure out what they were talking about, so wasn't really listening, and hence i can't remember anything about it!  A few of us had decided to see a guy called Alex Mathers, who is an english Graphic designer, who uses Illustrator alot, so we were all interested to see what he had to say.  At first i was quite impressed, some of the paintings and airbrushing he done when he was at college, was outstanding.  Then he showed a few of his more recent work-

It's very cool, modern, simple and clean and good, and he obviously is a desirable graphic designer, but after that, he just went into this mono tone presentation.  His slides were terrible, just text on a page, and he just waffled.  Then people started walking out.  Then i realised there was a constant flow of people walking out, and i felt a bit bad for him, but a few minutes later, i'd had enough myself.

After this, i wasn't in the mood, so went back to the hotel.

Day 3- I wanted to go exploring up the Barcelona hills Saturday morning, so didn't go to OFFF till 2pm.  2:45 was Erik Spiekerman, one of the most well known typographers in the world, and certainly my most anticipated speaker.  

If i'm completely honest though, his presentation wasn't amazing, but his sheer presence was enough, he was very funny, swearing alot!  And he done an animation on all the fonts he had designed and been commissioned for, which was very extensive.  He then went on to tell us about his company, the people who work there etc.  He also went through all the stupid questions he gets regularly asked, which was very amusing!

Overall, it was a good festival.  Outside of the rooms, there was stalls selling all sorts of cool graphics based stuff, which i spent a fair bit of time perusing.

If i go again next year, i'm going to spend more time at the festival now i have done a bit of sightseeing in the city. 

 

Responsive websites

I realised the other day, that i kept hearing the phrase 'responsive website', but hadn't really taken on board what it meant.  So i made a point, as i did similarly in one of my previous posts, and searched on google for 'great responsive websites.

First site that comes up is http://www.awwwards.com/websites/responsive-design/.
The first result on this site, is a site called Handsome http://handsome.is/, which is a UI and UXE site. It is a very fluid site, and compressed down nicely when you shrink the window, to enable it to work on 
mobile devices-











On these pages for example, you simply use 2 fingers to swipe though to the next page on a macbook, or one finger on an iphone.
The only other thing on the home page, is the link 'explore', which takes you to the contents page.
This page is also, as you would expect, a nice clean layout, and when you hover over the relevant item, the roman number on the right, nicely fades to an arrow, and the words change colour-

These are great features, which i'd like to incorporate into my own site, although i'm thinking it could be quite a challenge.

The next site i looked at was http://www.electricmainline.co.uk/.  Again this is a nice, clutter free site for a guy who is a freelance creative director/art director and designer.  Its a site to showcase his work.  Its mobile compatible, and the bulk of the home page is a scrolling selection of his finest work-

As you hover over each picture, it goes dark with the text 'view article', and little animated icon.

I feel i could spend all day looking at these sites, but really i should just get on and try and figure out how to do them myself!

freelance Creative Director / Art Director / Designer

Big lesson of html

Heavy day today! Asked George about navigation, and ended up pretty much getting some personal tutoring for a couple of hours with Dean and Shaqil, which was pretty useful.

We firstly created a grey box to put everything in, the inserted the required wording.  He took us through copying and pasting the initial tags from html shell, then where to go from there. We started out by putting in the initial wording for the navigation, which started out as a bulleted stack on the top left.  George then showed us, that if we copy and paste a bunch of html from http://meyerweb.com/eric/tools/css/reset/ , which allows you to take out default settings.

We then went on to align the text along the top, so it was all in a row, Create boxes around the text in a different colour, turn them into links, then change the colour of them when the pointer is hovered over them.  We then went onto learning how to change the font via Google fonts, which was probably the easiest part!

I'm still no where near the point where i'm properly remembering much, which is annoying, but its just so vast.  I don't doubt i will figure in time, but its hard when you got other stuff on your mind, e.g. Barcelona!

At the end of the day, i started a few sketches on layout of the actual web pages i might use, getting some inspiration from the sites i looked at in the previous blog.

First few lines of html

Finally learnt today what i was so confused about before, which was how to get a html page up and running, e.g. what you would see online once it has been published.  Jasper showed me how to copy and paste a from html shell (http://www.htmlshell.com), and where to put in things like titles, headers, body text etc.  As it stands i only have 2 lines of a web page, but its a start!

Unfortunately, last week when we were having lessons on html, they were just moving too fast for me to keep up with, but i understood a few things, i just needed to stitch a few things together in my own time.  Also I've found a few sites which are useful e.g. http://www.codecademy.com, which should make things a bit easier.  I remembered swell today about the 16 columns rule that i need to remember. And to check on http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php to make sure characters are going to work on html.

Andrew reminded us of the age group this site is aimed at (15/16 year olds), which i didn't think too much about when i did my ibook, although the ibook is not too bad, but maybe a re jig of the fonts i used, to ones that are a bit more appropriate.  I based the fonts before on modernity, and the grace and majesty of glaciers.