Week 4 Work in Progress

meandwebmedia

Monday, 26th May:

Web Media is one of those classes that could make you eat a whole pizza. Another solid 9 hours on this website. Here is how it looks: Homepage     Page_1   1024px-S1e2_finn_angry_at_lsp1

This post will probably just be pictures, I’m so done.

Page_2

Page_3

Tuesday, 27th May:

10409528_689927501056015_2798697242815380745_n   Page_4   The computers in level 5 quit unexpectedly about 5-6 times an hour. So I tried to keep my cool but I ended up making this final page about 4 times because the computer hates me. GLEE_ANGRY

 

So I felt my assignment was getting a bit repetitive so I decided to make a different list for the last page out my layouts to show my variety of ‘skills’ at coding.

bdb3e80b09cdb3fd05a069b84fd50397_large

Page_5

I am so flipping ready to consume some food.
What day is it?

Wednesday, 28th May

I bought donuts and started coding today, just the HTML.
Because it is something that we have never really tried before I’m finding it difficult to differentiate between what I should have as a P or a header, as well as what to tag each paragraph (p1, p2, p3…) I think it will become clear when I start the CSS document but I can’t help but think I am doing this the long way. Obviously I could set a few as p1 and define rules that make them all the same size but for the time being I totally cannot think that way. I’m thinking I might actually make a guide line for myself before I get stuck into the HTML because I only wrote the homepage HTML this morning and it’s pretty straight forward.

There is also this little line under most of the example HTML documents that Matt has given us that looks something like this:

<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=9″ />

What is this? Someone please explain.

Also as a side note, I’m using C++ to code as I prefer it and think Dreamweaver is lazy, and you should only be lazy when you actually know what you’re doing. Which I don’t.

Capture

 

Go me! There is still a lot more I need to work on. I think I’m going to be here all day again..
I don’t think I’ve ever put this many hours into one assignment.

Layout Refinements & Junk

Homepage_2

 

^^ Ignore that big space at the bottom, if I crop it Photoshop crashes so I gave up trying.

Thursday, 29th May

what-is-html

 

What week are we in? Am I still writing in the correct WIP report? Who knows. So I think I finished my html… All of the pages seem to be working correctly now I just need to style them. I can’t help but think I am doing this the totally ineffective ‘long’ way. I guess I’ll move on to the CSS now? I’m not really sure if I’m ready but hey, will I ever really be? I guess first I’ll save everything out for web? The obvious move -.-

 

Reaction-GIF-Angry

 

There is no time like CSS time!

heeeere we go

Step 1: Complete your HTML

CaptureStep 2: Have a tea break

200_s (1)Step 3: Actually start the CSS document.
I decided to being by loading in my fonts … it seemed the most logical thing to do.

cssStep 4: Cry

Step 5: Pull yourself together and make sure your HTML references your CSS correctly.. -.- 

css2

Advertisements

Work in Progress Report 5.

Coding began today.
Apart from having a little woopsey with coding everything incorrectly and Matt being rather impressed with my ability to make a disaster work so well, today was a good day!

I managed to get my fixed layout working:

Capture

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I’ll be moving onto my fluid layout tomorrow, for the most part I’ve got it working, but not to a point where I feel like putting it on wordpress. Also, it’s not quite fluid yet (hooray!) So I’ll be polishing it up tomorrow.

Just a little post for now, as more unravels tomorrow, I’ll post.

🙂

Work in Progress Report 3.

tumblr_lzrltk50PC1r4hwmoo1_500

This sums up week 5 pretty well.
Anyway, hello! Welcome to my 5th ‘Work in Progress’ report. I’m going to talk mostly about my fixed layout because I finished that last week and I’m still not happy with my fluid layout. Nevertheless, I began the week with laying out all the provided text in Photoshop like so:

 

Layout3

*Shapes mark photographs and/or imagery.

 

I wanted to make the text look like a book as I’m going for a bookshelf appeal.

I went and took a few photos but no matter how hard I tried I just couldn’t get the text and the photographs to ‘marry-up’ together. Something just didn’t look right. So I did the thing I do all the time.. & I started again! Back to the base layout.

I thought about what I really wanted my page to look like. Having the text arranged in such a way that it looked like a book was and still is a good idea, as long as you make people unaware. Basically what I’m saying is I didn’t want people to come to my website and go “Oh, a book… Lovely”. So I had to make everything around it look better. Photographs just didn’t do it because the layout ended up looking like a text book and it was sooo bad I’m not even uploading it.

 

angry-no-l

 

 

Work in Progress Report 2.

 

So, I decided to start a new concept this week, and I have to admit I’m running out of steam here with Media Comm being due and all so this will be a short post /*hopefully*/

I plan to just show you what I’ve done and then all-a-yall can just comment “pretty” on it and we will all be done here and we can get back to it.

Concept_2_1

GASP IN AWE.
No, it’s not actually that good, and this was the first of many refinements to come.
I will say now that the background image is not my own photograph and I do intent to take my own when I get a chance /*after Media Comm is due*/
Bueno. I added a drop shadow to the text to make it look as if it was on the bookshelf, not particularly well done but you get the idea.

 

