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).


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.


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

Research: Menu

I’m still having trouble trying to design my home page so I have decided to design the menu and footer first and then hopefully I will find it easier to design the individual pages with the static menu / footer design.

My initial idea was to do something similar to my first submission – having a menu bar at the very top of the site. However this may not necessarily suit the website I am designing because the title/logo also needs to also be consistent on every page.

Screen Shot 2014-05-20 at 3.17.55 pm

This top menu is similar to the one that I was thinking of creating – I had not really thought about putting the site title in the menu though, however Daniella Draper‘s site incorporates it simply but effectively. The large image after the menu is also a design element a few of my mock up layouts have included, but if I have a drop down menu I am worried it will look too cluttered. However now I am thinking I do not have a need for a drop down menu if there are sub menus on the individual pages.


Screen Shot 2014-05-20 at 2.47.13 pm

This website has an interesting layout. The “Drupalcon Munich 2012” logo is consistent on every page, as is the menu bar. I’m not 100% sure I like it but it is definitely something different.

Screen Shot 2014-05-20 at 3.02.21 pm

This illustrator’s website is interesting – it has similar elements that my site will have (such as the “recent activity” posts). The header image is cut off on the additional pages which is an interesting change. The consistent header and menu is an element I think I want to create, however I don’t think it would be suitable for the header to change after the first page. But that is a very interesting idea.

Screen Shot 2014-05-20 at 3.29.17 pm

Foodsense is a website with a very effective side menu bar. Top menu bars are far more common but this website implements a very clean and visually appealing side menu bar. I also like the information they have laid out on the front page. I also like the simple color scheme which may suit the website I design because the pictures will have a lot of colour in them and I would hate for them to clash.

I will keep working on my site mock up layouts now. Hopefully these have sparked inspiration.

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.

Research: Topic Specific Sites

As I’m beginning to create mock up designs for my website, I decided to look at a few more craft websites because Matt was talking in class about how it is important to follow the “design trends” of similar websites. I’ve had a little bit of trouble doing this however because a lot of craft sites aren’t that nice looking.

Screen Shot 2014-05-11 at 2.48.34 pm

CropMum: Interesting layout of information on the homepage. Menu links don’t have hover states? Gross. I like the rotating picture directly under the header, and how it allows for information around it. The text looks pretty squished on the main paragraphs though.

Screen Shot 2014-05-12 at 11.56.23 am isn’t horrible – I quite like it. It even has an image carousel like I am invisioning adding to my homepage at the moment! I have also been planning to create a menu similar to this one, with drop down options. It has a little too many boxes for my personal preference, and after my past assignment lacking white space I am very cautious about limiting the white space for this assignment. I also like the “subscribe to email newsletter” banner further down the page. It is very easy to read and distinguishable.

Screen Shot 2014-05-12 at 11.59.18 am

Creating keepsakes is a further website I looked at. I like how the header and menu go together quite well. I think this is because the menu isn’t made to look 3D, I like this. This page looks very cluttered too, and the menu links don’t have hover states!

– – –

I have decided to expand my research, since apparently other Stampin’ Up demonstrators and scrapbooking sites are all super cluttered (and where are the link hover states??). So have looked at greeting card retailers.

– – –

Screen Shot 2014-05-12 at 12.09.45 pm

Cardstore is quirky! It could have a little more space between objects but it uses some neat shapes that give it a hand made feel. I like how it has computer graphic greeting cards on a “shelf” that are clickable. The little doodle graphics incorporated throughout the site make it feel handmade. I really like that.

Screen Shot 2014-05-12 at 12.11.43 pm

