Project 4 -Technoculture – Web 2.0 & the Mobile Web – new project

Last week was our final hand in of our website production and we got told our next project is going to be a production of a web 2.0 website and a mobile version.
Web 2.0 in short is an interactive website, such as a social network, a website with a forum, a blog where people can comment, etc.

Immediately my mind started furiously thinking what I could do. Initially I thought I could do the redesign of my own blog, inspired by our second project of a website redesign, which I had already started:

before re-design

after re-design


Then I thought I could do my new project that I have started setting up, which is a sort of trip advisor for flying cabin crews. But I realized that both projects are too big to set up in a few weeks.

So I have decided on another one of my ideas, inspired by this course: I want to re-design my marolinedesign.com website and add a blog in which I will write tutorials (about everything to do with WordPress, web design, SEO and more), using screenshots and perhaps video casts and allow people to comment/ask questions. Eventually I might make an e-book that I could perhaps sell.
Initial thoughts were about the categories I’d have for tutorials and what I’d like to write about:

Categories for marolinedesign blog:
1. WAMP
2. WordPress
3. Atahualpa (the theme I use)
4. CSS
5. HTML
6. Plugins
7. Photoshop
8. Illustrator
9. Portfolio
10. SEO

Ideas/blog posts for marolinedesign blog:
• how to set up WAMP
• how to design websites on local computer using WAMP
• how to upload and make a website working from WAMP to live server
• what to think about when getting hosting
• how to have your website on facebook using iframe
• how to create letterpress with photoshop, illustrator and css
• how to have a full background image that changes size per browser window
• how to create seamless text/graphic tiles for your background
• Top 10 plugins to install on your website
• how to get your picture showing in google SERPS
• how to create WordPress custom post types
• Why would you and how can you create custom taxonomies

Hibiscus by Patricia Harvey

Design wise, I had really liked the textured background on websites and have found a lovely seamless ‘paper’ tile. My lovely mother-in-law had designed/drawn a Hibiscus flower for my logo, which describes my passions:
• Hibiscus is typically used in surf design: I am passionate about surfing
• She used a sea blue colour for the leaves to describe the sea
• She used the colour orange for the petals because I am Dutch and orange is the national colour (and family name of our Monarchy)
I used this design on my current website. It is a lovely design but very precise and I had the idea to simplify it a little. I had seen a surf shop in Cornwall with simple Hibiscus flowers and decided I wanted something like that. I still like the font I used for my initial logo, so I will be using it in the final design too.
Here is the logo design I initially used on my website:

Below are the many different things I tried:

And this is (I think) my final design:

As you can see I initially tried a drop shadow with the original design, where I realised that first of all what I did was not subtle AT ALL and second of all the original drawing was too detailed to use it for any kind of effect.
So I redrew the hibiscus in Illustrator. I liked it, but there was still something missing. I followed this tutorial: http://www.vectips.com/tutorials/creating-editable-letterpress-styled-text/ to attempt a letterpress effect. The effect was not looking like letter press at all, probably because I used the orange and blue colours, which were darker than the white background colour, but I still liked the effect it had, so I’ve kept it. I tried to make it look good within a header sized file, but whatever I tried, it did not look good so I tried a rectangle shape. It looked better, but still not right, and in the end I used an oval shape, which I am very pleased with! To get the letters follow the oval shape, I followed this tutorial:

The two tutorials I have used are very much like the sort of tutorials I would like to write on my blog.

Another idea I have (inspired by my ‘good’ website from project 2; www.bokche.com) is to have a picture of myself in the middle of the page, ‘holding’ my logo in one hand thrusting it forward with the text: ‘STOP, look no further’ on the homepage. I could even point with my other hand to the page you are currently on, using a mouse over effect of my hand moving up and down the menu when rolled over and when active, if I can manage to make that work…. The menu on the homepage could be typography in the shape of my (out of focus) body like my sketch on the left

On the other pages I will have either a normal menu, or a similar picture down the side (in a sidebar) much like this marjolijn.co.uk site. Plenty of ideas, so I best get on with it!

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>