I then added the other elements that I had made from my previous concept and changed the colours around a little (to make them suit).

Concept_2_7

Bueno_cae157_2178498

 

So, after looking at this layout for a little while I decided that the text might be a little to hard to do letter by letter, and if I imported it as a picture I might get slapped. I also decided I didn’t really like it as for a website it is sort of messy. So I conformed.

Concept_2_10

 

Concept_2_12

I then mapped out basically where I could put my text (for W.I.P sake), as well as my footer and added a log-in field where users ‘could’ log-in. I wouldn’t mind knowing if we get marked down for elements that don’t actually work. If so then I would remove the boxes and have the log-in bubble redirect the user to another page, or maybe not even make them active.

An issue I have here is that the log-in is black, whereas the search is white. This is something I would probably have a look-sy at next week.

Thanks for reading my blog and thangs you beautiful person.

32982-Rick-Grimes-Rolled-gif-OsuR

 

Lets Get Crackalackin, Work in Progress Report 1.

Untitled

I’ve gone everywhere with idea’s and I thought today might be the day to settle on  bloody idea, yathink?
So, I had a chat with a friend today about how hard it is to sell first year books. So the thought came to mind that perhaps I could do a website dedicated to selling your old university books, without the stinky, past-used-by-date, book store smell. So, I think that is what I’m going to do.

THE PATH HAS CHANGED, EVERYTHING HAS BEEN UNDONE.

Name suggestions ft. Flatmates

  1. The Book Father
  2. Uni Books.com
  3. Sloppy Seconds
  4. Second Story Books
  5. The Book Op Shop
  6. The Book Seller

So, I decided to go with ‘The Book Seller’, self explanatory really – makes the most sense. I decided the next best thing to pick would be a font that would work as a title or ‘header’ for the website.

The Book Seller Font7

Aparajita
What I like about this font is it’s statement factor, it really has impact and to me this font looks like a title font for a book anyway, which is sort of cool and a nice touch.

The Book Seller Font5

Letter Gothic Std
What I like about this font is similar to what I found appealing about Aparajita. It’s nice and it looks like a book font but perhaps this font looks a little more modern. I was flicking though Debate [the university magazine] and I found that the use of serif fonts is particularly minimal, even when I wandered into UBS [University Book Store] the use of san-serif fonts is more apparent, and I would even go as far as to say more appealing.

The Book Seller Font1

The Book Seller Font6

I also looked at a few other fonts [as above] but found the use of ‘Letter Gothic Std’ more appealing than the rest in close consideration of my target audience and what they would respond better to. I find it a big plus actually fitting into the target demographic of my design because it simply comes down to whether or not I find something appealing and that can simply be my justification. Nevertheless, lets continue.

ColourSchemeDesign

Colour Scheme
I’ve never been a huge fan of overly colourful websites. Bright colours startle me, like a deer caught in headlights I squint to try and figure out what the heck I’m looking at, before giving up and closing the tab, and as stated above – it all comes down to my personal preference ^-^

What I have chosen here is a soft blue. Why? Because as a child my favourite book was Alice in Wonderland, and as an adult the first game I bought for my X360 was Alice: Madness Returns. So, sticking to tradition and personal preference, the website will be black and white with an accent colour of blue.

WF1

Layout
What I then moved onto was beginning the framework of my website. I wanted to work with a simple layout that was easy to use and back-dropped by a dominant black and white photograph [like the background to the font]. I wanted the website to be in three sections, an introductory section (so what you will see first before you touch the scroll bar [as left]), an information block, and a footer.

For this post I will be only focusing on the introductory sections design and layout. I headed the top section with a navigational menu that will comprise of the links such as [about] [store] [locations] and so on.Concept_1_1

So in following this simple layout I made a simple ‘wireframe’ website concept [as right] that I can work from. Just a basic idea of a layout that will guide me through the progression of the creative process of making my website. I’m not happy with the concept so far, I mean I like the layout and the navigational menu but the logo is a little ugly and the website so far really isn’t that appealing. The photograph works well however this is a PLACEHOLDER photograph I am using until I can take my own photographs 🙂

So before I started playing around with the website I thought “what is the point of this website?” and I came to the conclusion that this will act as not a promotional website for the cause, but a search engine where students can go online and find out what stores stock what second hand textbooks. So to do this, I would need some sort of search bar, correct?

Concept_1_2Here she is! *applause*
Okay, so it doesn’t actually look all that amazing, but its whats on the inside that counts.. White shapes, white boring 45% opacity shapes (come on it doesn’t even say search yet) meh! What I would really like to know is if I can animate a cursor, you know like when you go to type something into Google. Like we know how to make things flash when we roll over them so many I can make something work that doesn’t look too cheese.

wallace_cheese_eating

So, I thought maybe I should think about a logo type .. thing, that works with the header.

Concept_1_5

*note the name change* The Bookshelf was a typo that I went with because it felt a little nicer. I like the arched font as I feel it sort of reflects the old book stamps you would get as a kid, you know the ‘this book belongs to’ (probably talked about somewhere in my research post). I really like this so far but I know it is still too plain. so I started playing around with it.

Concept_1_6

Concept_1_7