For the design
"On the blog make sure you discuss how you've addressed each item in this list and included a reference link."
Site width in pixels and position
My website will be 960px in width (which is a standard) and approx 1520px or a bit more in terms of height. The site will be positioned in the center as it is most effective at drawing the viewers attention, as I have seen in many examples over researching.
The header will be a sort of banner that will sit across the top of the page and will be predesigned in photoshop. The header will be 960px in width and 265px in height with an extra 30px below for adding a special effect to the header and including the website's 'bread crumbs'.
I happen to like this style as it is bold and strong at conveying the site ID and the site's 'persona'. I also got the idea from these following sites titled Candy Addicts, CupCup and Hot Bligity Blog.
The special effect added to the header is a small automated changing gallery, which I happen to really like and was inspired enough to want to add one to my web design. The site in Melbourne Macarons. There is a place allocated withing the header for the gallery part and the extra 30px below will have the 'picture choices' placed there.
These 'picture choices' are represented by the small grey circles below the giant macron picture banner.
My Tutor showed me a website that had the coding to do such effect. It was called Nivo.
I'll be using this idea for the main galleries as well. For the layout of the galleries, refer to Body Image/s references at end of this page or post.
Number of columns and widths
Now this one caught me off gaurd. It seems that I was working with a 16 grid template just for estmating the width but when this requirement question popped up, I became a bit confused and applied the 12 and 24 column grids over my design to see. It turns out that my design fits well with the 24 column grid so it'll be the one I use for guidance to my design.
As for the site's columns & widths... there will be 2. There will be the sub navigation area (240px in width) and the body (720px in width) with the content sitting within a centered area of 650px (w) with the body.
Since this caught me off guard, I wouldn't have any inspirational references for it. may the Hot Bligity Blog but mainly from this post.
Background style, position
Since my web page will be positioned in the center, all that white space around the site design will be a pain to the eyes and could even draw the eyes away from the design. To combat the problem, black bars will be placed behind the header and the bottom bar to add contrast whilst the body area is left white. By doing so, it makes the site look 'bigger'. The wonder black and white can do. :)
If its hard to understand, then you can see for yourself here.
Note: Sub navigation does not appear in index page
The layout was pretty much influenced by blogspot and hogittybligity (part of blogspot).
The colours used happen to be influenced by a picture frame:
^ http://aoinomacaron.tumblr.com/post/7301144662/a-frame-for-inspiration
and the images I had posted up here.
I had looked over the uc website and blue seemed to be a consistent theme. It happen to pop on some other several sites whilst I was researching so I thought to my self, I might want to stay away from blue for a bit. I wanted to make the site somewhat welcomming and I began brainstorming warm colours when I happen to catch onto the picture frame and the post with the coffee and this latte art site, which I happen to like the layout on it.
http://aoinomacaron.tumblr.com/post/7301326991/colours-for-inspiration
This image shows my colour experiments. It was done in Adobe Illustrator. I started out with the basic black and white and then began incorporating warm colours.
You may also notice a material like effect applied to the header and with the sub navigation menu. I used a filter called 'water paper' in photoshop. I made it so as my theme for the web site was based on 'galleries' so I interpreted that to be photos some how stuck to a wall or pinned you could say. I also got that interpretation since I was redesigning for the Arts faculty and art should be displayed, so I got that idea of a material effect, much like those pin or fabric poster boards.
Oh yes, you may notice in the header design that there is a white bar with cogs in it. The header looked fairly blank and too open so I, for no apprent reason, filled that void area with the white stretch bar with cogs in it. If I had to give a good reason, perhaps because the UC logo looks a bit like a cog and I wanted to try and ecompass as much of UC into my web design besides the logo.
Ah, yes, there is an extra bit of area at the bottom of the page. I sorta incorporated that to give the web page a bit of a proffesional flow, much like how many other company sites have out there, and to also create a frame for the body so that the site doesn't look like its 'dragging' (like there isn't an end and the site feels incomplete).
For the sizing, I sorta followed a vid tute that Geoff created and posted on Moodle but the sizing of the body and navigation parts was done on my end. I used a 'grid' in photoshop to help me along with the 960 grid template. I also tried to make the body area as large as I could as it would be the most focussed area but I wanted to try and balance the design out as well.
I hope my descision for this web design will be intriguing to others as I've had a bit of fun designing it.
Further part of the design can be found under Other - bread crumbs below in this post.
Main navigation style, size, position
Tabs are stylish nowadays but I couldn't reall think of a good design to sit with tabs as I'd feel like I was copying and idea.
Anyways, with the main navigation I have positioned it below the header and to the right. Positioning it to the right of the page was a good idea as it would help add balance to my website and it's trendy in many examples I've come across such as at Slide Deck and UCSAA but also Picoinco and CupCup (which is closest to my design positioning as its main navigation sits below the header design.
The header sits at 295px (h) x 960px (w) so the main navigation sits in another allotted space below the header of 70px in height. The font is a serif based font to suit the header design and overall web layout. Refer to Text for the style of font.
As for the sizing, did I mention that I'd be using a <h2> tag?
Sub navigation style, size, position
The sub navigation is positioned to the left of the page as it best outlines the site's contents due to the idea of readability. What I mean by that it that people read from left to right. So reading from the left first gives the viewer a heads up as to what this site's section may contain.
The size is 240px (w) by 965px (h). The style of the sub nav has a extended border of approx 15px while the main body of the sub navigation is 225px (w).
For the design part, refer to Background style, Position.
The sub navigation will have drop-down expanding lists for further content which is inspired by Geoff's example and Abel & Cole.
This style was inspired by Dylan priest, Custom Toronto and Little Black dress society along with this post.
Search field style, size, position
The search field sits on the left, just above the subsection of the web page. I think it looks trendy there and is also very accessible beacuse if the viewer cannot find what they are looking for in the subsection, they just have to look above the subsection for their helping hand.
The overall search field is approx. 245px (w) x 50px (h) with the search area being 180px x 40px. The sizing and style of the search field is inspired by Owltastic Search and Design Bomb Search.
Body text size, style, colour
The body text will use a sans-serif style of font. San-serifs are easy and readable fonts so that is why I have chosen it to use for the body text. I like to keep things as simple so I'll be using a simple and effective colour, black. The size will be approx 15px. Refer to Text for font style.
Body headings size, style, colour
For the headings of the site, I'll be sticking to the colour black to keep a consistency with all things text on my web design (except for the header & main nav). The style will differ from the main body text as it will use a serif based font to blend with the overall design that has also used serifs or the header and main navigation. Within the coding, I'll be sticking to tags <h1>, <h2> and <h3> for the sizing of the headers since they hold a consitant size and can be applied repeatedly. Refer to Text for font style.
I plan on using text from a internet font provider such as Font Squirrel or Google web font. The font styles used are 'Crimson Text' as the serif for the headers, sub navigation and Main Naviagtion and others that are part of the design whilst 'Cabin' for the sans-serif for web body content such as paragraphs.
I have chosen these particular styles as I see them to suit the design well and am comfortable with using them for and in my web design as they are simplistic and readable.
These fonts were retrieved from Google web font.
Body links size, style, colour
Links within the site's body will be kept to the simple underlined blue and turned purple when already clicked on. I'm a simple person so keeping it simple is best. Also having the link in blue adds a bit of contrast and distinguishing to the site's layout, which doesn't contain very much blue. Though, to make it a little bit intriguing, the link text will turn to a white with a brunet brown (similar to that of the brown on the header) background when clicked on or hovered over.
Body image/s size, style, position
The images used will be within or below a width of 650px. Position is mostly centred within the body of the site but may vary. This was mostly inspired by how my images were positioned in my Sunbathin Ladybird blog at blogspot when ever I create a new post with images. As for style... there will be a invisible border of 10px around, even if a text-wrap is applied. This is inspired by Blooms bakeshop (without the frames).
With Blooms bakeshop, it is also a inspirational reference to the gallery layout along with 13Creative and Babycakes Design homepage.
Inspiration referring to the animated gallery can be found Header style and Size in this post.
For the 'bread crumbs' part, I have taken a sort of risk at 'showing' them to prove my designing skills. The most basic would to show it like this somewhere at the top of a web page, mostly near the main nav or below or next to web header.
^ http://aoinomacaron.tumblr.com/post/7299401742/close-up-shot-of-breadcrumb-from-here
Inspired by Geoff's example, Dylan Priest and Beauty Diary, it has incouraged me to be a bit creative.
To show my 'bread crumbs', I've made a header in the body with the name of the chosen catagory from the main nav to show where the page came from in the main nav. It is positioned in a top-left corner and to help it be identified, it will use a <h1> tag in the code.
Then the name of the chosen sub-catagory* from the sub navigation will use a <h2> tag and will be postioned to the right and a bit below the header with the <h1> tag. This adds ablance to the page helps identify the content of the page.
In my uploaded example web page design, the 'Gallery' uses <h1> tag and identifies chosen catagory from main nav and the 'Jee-Un Kim' on the right used <h2> and identifies chosen sub-catagory from sub nav.
To further support the sub-catagory chosen from the sub nav:
content in sub nav is made to expand and automatically reverts back to the tag like form while the next chosen catagory expands.
when tag in sub nav is clicked on and expands, the design is meant to represent a picture like this:
Though in the sub nav, the picture area is grey. Back to the point of showing the selection, the 'background' behind the chosen sub-catagory shows a cropped picture relating to the catagory. The other sub-catagorys are still left with a blank background of grey. To best describe this, if you look on the sub nav in my proposed web page design, it shows 'Jee-Un Kim' with a pictured back.
The expanded catagory on the sub nav is enough to show wereabouts the visitor is in the chosen catagory from the main naviagtion menu.
You may also notice, in my proposed web page design, that 'Michelle Leong' has black. I made it so to show how the other sub-catagories react when a mouse hovers over them.
*sub-catagory = chosen catogory from under a chosen catagory in sub navigation menu.
Yes a long aplanation of the breadcrumbs. My first initial idea for the bread crumbs was to have a set of small retangle 'areas' sitting on the extra 30px(h) extention, below the header, and the names of the chosen catagories would pop up with the boxes, starting with the name of the chosen catagory, from the main navigation, in the first box.
This here is my proposed web design.
Thank you for taking your time to read this.
