Project 4 -Technoculture – Design progress – more re-designing

Two weeks ago we had our last class before the Easter break and boy, have I been busy these last two weeks!!

Apart from a few niggly bits that still need fixing/updating, I can positively say that I am happy with my design and content, which is just as well as I have one more week left to do the mobile site!

I kept changing my mind on the design each time I thought: “I’m keeping this design, I love it”, I think it is because it is my own website and I am being really picky about it (I can emphasize with clients now and their endless changes, lol!)
The last time I wrote about my new wave header and footer. After I had designed them I concentrated on the content, specifically the Home Page, as I wanted to have an image of me with introduction text on one side getting people intrigued about my website and a letter pressed menu the other side. In my original idea I wanted to say “STOP, you’ve finally found what you are looking for” and have a picture of me with my had forward, holding my logo.
As I’ve changed the look of the design and logo with the wave, this would not fit anymore, so decided on a jumping photo instead.
When I put a jumping photo within my design to see how it would look, I didn’t like it: too many textures and things going on:

  • A gradient in my header (and the more I looked at it, the more it looked like a sky with stars rather than a wave with bubbles)
  • a noise in my background
  • a 2D picture
  • letter pressed text

I thought I had simplified it, but clearly not..

So I decided on a darker blue to make it look more like the sea rather than the sky, also to tone down the colours, I realized I only wanted to use a few colours: blue, orange and grey/white tones.

Then I made the height of the wave smaller to give the page a bit more real estate, took out the lines and bubbles and made it a noise texture matching the background. I did the same to the footer.

I also changed the menu, as although the outline was consistent with the logo, it was also taking the emphasis of the logo away and I didn’t think it looked professional enough. So I took the outline away and instead gave it a lighter text-shadow and made the text bigger, to give the illusion it was letter pressed. The hover/active page is the opposite with the addition of an illusion of a button pressed into the header. The css for this I found in a tutorial when I was looking to find a way to emboss the text. I didn’t find anything to emboss the text, but did find out how to emboss a div using the box shadow and inset and as each menu item is a div, I applied it to that instead. I used the below code for the menu:

div#menu1 ul.rMenu li.current-menu-item a:link,
div#menu1 ul.rMenu,div#menu1 ul.rMenu li {
    	background: transparent !important;
	border:none;
	text-shadow: 0px 2px 1px #6a639b; 	*/letterpress effect - shadow colour lighter than the background (#4e4973) font colour (set in 'Header 	Area/Menu 1') is darker than the background*/
}
/*Hover over menu and active items*/
div#menu1 ul.rMenu li.current-menu-item a:active, 
div#menu1 ul.rMenu li.current-menu-item a:hover, 
div#menu1 ul.rMenu li.current-menu-item a:visited, 
div#menu1 ul.rMenu li.current_page_item a:link, 
div#menu1 ul.rMenu li.current_page_item a:active, 
div#menu1 ul.rMenu li.current_page_item a:hover, 
div#menu1 ul.rMenu li.current_page_item a:visited, 
div#menu1 ul.rMenu li a:hover {
	background: transparent !important;
	border:none;
	-moz-box-shadow:    inset 0 0 10px #332f4c;
   	-webkit-box-shadow: inset 0 0 10px #332f4c;
   	box-shadow:         inset 0 0 10px #332f4c;
	text-shadow: 0px 2px 1px #332f4c;  */ 3D effect - shadow colour darker than the background (#4e4973) font colour (set in 'Header Area/Menu 1') is lighter than the background*/
}

My boyfriend is a great photographer so we spend an afternoon taking jumping pictures and also some head shots for the about page.
Then using CSS, I took off the menu and footer content from the homepage and made a letterpress effect menu in Photoshop.

/* to stop displaying Home title, menu and footer content, as the menu is on the actual page for homepage*/ 
#post-5 .post-headline, html body.home #footer_widget_area.bfa_widget_area, html body.home div#menu1{
    	display: none;
}

In Dreamweaver I used hotspots to make each menu item in the image a link and pasted the whole code into my homepage.
I also bought a plugin at code canyon that puts content from my facebook page and twitter account in a slider at the edge of the page. it is fixed there and stays there whether you scroll down or click on a different page. I customized it to move it down a little as it was initially over my header. I also disabled this plugin from mobile devices as it interferes with the smaller screen size.
Very happy with the end result!


Bokche's introduction text


