Work

Website Change!

I’ve decided to change my website as I feel it needs an update to it’s look and usability.

This is what my website looked like before, it had different html pages for each webpage and I’ve found out that it creates a less of a usability for the user. I wanted my website to be a easy to use website and research showed that having a one-page website is a much more safer option as it fits with the ‘one-click’ protocol.

It was pretty basic and I felt i needed to add something else to make it a bit more visually appealing.

The changes that I made were as follows;

  • making the website into a one-page site
  • changing the white background into a textured paper background
  • having 2 navigation bars, one that stays at the top of the page and another for the home page
  • properly centring the website

So now my website looks like this;

I feel much happier having this as my website, there are a few more adjustments I would like to make..but for the moment I am pleased with this.

I overcame a lot of problems that I had, there were quite a few as I am still getting used to web designing and coding. When I first started to update my code, i made a back up copy of my original version just in case i needed to start again.

I was quite scared changing my website because I wasn’t too sure what I could do as my coding skills are quite limited, luckily the internet has all the answers! Changing from separate webpages to a one-page website proved to be a challenge as when I did try to put everything together the alignments and sections were all confused and all over the place. I had to ask for help from a friend and they showed me where i went wrong and i continued to work on my code.

Changing the white background was bit of a struggle as i had to put it into another container, but what i had tried to do was to put it into a wrapper but that didn’t work as it would just stay on the left hand side, even when i changed the margin and padding. I had originally planned to have a different sort of background which look like this;

layout4

but the top part would get cut off, so that’s something I’m going to work on, for when I develop further.

The new navigation bar idea came to me as I was making lists of what needs to be done, and i was using post-it notes to do so. And I thought that it would create a paper theme as the background is a paper texture. Also adding colour to my pages makes my pages pop!

Something else I would work on is the way my work is being presented, I feel as though there could be something improved in that area..so i think I’ll try to find a way to make that better.

Animation!

Recently we’ve been looking at animation, and how much it has progressed since 1914, when Gertie the Dinosaur was created by Winsor McCay. You can see the amount of effort that was put into drawing out all those different scenes, it’s amazing to think that something that started of so complicated and intricate has been transformed into softwares that help you to animate the subject.

Since then we’ve got 3D animation that we create from a computer, when animation was first created there were a all hand drawn and different techniques like cel or phenakistoscope were used to see the interactions of the drawings.

As a  task we were told to create a hand drawn animation, what I went for was a simple stop motion animation;

Drawing this was hard enough, keeping the sizes of the bouncing ball and the dog were hard as i didn’t have any tracing paper to make things easier. But making a stop motion of this sorts is quite simple and fun. Stepping up a notch would be to do something like this;

or

 

Typography

Font

This is the experimented font that I created for my website, I’m still not so sure if I would want to use it just yet as I feel that it still needs some work to be done on it. It was done on illustrator, freehand.

There are a lot of faults with the flow of the actual letters individually and the thickness isn’t shown properly when you use it on photoshop or dreamweaver.

For now I’ll probably use a similar font for my website so I can work on this one!

Headers make all the difference

Before copy     After

 

 

 

 

With the layout that I have I wanted something a bit more visually appealing to the viewer, as you can see the first image shows the very boring sort of header which really doesn’t show much of my ability in using softwares such as Illustrator and Photoshop. Therefore I incorporated my homepage design into a header design to keep the same sort of theme throughout the website. I decided to simplify the design as it may have seemed a lot to be going on in a header. Hence, by just taking away the detail and extending the lines it becomes a lot more interesting.

I felt that using this sort of header would be a lot more interesting than just having the word ‘Work’ written at the top. Also with this header, it can be turned into a mobile layout i.e for smaller screens, as the illustration of me is aligned with the navigation box. Thus making my website versatile for all users.

My Ideas..

My designs were based off the research that I blogged about previously, I wanted to show the sort of designs I created around that research. There is one particular design that I am drawn too, which is a simple 2 column spacious design that can be seen as simple and minimalistic. My preferred colour palette is black and white, but I would like to add some sort of colour that would bring something extra to my website.

Inspiration for my website

Whilst researching for ideas for my online portfolio i came a few that caught my eye..I knew that i wanted a website that stood out and was something different. I like the idea of having an illustration somewhere on the website, that would showcase my illustrator skills. Also having a minimum amount of colour was also quite important for me as when i go onto websites I’m not entirely attentive to the actual website.

What I’d really like to create is a simple portfolio that truly showed my skills and work.

What I like about these specifically was that they had a theme that ran throughout the website. It was either the logo stayed the the same and stayed in the same position or that colour was used to link pages and links. It showed that the person behind the coding really knew what they were designing.