Work In Progress: Week 5

I have spent the majority of this week tweaking small things on my website when I could have been finished many days ago but I have finally settled and submitted because I have an exam in an hour. I am happy with the final submission, the code validates after a small parse error problem, and all pages of the website works in all web sizes. Weeeeeeee.

max width:

Screen Shot 2014-06-13 at 1.04.43 pm

smaller:

Screen Shot 2014-06-13 at 1.04.51 pm

even smaller:

Screen Shot 2014-06-13 at 1.04.57 pm

smallest:

Screen Shot 2014-06-13 at 1.05.09 pm

Advertisements

Now That’s What I Call Progress Volume 4

I have nearly finished my photoshop mockups. I have completed the index, projects, contact and example project pages.

mockups

Even though I haven’t finished my mock ups I decided to start coding what I had mocked up anyway. I have since spent too long in the DM lab and coded 3 pages (!!). Here are a few assorted screenshots for the sake of visual proof.

Screen Shot 2014-06-06 at 7.52.46 pm

Screen Shot 2014-06-06 at 8.02.46 pm

Screen Shot 2014-06-06 at 8.04.44 pm

I’m still changing things around like background colors and hover states and amount of padding and need to finish my final mock up but I’m not too worried at the moment – I want to get everything coded and working so that I have some time to study for my exams. Oh and I need to take / find more pictures so that I don’t have the same one picture repeated. It’s just acting as a placeholder at the moment. Cool beans.

Work In Progress: Week Three

Lots of progress has been made this week. Here is a summary in lil digestible sections.

– – –

FONTS: Unlike my previous assignment I am excited about using different fonts to enhance the page because this is a stylistic element of greeting card / craft sites. I have spent a lot of time searching the web and decided to use a selection of the following fonts: Coming Soon (a handwritten like font, perhaps for headings), Pacifico (a heavily cursive font – for the site title only), Handlee (somewhat handwritten, less obviously, perhaps for headings), and BeeZee (a simple sans serif, easy to read font for body text and links). I also want to create title headers using different fonts and shapes.

– – –

COLOR SCHEME: I eye-drop picked a color from one of the pictures I took and am using and then used an online color wheel thing to find a complementary color and am very happy with the result. (They don’t look like such appealing colors by themselves but when combined with images they look pleasantly visually appealing).

Screen Shot 2014-05-26 at 5.02.28 pm

I have decided to use shades of green and pink as the main colors, with a white simple textured background for the main content area and black text.

– – –

HEADERS: For my pages I have decided to create a ‘logo’ type thing for each page using different fonts and shapes to place on top of the main page header image. Unfortunately this has taken a lot longer than I expected because I am a perfectionist and don’t want them to look gross. Below is how the ‘title logo’ for the landing / home page has come to it’s current state (placed on my mock up). I created the image in illustrator and have been experimenting with a range of fonts, as well as adding a very faint background texture, and playing with background opacities. (The final image has since changed slightly as I made the top sentence a larger font).

logo development

– – –

MOCK UPS: I have completed my pencil mock ups. (I decided to get rid of the ‘join’ page and instead create a ‘project specific’ page). (Please ignore the misspelling of gallery. I am ashamed but not so much so to re edit the picture).

mockups

I have also begun to move from my pencil sketches onto photoshop mock ups. Here is what they look like so far (menu and page specific header sections only completed so far). Next to each other it looks busy and cluttered but it won’t look like that when they’re individual pages. This is just so that it doesn’t take up a huge amount of room on the post.

progress

That’s all. Feedback appreciated. Happy Friday.

Work In Progress: Week Two

Besides contracting the flu, this week I have worked on my layouts. I have decided on the different pages I will be including on the site, see poorly executed site map below.

2014-05-23 10.29.30

Additionally I think I have pretty much decided on the layout of my overall site (although it is kinda similar to one of my submissions for the first assignment).

2014-05-23 10.27.55

The website is going to be fluid with the menu / title, footer, and header image / page title spanning across the entire page – as well as the background. I have not thoroughly investigated a color scheme yet, but I am hoping to do that this afternoon. So far I have designed the home and contact pages roughly. I still have to decide on how to layout content on the other pages, but at least I have a structural start that I can begin to code after I turn these into photoshop mock ups.

2014-05-23 10.28.34 2014-05-23 10.28.45

Work In Progress: Week One

This week I have carried out a lot of research, looking at a variety of sites. I have also taken most of the photographs I will need – I am not sure yet if I will also incorporate computer-illustrated graphics too. I have done a couple web layout sketches for the home page but I am not happy with any of these yet and will keep working on them before I embarrass myself by uploading them. I have also written an essay but unfortunately that won’t give me any points for this paper.