OUGD 504 - Evaluation

What skills have you developed through this module and how effectively do you think you have applied them?

- Throughout this module I have learned a lot about myself as a designer, as well as my skills. Having never worked with web before, having little or no understanding of coding and web requirements, I feel that this has been the area in which I have learned the most. I now feel much more capable and comfortable when working with web, and think that I have shown this through the website that I created; despite it being unfinished due to bad organisational skills on my behalf. I have become quite fond of working with web, although my love for print is still strong.

What approaches to/methods of design production have you developed and how have they informed your design development process?

- Within this module, I have become much more reliant on the early stages of design, such as thumbnails and mock-ups. These have helped greatly, especially within the web project, as without them I would've found it very difficult to finish anything to even a reasonable standard. At the start of the module, I was very much on the ball and this allowed me to get a good start on the projects and it was with these foundations that I managed to create the work that I did. 

What strengths can you identify in your work and how have/will you capitalise on these?

- I feel that my works strongest point is often the concept behind it. I like thinking through my ideas and coming up with ways of pushing my concept and giving it more of an effect. Design is much more effective and successful when the concept behind the design is strong, no matter how nice it may look. However, I do try to create work that I personally find aesthetically pleasing; this is something that is vital within design.

What weaknesses can you identify in your work and how will you address these in the future?

- My extremely poor time management and bad organisational skills have previously resulted in projects being neglected and left until the last minute, which unfortunately has happened within this module. I feel as though my design could've been so much stronger and definitely much better executed but because I had no time left at the end, I just rushed everything in order to hand my work in on time. I was embarrassed to hand in the work that I did, in the state that it was, and this module has been a lesson to me.

Identify five things that you will do differently next time and what do you expect to gain from doing these?

1. I will plan out my time much more efficiently which will allow me to work to my full potential without having to rush things at the last minute.

2. I will make sure that I am documenting everything as I go. This is something that I was doing for some time before the work load got the better of me. If I can manage to keep on top of the blogging, that way I can focus more on the actual designing, thus allowing me to produce better work.

3. I am going to spend less time procrastinating and more time actually working. Although I spend a lot of time inside the university, I seemed to have little to show for it by the end of the module. This proves to me that if I utilised my time more efficiently I could produce a lot more work.

4. I am going to aim to be the best. To often I reassure myself that I'm not the only one, I'm not the worst. But that isn't good enough any more, I need to start really pushing myself in order to work to my full potential.

5. I will achieve everything that I set out to, not just some of it. I usually end up having to leave things out at the end of projects, or modules, because I haven't got the time. However, if I was to actually sort everything out and get those little bits done, I could achieve so much more.

Attendance: 5

Punctuality: 5

Motivation: 4

Commitment: 4

Quantity of work produced: 3

Quality of work produced: 3

Contribution to the group: 4

OUGD 504 - Studio Brief 2

Production of Website:

I started off with the basics, adding a container.

I then started to add body copy in the place that I wanted it, as well as a title that will later become a home button.

As I wanted a plain background, I removed the yellow colour so I could see how it would actually look.

I started to insert the buttons that I would need. I was going to have six buttons on the left hand side, with a links button in the bottom left corner and an archive button in the top right corner. I made sure that all of the buttons were fixed so that when it came to making the rest of the page scroll, they wouldn't move. However, I am unsure how I will make a scroll as this is my first ever website.

As you can see below, this is how my rollover effect will work:

I then repeated this process, adding in all of the other buttons.

I realised that I needed to work from the left and the top because otherwise my buttons would be in the wrong place, like in the above image. Once I altered this, everything was fine again.

Now that I had my buttons in place, I wanted to make it so when one had been clicked, it would reveal text beneath it. I put in the positioning of my text as so:

I had to then reposition the buttons on each page so that they were lower, allowing space for the drop-down text effect. Although this was fairly easy, it took up more time that I had thought it would.

I had had a few problems sorting out my buttons and my body copy, but eventually through trial and error, I got there. Now when each button was clicked, the buttons were positioned accordingly to allow for the body copy.

To make the columns for my images, which would scroll, I simply made another three containers that were positioned where I wanted them.

I then just inserted my image where I wanted it to be, with the rollover effect that I wanted.

Rollover:

I re-aligned the containers with the top of the text, as I wanted it. This meant that the top image would move up slightly before it was cut off (when scrolling).

I continued to add in more images, hoping that the scroll would just appear by itself once there was enough content in there.

As you can see above however, this was not the case. Although the third image was off the page, it didn't scroll. The rollover effect worked, but with the positioning of the images being fixed they couldn't scroll. I read online how to make things scroll, even coming across a website that said I just needed to copy across the coding, which I tried:

As you can see from the image above, this wasn't successful. I was unsure what I was doing and the coding didn't seem very simple. I decided to ditch this idea, and try going at it from another direction. I spoke to a member of staff from the I.T department, who helped me through it and showed me how to get it to work.

I made four columns, one being the fixed menu and the other three being where the images would be. These were all relative, which meant that after enough content had been input the scroll would appear automatically like I had hoped. We had one div id, which we set to contain all of the information about the columns and then we had three classes; the classes simply told each column where to position itself on the page. I then added a 'fadeblock' at the top and bottom of the page, which was just a white box that hid the images as the scrolled.

The images started off lower than they would actually go, so they would scroll slightly before being hidden by the fadeblock.

Now the columns were set up, I just had to start inserting my images.

By changing the margin-bottom, I made the images more evenly spaced out and look more uniform. 

I just went about correcting any issues I found with the layout, such as the body copy having no margin, and the archive button being too far to the left.

So far so good.

As I couldn't figure out why the body copy margin wouldn't change, I simply changed the width of the box it was in, thus forcing it to be the size I wanted.

I then had to repeat this process for the archive page that I had planned on creating. This meant that the sizing would need changing, as the images were half the size. Other than that, it was all the same thing and I managed to do this with little problems.

 I added a back button as I felt it was needed. I also realised that due to the change in size of the images, I would need to add more 'fadeblocks' to hide everything that I wanted to.

I also wanted to add a description page to all of the images, which involved adding new columns for the full size images. Again, this was the same process and I managed to complete this even easier than before.

For the links page, it was just going to be simple and clean, with links to various websites. I just added body copy into columns to get an idea of how it would look.

I then changed the colour of the body copy, so that it was the same as the category images. I took the colour information from illustrator where I had originally created my colour scheme.

At this point, I made some slight alterations to sections that I felt were slightly off or not in line etc.

The homepage was lacking in my eyes, and I thought it would be really nice if I could get some sort of a slideshow that displayed some of the work that was on the website. But, I had absolutely no idea how to do something like that so, I googled it. Thanks to some help from a fellow student, I came across this website that was simple to use and allowed me to create the effect that I wanted.

With some slight alterations, I managed to change the aspects of it that I didn't like such as the shadow, as well as making it the correct size for my website.

After I had inserted some images, everything was working fine. This is how the transition effect worked:

However, due to very poor time management skills on my behalf, my website remained at this point. I was forced to remove the archive page and links page, and despite these being additions that weren't actually needed, I feel as though without them my website is nowhere near as good. However, I am happy with the skills I have learned through this process but would've liked to get the whole thing finished to a standard I was proud of.