MR Re-Design

Discussion in 'Web Design and Development' started by Me1000, Jun 1, 2008.

  1. Me1000 macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #1
    Just something I did in my free time a while back...

    :eek:

    Im sure some people will comment on the articles, but im more interested in your thoughts on the design itself.
     

    Attached Files:

  2. Wee Beastie macrumors regular

    Joined:
    Aug 20, 2007
    Location:
    In the snow with Rosebud
    #2
    It looks nice and the articles made me chuckle...

    Edit: Sorry I'm not the best person to be dishing out advice on web design at this point.
     
  3. Epicurus macrumors 6502

    Epicurus

    Joined:
    Apr 28, 2005
    Location:
    Minneapolis, MN
    #3
    The color palette looks spot on, as do the gradients. As far as look, its fairly good, but the fonts all need to be scaled down a lot. The one lesson for design I've come to appreciate most is that fonts rarely look best when they are big and in your face.

    Specifically, the nav bar along the top looks a little disjointed with the big blank space on the left. Also the use of rounded corners is pretty scattershot. The black hairline borders are also out of place. There also seem to be a lot of thin spaces between the various blocks and there doesn't seem to be any fixed width to them.
     
  4. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #4
    no it's fine, I edited my post because I figured the only thing people would talk about would be the articles...


    Thank you.
    I agree, however it could also be the font itself. I dont like the "Mac Links" text, or the black text under the "mac Polls", "iPhone Blog" sections etc

    I thought the same thing, Im just not sure how to fix it so that it looks better. Also remember the Mac Rumors site has a variable width design. So it needs to be scalable.

    Can you elaborate a little more on this?

    Really? I guess I could increase the transparency on them a little, causing them to gray out...

    You're right.
    When I create a website temple I dont really focus on giving everything the perfect spacing, because that stuff (at this point) is irrelevant to my work. The only purpose it would serve would be to be more ascetically pleasing to the eye for the client. However everything can/will be aligned perfectly using CSS when the template is made into a production page.


    Thank you for your feedback...
    Keep shooting away!
     
  5. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #5
    we should make this a thread where people post their own ideas of what a mr redesign could look like! i might post something later...
     
  6. Epicurus macrumors 6502

    Epicurus

    Joined:
    Apr 28, 2005
    Location:
    Minneapolis, MN
    #6
    The "Mac Links" box has a rather large radius (but only on one corner), while the main articles down the middle have a smaller radius (but on both top corners). Then all the other boxes have square corners. There just isn't any consistency going on here. I'd say either go with one radius everywhere or one pattern for rounding corners (either only the top left or only both top).

    Just a word more about the black hairlines. The left and right columns are outlines in black, but have no black lines breaking up the various sections within each column. The main article column down the middle, however has each article outlined individually. Furthermore, the header for each article, even though it is already defined by a gradient, also has a black hairline along its bottom edge (even the gradient for the footer in the articles doesn't have a black link on all sides). None of the other section headers have black lines. They just have the gradients.

    I do like the direction you're going in, and these are all minor design issues.

    If I might add one new bit of criticism/advice, along the top nav bar, you have doubled up on the visual separators between the links. For one, you have a nice wide space between links. That, along with the capital letters should be enough to give the reader the right idea. However, you also have faint grey lines between the links. This is a little redundant and just adds to the visual complexity. Having a different background for the current page works pretty well with or without these thin lines.

    Ok, one final note: it would be interesting to see the search box get better integrated into the design of the site. I don't know how exactly, but I've always thought it looked a little out of place just sitting there at the top of the page.
     

    Attached Files:

  7. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #7
    hmm...

    I like that...
    With this you also have the ability to fit the search bar into the nav bar on the left side. Ill shop something together, and update in a sec!

    :)

    EDIT: well the color changed a little when I exported it from photoshop, but for the most part it looks fine...
     

    Attached Files:

  8. Epicurus macrumors 6502

    Epicurus

    Joined:
    Apr 28, 2005
    Location:
    Minneapolis, MN
    #8
    Looking at this now, the standard sized search bar looks cramped in the link bar we've got there. Plus, Apple has done a pretty consistent job of having search boxes on the right edge, not the left. If nothing else, keeping the search on the right (in some capacity) would be consistent with the current MR design. To be honest, I don't know what would be best here.
     
  9. InLikeALion macrumors 6502a

    Joined:
    Jul 18, 2007
    Location:
    Greener places than I used to live
    #9
    Search on the left is very counter mac-intuitive, as spotlight is in the right hand corner, and counter web-browser-intuitive, as Ff and Safari have built-in search bars on the top right. Swap search and main tabs. In actual tab browsing, the tabs originate from the left, so going there for the main links is more intuitive, as well, so the swap would make for better ease-of-use.
     
  10. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #10
    You're right, that didnt even cross my mind...

    It is a little cramped however if you thicken the height of the nav bar a little I think it will fit nicely.
     

    Attached Files:

  11. shamrock593 macrumors regular

    Joined:
    Nov 2, 2006
    Location:
    Australia
    #11
    I was never a fan of the orangey brown that Mac Rumors use for the title, I did a little mock-up and I think all blue works pretty well:

    [​IMG]

    Opinions?
     
  12. techlover828 macrumors 68020

    techlover828

    Joined:
    Jun 28, 2007
    #12
    MR is definitely due for a redesign, come on arn!
     
  13. Epicurus macrumors 6502

    Epicurus

    Joined:
    Apr 28, 2005
    Location:
    Minneapolis, MN
    #13
    The new branding at the top looks good, much better than before. I especially like the search bar and the "submit tip" button (although the two are awfully close to each other).

    If I were to try to come up with some criticism, I would have to point out that the main article headlines really get lost in the page. There should probably be a more visual clue that they are important, either with font size, color, or something else. The use of only square corners actually comes out looking pretty good, but I do miss the softer edges. Then again, I was one of the few Mac users who still yearn for the rounded edges of the pre-Leopard Menu Bar. Pretty much all of the other design tweaks are really impressive.

    One other thing I noticed was that you shied away from using capital letters (at least in some places). You have "page two" in the nav bar at the top, yet "Page 2" in the stories section in the left column. Alas, the system will always be unachievable as long as you have words like iPhone and iPod floating around on the site!
     
  14. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #14
    I agree I like the larger header...
    I added a submit news button as well, however the roundness didnt look right with it, so I made it square which made the rest of the rounded corners for the blue parts look off too. So I just squared everything off. Though I dont know what font exactly you used for the text I didnt want to run through the 2000 typefaces I had just for a mockup...
     

    Attached Files:

  15. lofight macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
  16. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #16
    Thank you,
    opinions on how to make it better would be more helpful! :rolleyes:
     
  17. lofight macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #17
    okay..

    -first it looks to crowded.. maybe more spacing would be nicer..
    -too many gradients
    -I would make it wider
    -less spacing between the article title and the window..
    -maybe a more simple font.
     
  18. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #18
    I very much agree it feels very large and fisher price interface like, you know very large elements so you can't miss the buttons with stubby fingers.
     
  19. Me1000 thread starter macrumors 68000

    Me1000

    Joined:
    Jul 15, 2006
    #19
    Ill respectfully disagree,
    The important thing is that spacing can always be easily adjusted though through CSS when the design is made into an actual page.

    IMO that is nature of Apple, open up something like the finder, iTunes, Safari. You will see gradients on just about everything.

    Fluid width design, just like it is now... This was already covered before!

    sorry, I find this funny because you said it needed more space above.
    Anyway, this is again something that is easily fixed with CSS.

    You are limited to the fonts you can use in XHTML, I dont recall exactly what I used for this, but it was probably verdana or something like what is used now...

    --------

    I guess when I originally submitted this I didnt expect people to nitpick the picture because when I design a template in Photoshop I just do enough so that I can slice it up and make the images that are needed and get a general idea of how I want it to look. I dont slave over every pixel because it is pointless because im just going to have to slave over it again when I finally start coding the design.
    And I hope it doesnt sound like im oppose to people not liking my design or people suggesting changes. Because I am not, not at all! I welcome changes to make it better (as you can tell from the changes that have already been made) I just think it is a little rude to say "this is hideous", if that is all you offer you might as well just not say anything. Suggesting changes like, "you should probably round all the corners, or square them off" makes a lot more sense, and is much more helpful!
     
  20. zioxide macrumors 603

    zioxide

    Joined:
    Dec 11, 2006
    #20
    Three-column designs are way too cluttered and way too 2001.
     
  21. Wild-Bill macrumors 68030

    Wild-Bill

    Joined:
    Jan 10, 2007
    Location:
    bleep
    #21
    I'd recommend a reflection effect on the logo, in keeping with Web 2.0 and Apple.
     
  22. MacDawg macrumors P6

    MacDawg

    Joined:
    Mar 20, 2004
    Location:
    "Between the Hedges"
    #22
    I understand your point, but if you throw it out and ask for feedback... you're gonna get it... good and bad... helpful and nitpicky. Roll with it and eat the fish and discard the bones.

    Just remember, it is probably never as bad as some say it is, but it probably isn't as good as others say it is either. ;)

    Woof, Woof - Dawg [​IMG]
     
  23. nate13 macrumors 6502

    nate13

    Joined:
    Feb 16, 2004
    Location:
    Fargo, ND
    #23
    i like the articles :D . As far as design goes, it looks very iphone(ish). maybe a little cluttered, but again this is looking at it as a picture not a webpage.
     
  24. digitalnicotine macrumors 65816

    digitalnicotine

    Joined:
    Jan 11, 2008
    Location:
    USA
    #24
    I'm not a web designer, or graphics designer (just an illustrator/animator), so take my words with a grain of salt.

    I think it's fab that you are trying this, and shared it with us for feedback. The nitpicks are free, too. ;)

    Have you considered trying something totally different than the status quo? What are your likes and dislikes about how it is now? What changes are you aiming for? What do you think is great about how it is now, and think should remain the same?

    Good luck to you. :)
     
  25. lofight macrumors 68000

    lofight

    Joined:
    Jun 16, 2007
    #25
    I'm just being honest of what I personally find about the mockup you made. No need to get angry. These are maybe little changes I mentioned but they make a big difference.
     

Share This Page