Work In Progress: Week Six

So at the beginning of the week my website was looking a little like this:

progress

progress2

map

And now it’s looking like this, is fully functional and responsive, and is informative.

faq

Overall I’m pretty satisfied with the final product. I decided not to over clutter the pages with a logo, and instead just referenced the school in the menu bar. I used images of the school as header images, which I think are worth showing off as the school is quite pretty – it has a lot of garden and art, however I decreased the size from the theme as I didn’t want to put titles over top of the images. It didn’t look nice when I tried it, so I’ve got the information under the main images.

login

I had some differences with the footer, as I felt like the image above was over cluttering my page content, so last night I got frustrated and deleted it and have never looked back.

homepage

I’m a bit ambivalent about my home page – I couldn’t get it how I wanted and wasn’t really sure what I wanted. It’s better than the current site home page, but had I had more time I think I could have improved it, but I hit a wall creatively and am ready for a nap.

– And then, with 10 minutes until hand in was due, I edited my home page. Because logic. Now it looks like this and I am happier – 

newhome

Advertisements

Site Map

I have finalised my site map, which will be the following. There is an extra page or two but that’s because the calendar page might or might not work, it’s very dependent on being hosted on a server which I couldn’t test. That’s cool.

sitemap

I have also included this fun little site map as it is easier to read than the above site map

sitemap2

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

Browser Test Report

Tested in Firefox 29.0.1 on Mac OS X 10.9.2

Screen Shot 2014-06-13 at 10.57.34 amScreen Shot 2014-06-13 at 11.22.35 am

Tested on Google Chrome version 35.0.1916.114 on Mac OS X 10.9.2

Screen Shot 2014-06-13 at 11.27.47 am

Screen Shot 2014-06-13 at 11.28.58 am

 

The major difference between browsers that I have is that my image carousel only works on Safari because I had to remove the browser specific animation instructions in order for the code to validate. It’s not a huge problem because it doesn’t break the page or anything, it is just a nice feature. Aside from this the colors display brighter in chrome, and the font renders slightly smaller (although that could just be me trying to spot a difference). Neither of this affects the layout either.

Concept Statement

The client for my assignment is Debbie Lamb who is an independent Stampin’ Up! Demonstrator – she creates greeting cards and craft projects that are ideal to display online. The site I created was a business page for her, as well as a hub for her to display her projects to inspire and inform potential clients. The website is not one that I intend the audience to regularly visit, rather a source of information for the business and for craft projects. The target audience for the site is stampers, predominantly females 18 – 50 years. I wanted to create a site that was very easy to navigate and not overcrowded with information.

 

The focus of the site is on the pictures so I wanted to make sure they were easy to view in all browser sizes which I have done by placing all of the objects within the page relative to browser size. I created a maximum width of 1800px to ensure that the header images were not over stretched at larger widths. I chose this size because the average screen size is 1366×768 according to TechCrunch so the majority of visitors would see the full screen, fluid web page. Those that have screens larger than 1800px see the page fixed in the middle with an unintrusive, slightly patterned white background which I chose to not distract the user from the main page.

 

I chose the color scheme of the website to complement colors within the images, so that it did not clash. I used tints and shades of green and pink for most items, including headers, body text and background colors. Pink tends to represent females and so I thought it was appropriate for a predominantly female audience, while including a large amount of green to not overpower the visitor.

 

I used three major fonts for the website – a bold, uppercase font for page titles within the header image which demands attention (complimented by a handwritten font on the index page), a cursive font to make up the site logo (Pacifico), and a plain, sans serif font (ABeeZee). I chose a variety of fonts because that is a characteristic of craft websites, as craft projects and greeting cards tend to be quite typography focused so it makes sense for the website to reflect this. I ensured adequate font size, line spacing and padding was added to text so that all viewers could read it with ease.

 

I placed the page titles on header pictures, within shapes as a ‘funky’ website characteristic. Like the header images they are unique to each page to also reflect the different types of visuals that can be done on craft projects and greeting cards. I also utilised borders to separate text and information throughout the site.

 

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.