Work In Progress: Actual Progress

Includes: Final fluid Mock up, inital fixed mock up, first finished working screenshot of fluid layout (no way? yes way.)

Final Fluid Layout mock up

fluidI moved a couple of the images (rather than being next to the text to being underneath it). Ignore the font change at the end, that was unintentional, I just couldn’t be bothered to install the font onto this computer because it’s working on my CSS anyway. I may change the bottom image but for now I want to complete my fixed layout first.

Speaking of fixed layout: First fixed layout mock up (it lives).

FixedStill not sure about this as it is the first mock up. Those squares with crosses are for images that need re-editing from the fluid layout. I may try and encorporate the triangle dividers that are in the fluid layout. Also I discovered that opacity in CSS is fun because if you put it on a body{} it then applies to all of the children automatically without being able to be turned off?? So this is still in progress.

Speaking of progress: I have coded my fluid layout (mostly)!!??

I know, I know, pics or it didn’t happen.Screen Shot 2014-04-15 at 9.36.24 pm

Screen Shot 2014-04-15 at 9.33.48 pm Screen Shot 2014-04-15 at 9.34.37 pm Screen Shot 2014-04-15 at 9.34.55 pm

(Feel free to speak your criticism now before it is too late or forever hold your peace)


Work In Progress: Coding

I have moved things places

Screen Shot 2014-04-14 at 6.06.01 pmsuch web many coding wow



Work In Progress: A baby update. No pun intended.

(My theme is a baby site. I am very proud of that unintentional pun). 

As of right now I am in the process of finalising the mock up for my fluid layout – I am still deciding on colours and the specific layout. I am also about to start designing my fixed layout. I currently have 250 words of CSS code for my fluid layout, having placed and sized the menu and header, background image, title and subtitle, and applied a few general style rules. I spent the day at uni and have realised too much code makes nicole cranky. Furthermore in terms of progress I am about to publish my research post on the font I have decided to use, and a research post on fixed layout as I have been focusing on the fluid layout since I would rather tackle the more difficult layout first.

Work In Progress: Mostly finalised fluid layout


This week I edited my fluid layout, making it more visually appealing. These colours are not the final colours, but a general idea of what colours will be where. Now I am going to work on creating a fixed layout and choosing fonts. Comments and criticism welcome!

Initially I was going to use this general colour pallet (see last post)


However I’ve decided to use the second colour pallet, which I think also fits the theme of a website for mothers of young girls better.

updated layout



(Initial fluid layout for reference of changes)

layoutone - first edit

Work In Progress: Graphics

I’m still adjusting my layouts, and I’m finding it difficult to get an idea of whether they will look good without any graphical elements in them. Thus I have somewhat decided on a color theme (with the help of colorschemedesigner) and drawn a couple of vector images on illustrator as I want to go for a more cartoon look, rather than realistic. I have also decided to use baby pink, and adjust the theme of my website slightly for mothers with young girls. A lot of the websites I saw were blue so I want to do something different.

Screen Shot 2014-04-06 at 11.03.00 PM



This was the first color scheme I was thinking of using, but I played around adjusting the colors on illustrator and I’m not a huge fan of the mint on the pink – however they do look nice side-by-side. Visually I like yellow on pink.


I was thinking about something like this image for a large header. I am afraid it could be too distracting and tacky looking though. I do like the slightly transparent darker pink under the writing as this gives it a bit of separation from the background image, but not too harshly.

Screen Shot 2014-04-06 at 11.18.10 PM

This was the second group of colors I was thinking about (after being hesitant about the mint green). I substiuted the colors into an image bellow and it doesn’t make too much of a different changing the yellow to a light orange – it does look a bit more similar to the background. I haven’t decided if this is a good thing or not yet. Overall I’m not sure if I like this color scheme as much as the first one. Pink and purple together may be too much of an overkill.


I’m going to work on designing the layout more permanently now that I’ve got a few vector images to work with. I also have to investigate font use. This far I know I want something very simple and easy to read because I don’t want it to be too cluttered with the vector images.




Work In Progress: Fluid Site

I have taken the hand-drawn pencil sketch and made it into a pencil mock up, while paying more attention to the actual content we have to include. I noticed that the last content box was made up of three substantial paragraphs so have decided to split them up and add accompanying pictures (probably). This is unlikely to be my final design for the fluid layout, however it is more-or-less the theme and flow of content that I’m going for. I think it will be very easy to read, and the content will be fluid to a point, where it will be fixed, so that the content doesn’t break.


layoutone - first edit

Now I am going to think more about the design and pictures that I will include. The colours on the wireframe are not the colour scheme that I want to use, they are merely a design split up. I want to use vector illustrations as a stylistic approach, rather than taking realistic pictures. At this stage I am thinking that I may increase the size of my header as it seems a bit small at the moment, although the type of site I am creating is more focused on the content rather than header and menu, so I will decide once I have created some images.


– Edit – 

After Jess’ comment I noticed how the site may be a bit left-side heavy, so may change the layout slightly by moving the second image to the right hand side. This would make the text more dominant because people naturally read from left to right.

Screen Shot 2014-03-28 at 3.59.03 pm

Work In Progress: Update Two

Alternatively titled: Slow and steady wins the race? 

This week I have been focusing on other assignments, however, am mostly decided on the layout for my fluid theme. Bellow is a sketch up and I will get this made into a pixel specific mock up in the next couple of days, as well as decide on my fixed layout, the colour themes, and start designing the graphics.


Work In Progress: Update One

Alternatively titled: How do I make my mock layouts not look like sh*t

This week after paying attention to the aspects of websites that I like the layout of I decided to draw a couple of potential layouts. Turns out that it’s not as easy as it looks. I’m still working on this, but here are a couple of sketch ups thus far.


This was my first draw up. Basic, but user friendly. The more you scroll down, the more you read. Easy. I like the horizontal “stripe” look across the entire site that for a consistent feel in both the header/footer (see previous post for this in action on websites I like).


I tried something different out with this layout. With the information in three adjacent columns I am afraid it might be hard to read, though. Also wordpress has a fixed menu as you scroll down the reader. This is kinda nifty. Can I steal it? That was the thought process for part of this design.


I had no idea where this was going when it began, but I kinda like the different sized boxes in a fixed area. This layout would also break the 80-10-10 colour “rule” (see a previous post for more explanation). At this point in brainstorming I also remembered that images exist on websites alongside text sometimes.


Unlike previous layouts this text would be straight on the background instead of in it’s own little boxes. Not sure if I like that idea, though. It seems naked.

– – –

At this stage I’m still brainstorming themes. I’m not sure if I like the menu above the or below the title and subtitle yet. Visually my brain likes the idea of content being in boxes, and also fluid menu, header and footer banners are taking my fancy at this point.

I’m a little hesitant about these website themes fitting my subject topic (site for young parents) but I would use pastel colours to emphasise it, and perhaps a logo or additional vector images of “typical” baby things. This needs more thought.