Alright game over, I found the most well designed greeting card site – thank you Hallmark. My faith in greeting card sites has been restored. The coding seems like it would be pretty advanced, but there are aspects I really like – such as the use of different fonts that look similar to handwriting (combined with the use of “normal” fonts.

Screen Shot 2014-05-12 at 12.14.17 pm

I looked around the site a bit and found this different twist on the image carousel, with little triangle dividers that I used similarly in my previous assignment.

I think I am going to use this site heavily as inspiration. I am very pleasantly surprised with it after trawling through too many inadequate sites. Now onto planning my site’s layout!

Research: Landing Page

The home (or landing) page in my opinion is the most important page of a website because it tends to be the users first impression of the site/company/product/brand. For this reason I am having the most trouble thinking about what to put on it. I think once I have designed the home page the rest will be easy, so I have spent a fair amount of time researching other landing sites. So I have been looking at small startup company websites again, like in my previous research:design post.

A useful resource site I have found is this blog post by Stephanie Hamilton (2012) which says that the following five elements make a successful home page (which I am going to try and incorporate into the design of my homepage, that others may find useful):

  1. “A tagline: A prominent tagline that fits within the overall brand and communicates the benefit immediately.
  2. Clear offering: Clearly expresses what you are doing, what your visitor can gain from it and how they can easily get it. 
  3. User-friendly interface: Consider load times, navigation, sitemap, prominent calls-to-action, and an intuitive layout.
  4. A Quick Tour / Demo: Let visitors know what your product does easily and quickly through a simple video demo or diagram.
  5. Social Proof: Display businesses you have worked with, testimonials or evidence of press coverage for your startup.”

Startup websites are then listed with evaluative statements saying why they are effective. Although most sites are selling or advertising something very particular (such as an app) and seem to be intangible and are not to do with my topic choice – the way they layout information is interesting to look at. [Also the craft sites that I have looked at didn’t prove to be very helpful because they were poorly designed with over crowded clashy content, and apparently the designers haven’t heard of white space.]

Screen Shot 2014-05-07 at 6.11.49 pm


Mint‘s website is one included on the list that has a couple of interesting elements of design. Personally I think the information could use a bit more white space in between the information because it looks very clumped together – but I do like the header / menu (except I don’t like that the font gets smaller along the menu bar. that’s weird). I also like the sign up box. For her business my Mum sends out monthly email newsletters so I think it would be valuable to have a email signup box on the homepage. Hopefully this is something I can figure out how to code. Although I did a little bit of googling and according to this dreamweaver tutorial creating an email form would require creating a PHP script and I’m not sure if that’s something we’re “”allowed”” to do for the assignment?? But that is an element I would like to incorporate into my website and think it would be useful to learn.

Screen Shot 2014-05-07 at 6.27.07 pm


I also really like the layout of these pictures on squareup‘s website. When you hover a semi-transparent colour fades in with the text and graphic which I think looks really cool! I may borrow this idea because I like computer created graphics but think for a hand-made greeting card site ‘real photographs’ would be more suitable, but mixing the two looks cool. I tried to look at the sites code but it is not formatted at all so takes me a while to read. I couldn’t quite tell what they used to create this effect, probably just pseudo states ((hopefully)) so that I can recreate a similar thing with not too much difficulty.

– –

I also came across another blog post by the same author, this time posting about startup companies who sell physical goods rather than apps or getting people to sign up. I think these companies are more similar to my mum’s business. A home page that caught my attention was the one below by foodzie. Unfortunately the site now redirects to Joyus so the webpage no longer exists (I copied the image below from the blogpost to admire).

I really like the simplicity of the page (and i’m a fan of the image under a block of colour as you possibly could tell from my previous assignment). I’m not sure how effective having the links at the bottom of the page are though. Although in terms of readibility it kinda makes sense because it seems that the links are not the main priority of the site, compared to the member signup and login. Links at the bottom of the page would not be suitable for the site I create as it is important that visitors can immediately find the extra pages of information that they wish to read.

– –

I’m going to start developing and designing my home page after having looked at these sites, but first I need to clarify what I can and can’t do on the site (email forms, rotating image carousels) with Matt in class on Friday I think because there’s no use designing a rad home page filled with content I cannot create or code.

Research: Design

I have been looking at startup websites for ideas about how I could design a business site because I have found a lot of startup websites look really great and there is a huge range of topics. I found this article particularly useful which compiles and links 50 startup sites with great landing pages. A couple of stand out sites from the article are linked and analysed below.


I particularly like the theme of the startup web hosting company asmallorange. I am not planning on naming a business after an orange, or making a farming website, but I like the consistency surrounding the website. Scrolling down further you can see that the site uses oranges as icons. The brand comes across as being quirky and unique, which I think is neat.

Screen Shot 2014-05-06 at 11.42.57 am

In terms of design I really like this menu they have on their “core values” page. The menu below divides information within the page, while above this they also have a main menu. I think it is implemented very effectively here, as it would not be necessary to link all of these pages from the home page.

Screen Shot 2014-05-06 at 2.09.11 pm

I also like the sites naturallycoolkids and how the site looks like it is on a piece of paper. It is very obviously targeted towards kids and I am a big fan of this very specific stylisation, although I do not think the website I create will be targeted towards children. The website looks very carefully developed and designed. After a bit of clicking I discovered naturallycoolkids was designed by UK creative digital agency thebiggerboat who have developed and created some other cool sites that I may refer back to if I need some more inspiration.

Screen Shot 2014-05-06 at 11.50.06 am

Coffee Joulies is also a site that has a very particular and specific site design. I like how the top image on the site carousels, and the use of textures. I also like the design of the banners (see: our supporters). I don’t particularly like the slogan font of the subtitle in the header, or the bottom border on the header.

Screen Shot 2014-05-06 at 11.50.42 am

I may try and incorporate some design elements into the final design of my website. I think I am going to look at a few more sites to get a better idea about how content is laid out effectively, especially on the home page. I think that is going to be the most difficult page to decide what to put on it because it is the most important.


Research: Topic Selection

Over the break I have been thinking about a range of topics that I could make my website about. Both of my parents own their own businesses so I have considered making a website for them, my dad is a mechanic and my mum owns a craft business. These areas are not particular interests of mine, but they would allow me to consider a stakeholder for the website rather than just creating a site that I would enjoy to look at. In terms of these as potential topics the only concern I have at this stage is having enough content for five individual pages within a website.

I feel like creating a site for my dad, who is a solo mobile mechanic, would be very constricting – both design and information wise. The screenshot below is of stmmotorgroup‘s website who offer a multitude of services. Design wise though their site does not appeal to me. Too many fades and gradients. No me gusta.

Screen Shot 2014-05-06 at 3.28.28 pm

I get the feeling bad design goes hand in hand with mechanic / automotive sites because drdiesel is equally as appealing. Mmm that background text pattern is looking mighty fine.

Screen Shot 2014-05-06 at 3.35.52 pm


I feel like creating a website for my dad would not be suited to this brief, and a website for him would ideally have only one or two pages because there is not much information needed.

– – –

In contrast my Mum is a Stampin Up! demonstrator which means that she makes greeting cards and holds workshop classes and onsells products from the brand. A lot of demonstrators have blogs where they share cards they have made. A few of the sites looked quite cluttered, because the pictures of the cards they post are often decorative so clash with decorative backgrounds. They often have lots of content everywhere. They tend to be designed on blogspot though using the preset themes and edited header. (See: stamphappy below)

Screen Shot 2014-05-06 at 5.03.45 pm


I quite like the banner flag thing incorporated throughout the headers on inspiringinkin‘s website, and the header is kinda funky. But again I think it clashes with the content and background. It does have some nice design elements to the site, just a few too many individual elements put together in my opinion.

Screen Shot 2014-05-06 at 5.15.47 pm

The only concern I have for this assignment is not using any copyright images, as Stampin’ Up! is a trademarked brand. A lot of the other demonstrators use images directly from Stampin’ Up but so long as I take all the photos on the website myself there will be no plagiarism or copyright infringement.

Something that I am going to think about is trying to incorporate is the design style of the brand my Mum works for (Stampin’ Up) into the website I create, as the stamps all have different typographic styles and embellishments (although would this breach copyright or plaguarism?? possibly. maybe I won’t do that). I think I will play with fancy fun fonts for headers / titles, so long as it doesn’t look too cluttered. Thus I will most likely design a site for my Mum’s business rather than my Dads mechanic business, as I know more about crafts and there is a greater range for content and pictures that I can take.