I actually am thinking of making the text a little more interesting like Bokche has done on his home page. I’d have to do this in Photoshop and make sure I use the alt tag to get SEO from the page or else Google will not be able to read anything on the page as it is picture based.
IF I have time to do this, I will also use ‘WordPress SEO by Yoast‘ to enhance the SEO on the home page (and other pages). But for now I am going to concentrate on the mobile website first as the hand in is in a week 🙂

Here are some other visual examples of how my website has changed:
About Page before:

About Page after:

What I have changed in the About Page:
Firstly I completely re-wrote what I had written as it was far too comprehensive. Then I made little headings so it was easier to skim through. Under each header I made a line using the html hr tag. in css I styled the hr tag to be 50% wide instead of the full width of the page and gave it a top-border so It would have a (tiny) letter pressed effect. I initially used the below CSS:

 hr {
    display: block;
	height: 2px;
	border: none;
	color: #aaa;
    background-color: #aaa;
    width: 50%;
	border-bottom: 0.5px solid #fff;
}

But that didn’t show up in Safari (Safari just showed a thick grey line). So I did some research and found out that Safari needs a bottom border and a top border, it does not listen to color or background color.
So I ended up using this code that works in all browsers:

 hr {
	display: block;
	position: relative;
	width: 50%;
	clear: both;
	border: none;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #fff;
}

I also used two divs to break up the text, one floating left with information about marolinedesign, another floating right with information about marjolijn. I made sure that both content was the same height to keep consistency and make sure that they are symmetrical.

Above the text I added three black and white photos with a white border of me smiling in different facial expressions. This is to make it interesting (hopefully!) and engage people to want to learn more about me, hopefully it also emphasizes my personality that I am trying get to shine through.

Contact Page before:

Contact Page after:

What I have changed in the Contact Page:
To be fair I had not added any content in the contact page yet, but I had already decided I wanted to break it up in 3 divs, all floating left with a set width to keep it consistent and symmetrical.

  • The first div houses my email link and phone numbers.
  • The second div my follow me on twitter button (the code from the twitter website) and my ‘find us on facebook’ button (the code from the facebook website)
  • The third div has my contact form, with a drop down for the reason they are contacting me (web design, re-design, seo, something else, etc).

Blog Page before:

Blog Page after:

What I have changed in the Blog Page:
Again, the blog page content had not changed much, as I had already written three tutorials (for now, more to come) and I still liked the way way blog posts were “peeling” away. I did however, want to move away from the welcome blurb being a post and wanted it embedded in the page like all other pages, with blog posts underneath. I am currently in the process of doing that, using a different page template (part of my theme) and custom queries to get the blog posts underneath, although I am having a few problems with the display of the page as it somehow strips away the styling (in particular the unordered list). So am still playing around with that to fix it, if not I will leave it as it is.

Footer before:

Footer after:

What I have changed in the Footer:
I have changed the buttons, the text colour as I thought it was too much orange and wanted to keep the orange as a feature so it shows up when hovered over the white blog posts and categories.

the difference between a pressed/hovered over button and non-pressed button

The buttons were made in Photoshop using the custom shape tool and mask mode, following a tutorial on Moodle. I also gave it a inner shadow and bevel/emboss effect to make it look a little 3D. Furthermore, I made two other buttons, with a white text and without the bevel/emboss, that I am using as a rollover image which almost gives the impression of a button being pressed.
The actual rollover effect was created in Dreamweaver and the code copied into a text widget in my custom widget area I created in the footer.
The subscribe on was a little trickier as I wanted a pop up lightbox effect with a feedburner form in, instead of re-directing away from my website to the feedburner website.
So I found a ‘formlightbox’ plugin, that I customized to work on the click of the button instead of text. this also meant I had to adjust the original dreamweaver rollover code, but I managed to make it work! The following code:

onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Subscribe-Tutorial','','/images/subscribe-to-marjolijn-s-tutorials-hover.png',1)"

was originally in the a href tag. but as this lightbox form uses a short code to make it work, there was no a href tag, so I added it in the img tag after the img call like so:

<img src="/images/subscribe-to-marjolijn-s-tutorials.png" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Subscribe-Tutorial','','/images/subscribe-to-marjolijn-s-tutorials-hover.png',1)" name="Subscribe-Tutorial" width="185" height="262" border="0" id="Subscribe-Tutorial" />

which makes the rollover still work AND the form lightbox work like so the screenshot above.
The request tutorial button links to a page with another contact form, which can have a screenshot attached too like below:

That wraps up the whole website! So apart from possibly using an image with cleverly places type and possibly changing the blog welcome to embed in the page rather than it being a post, it is DONE! 😀

PS have a look at the real thing in progress

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>