DIYP Got a New Look

I am very happy to announce the new look of DIYP. If you are reading this via RSS, you may want to click though and see the new design.

Over the last few weeks I have been working with the great team at cre8d design to give DIYP a new look.

The fact of the matter is that since I originally installed Drupal on the site, I never changed the default theme. It is a great theme, however it did not allow for some of the features I wanted for DIYP.

The team at cre8d did a very nice job of creating a new theme that makes better use of the space the page has to offer, as well as allow for some community features.

What's New?

Of course we have a cool new slick design, but we also have some new features on the site:

Images from the pool are now featured on the right hand corner, I hope this will encourage readers to submit DIY related to the pool. Currently the images that the block displays are the ones tagged with diypfav, so if you see this tag on one of your images, congrats. The cool thing is that the block allows for filtering by other keywords as well, so it can be used to show assignments submissions, contests results and so on.

Each post now ends with a footer where I will place links that needs highlighting, As you can see it now features links to our RSS stream and to DIYP Flickr resources.

Sharing just got easier, you can share via the small "share" link at the top of each post.

Lastly we now have categories. The top banner shows the various things and topics you can explore on the site. Hopefully, this will make site navigation easier and allow readers to quickly access what they are looking for

There may be some changes and adjustments in the next few days so bear with us.

Love it / Hate it? I'd love to hear.

Get the DIYP greatness via RSS, newsletter and Twitter
Connect with the community:Facebook Page, Discussions, Readers Projects
Share Ideas, Setups, Images and Projects on DIYP's Flickr, visit Readers Photos

Comments

Love it :) looks much more

  • March 9, 2010
  • sui

Love it :) looks much more clean and organized than the previous layout.

New Design

Design looks great mate. Its a very good use of real estate and it certainly is easier to find all the golden posts that you have. Well done!

Looks very nice :)

  • March 9, 2010
  • teko

Looks very nice :)

Problems with the new layout

  • March 9, 2010
  • Mike

Not rendering very well in Firefox. There is a problem with the top banner. The text is a bit wonky too.

Overall layout looks nice.

Screen cap - http://yfrog.com/ajclipboard01hpj

re: top banner

  • March 9, 2010
  • udijw

Thanks mike.  I saw this too once and could never reproduce it after the initial load. now that you see it too I know that I was not dreaming. the design team will look into in, thanks.

is there a specific "wonky" location, like the top banner, or is it all over?

The DIYP logo has settled in

  • March 9, 2010
  • Mike

The DIYP logo has settled in now. The lower links in the menu banner are unreachable. I can see the top of the Hacks&Mods but can't click on it.

The text is one pixel anti-aliasing and hard to read on a hi-res screen. Looking forward to more DIY.

font size is the issue

  • March 10, 2010
  • sillyxone

all of my family machines has Firefox with minimum font-size set to 12 (since most of us don't have very good vision at out ages). Think about usability: you can't cram all the related links into a section of the top menu there, without cluttering and making the top menu hard to read.

beside, IIRC, the font color was #333 and very nice to read. Now it's #000 which creates too much contrast. For most of us who visit this site, we are somewhat highly sensitive persons, and this is not a small thing.

and then, the topics on the page were separated nicely with the title being the only difference from the background text. Now, the gray box at the end of each topic interfere with the title of the next topic, so it's hard to scan through the page.

the info line right below the title is in all CAP, signifying something as important as the title; except there's not.

I suspect the design team was using a large, high-resolution screen. Force them to use a 14-15" screen at 1280x800

the flickr group photo on the right side has thick black border around them. Your audience are mainly photographers, think twice.

BTW, previewing the comment doesn't show line break. Hopefully the line breaks/paragraph are displayed correctly when posting :-)

re: usability

  • March 10, 2010
  • udijw

Hi Silly,

Thankbs for taking te to write this feedback. It very helpful. we are now looking at fonts and font sizes in general as w got many feedbacks about font size. looks like the designer and I are 6/6 :)

I am not sure I understand teh topic comment, can you clarify?

Not sure why the lines did not break.  I will look into it.

I was listing out problems I

  • March 10, 2010
  • sillyxone

I was listing out problems I spotted, as a list. But then, the page doesn't display them as list (no line break) so the whole reply looked like random ranting.

Look like the line break is OK if I switch to plain-text editing. We'll see after I post this comment then. But it switch back to rich-text editing after preview (and loose all the line-break). If there is no deadline for the updates, test them fully (Selenium might be helpful).

Let me try again:

- I usually set Firefox with minimum font-size set to 12 so that breaks the top menu. It's hard to cram all the related links into a section of the top menu, without cluttering and making the top menu hard to read. I suspect the design team was using a large, high-resolution screen. Force them to use a 14-15" screen at 1280x800.

- IIRC, the font color was #333 and very nice to read. Now it's #000 which creates too much contrast.

- the topics on the page were separated nicely with the title being the only difference from the background text. Now, the gray box at the end of each topic interfere with the title of the next topic, so it's hard to scan through the page.

- the info line right below the title is in all in cap, signifying something as important as the title; except they're not.

- the flickr group photo on the right side has thick black border around them, not usual photographer style.

Same problem on Firefox

  • March 9, 2010
  • Thomas

I had the same problem with the header in Firefox for OS X.  After a refresh it went away.

Looks great.

Good work team DIYP.

re top banner

  • March 9, 2010
  • Anonymous

i had that problem with the banner too (with firefox) but it disappeared when i refreshed the page.

Also, your web page's

  • March 9, 2010
  • Freddy

Also, your web page's underwear is showing. (Read: the body element is missing a background-color, depending on users' white default setting.)

re: underware

  • March 9, 2010
  • udijw

Talk about website nightmares :) seeing the underware infront of everybody...

We will take care of that

There's an extra div

  • March 9, 2010
  • cfpg

There's an extra div appearing at the top, which is causing the header problem, I'm on Safari:

http://creamscoop.com/g/995247c9162df85871eaee801232c152.png

re: header

  • March 9, 2010
  • udijw

thanks this is what we are hunting for. I hope this will fix the issue

(FTR, Jeff Zeldman coined

  • March 9, 2010
  • Freddy

Great!

I think this new look works a lot better.. It looks a bit more professional.. where as the earlier one looked very primitive.. :) so thats a good step forward... Congratulations DIYP!!! :)

Congratulations, looks great!

I like it. DIYP has ever been a resource for good tips and inspiration.  finally the site also looks sexy :)

 

New Site

Just a quickie to say 'Congrat's on the new site; real clear, nice to look at and easy to navigate...what more could you ask??

All the best,

Glyn

Slick!

Really liking it. The HTML-enabled comment box is a nice addition. I actually liked the old brown design (it was worlds better than the design that had preceded it), but I have to admit -- I like this better. Simple, yet as fully-featured as the last. Well done!

Excellent improvment

  • March 9, 2010
  • Ivica

It's very practical now and i t looks much better! 

much better!

much better!

Great design.

  • March 9, 2010
  • Jorge

Very easy to go through the contents now. Congratulations.

New site design

I love it. It's fresh, easy to navigate, and very clean.

Great work!

Awesome!

Congratulations on the new look!  The new navigation and overall design are tremendous and take the site to a whole new level!

Looks Good

Great new look Udi!!!

Very nice. Glad to get it.

  • March 9, 2010
  • Art

Very nice. Glad to get it.

Good work!

I'm glad you finally did it!!

much better

  • March 9, 2010
  • iamunique127

this design makes it much easier to find topics, etc.

I'm using Safari 4.0.4 

The text in Camera Hacks is out of whack

Otherwise all good

Congrats. Good move

Thanks

I was wondering what the diyp tag was for. :)

Very honoured to see my pic on the launch of the new site. Thanks to anyone who takes a look around.

The new looks is lovely and

The new looks is lovely and custom fonts is a very nice touch!

Fonts should be sizable.

  • March 9, 2010
  • Anonymous

The design is nice and clean, however, the fonts are not sizeable.  This makes reading difficult for those with low vision or those of us in the aging population that would like to make it a bit bigger. 

Way to go!

Design is slick, navigation is easy, what can I say? Keep the posts coming... :)

very nice love the new

  • March 9, 2010
  • Anonymous

very nice love the new professional look and the interface is nicely streamlined kudos to you and cre8d design!

font size of article text too small

I think it's a nice clean look.

However, I do have one complaint - the font size used for the text of the posts is too small.

(and yes, I know I can zoom in...but I shouldn't need to do this just to read some websites...)

re: font size

  • March 10, 2010
  • udijw

Hi Martin,

thanks for the feedback, we are looking into font sizes now. looks like we got this from several people and it is a big thing.

Thanks for the feedback. FYI,

Layout having problems with (old) posts?

  • March 12, 2010
  • DrH

Some problems with divs and (clearing) float I guess.

See this (old) post: http://www.diyphotography.net/homestudio/super-simple-light-tent

The apple picture clings to the first image and floats into the middel over the right column in IE7. Same for Opera 10.

No problem in FF3, apple image tucks under the first image of the post nicely, but pictures still wider than left column. Same for Chrome and Safari..

re: old posts

  • March 14, 2010
  • udijw

Thanks for bringing this to our attention DrH,

This post had issues even before the migration, and I belive so did other older posts. this is because I did not know about any design rules back when I started.

we are looking into this to see if there is any thing that we can do about then as whole.

Love the the new look!!

  • March 12, 2010
  • Annette

Love the the new look!!

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions. It is not case sensitive
15 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.