MyBB Internal: One or more warnings occurred. Please contact your administrator for assistance.
MyBB Internal: One or more warnings occurred. Please contact your administrator for assistance.
MyBB Internal: One or more warnings occurred. Please contact your administrator for assistance.
MyBB Internal: One or more warnings occurred. Please contact your administrator for assistance.
Nightingale Forums - Website design mockup(s)

Nightingale Forums

Full Version: Website design mockup(s)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4
Some people have requested a new website design for when we release Nightingale. I've put together a design based on Manko10's feather design. Here it is:
[Image: 28jazkh.png]

If anyone has any designs of there own, submit them! I'd love to see them!

NOTE: This is just an idea. It is NOT going to become the new design unless people like it.
That's a whole lot better. The layout, though, is still the same. I'd tweak and optimize that a bit as follows. Currently it's not ideal for presentation. The top part is okay but the bottom part should contain things like prominent features etc.

It's good that you adjusted the line height in the product description, but perhaps you could decrease it a tiny bit and use the same height for other text too.

The next thing is the blog. I think it would be better to place it on a separate page rather than on the front page (probably you could place a little section "latest blog posts" with short teasers among the feature descriptions mentioned above). It is also very important to shorten the lines. In your draft as well as on the current website they fill the screen width and that is too long. The text is hard to read and you often lose the lines. On the web a line should not go beyond 40 or 60 characters, sometimes 70, depending on font, size and color. Also the font size is too small, better use the general main font size and only change it on purpose.
We might also replace the single screenshot with a slide show as soon as we have a first public release.

I'm not sure if I'm so happy with the rasterized background, but I think it would work as long as we keep it subtle.

Perhaps you could create another draft that shows how the site would look like when Nightingale is ready to release.
Oh, a very important point I forgot to mention, you have to place the logo somewhere. The colored logo version and the name written in our logo font has to be placed somewhere in larger size. I would also recommend a bigger footer section where special links, legal notices and the outline logo version with name and slogan can be placed.
I made that one knowing that people would like changes made to it. You do have good points (mainly having the blog on a separate page) & I'll work on implementing them when I get around to it.
I've made another design.

[attachment=77]

The above screenshot is just a splash page you'll see when you go to http://getnightingale.com/

The navigation entry with the bold text & dotted underline (the "Home" link in this picture) is what the current page is. If you were to go onto the forum, the "Forum" link would appear that way.

I'll make a design for the forum & blog if people like this one.

Just remember: It is a SPLASH PAGE and therefore, is meant to have minimal information on it.

EDIT: I just realized, I forgot to add a Blog link in the navigation.. Just pretend that there's one there.
Actually, I don't know whether it is so good to have such a minimalistic splash page. Splash pages are a rather bad manner in web design as they are uninformative, annoying for people who just want to access the site quickly and not a good idea for search engine optimization at all.
I'm also missing the logo font and to my taste the logo is a bit too big. Also the line spacing for the text is too much, whereas the space between text and button is too small.
Having the navigation on the bottom is not a good idea for usability reasons. People don't expect it there and those with small screens won't see it without scrolling.
The dotted line below the active navigation is hardly visible.

The overall page gives to little information about what Nightingale is and why you should use it. There is the short text, but people won't read it due to the high line spacing. There is also the logo, which might tell you that it has something to do with music, but the product itself is missing.
[attachment=78]

I've made the changes mentioned by Manko10 and added a features table (if you can call it that). I know something needs to be done with the styling of the features area, but I'm not sure what. Please make suggestions.

Also, in regards to splash pages in web design, Songbirds site (http://getsongbird.com/) is just a splash page. So is the Apple site. By putting in properly labelled links & meta tags, SEO wouldn't be a problem.

EDIT: If the image appears lighter, then blame GIMP for saving the PNG wrong. This problem should only affect Firefox users.
Much better, although I don't like the font too much, especially the kerning isn't done right. Please reduce the letter spacing a bit for the introductory text.

Quote:Also, in regards to splash pages in web design, Songbirds site (http://getsongbird.com/) is just a splash page. So is the Apple site. By putting in properly labelled links & meta tags, SEO wouldn't be a problem.
Yes and no. It always depends on how you define a splash page. I wouldn't call the Songbird site a splash page. It is already a real website, although very minimalistic. What they could have done better is to integrate the other pages. It is always confusing if sub pages look completely different than the main page (e.g. Apple has done this right, their website looks very consistent). That is one more usability reason why splash pages are bad; especially those who just have one or two images, maybe some music (ick!) and a link with the text "Click here to go to our stunning website" are completely brainless and annoying.
So what I would suggest is designing the front page in a way that we can easily use the design for all the other pages as well (just with slight modifications or completely without any).
But don't misunderstand me: your approach of having a minimalistic page is very good and I like that idea. Many people cram their sites in a way that makes you sick. However, we should find a balance between tidiness and information.

I think the logo and Nightingale font are still too big. They smother the rest of the design. Another thing is the contrast. The navigation bar is placed correctly but lacks a bit of contrast to the rest of the page. The same applies to the download button.
One general thing is the layout grid: you should align the page elements to an imaginary grid so they look more organized and well structured. Currently the page looks a bit cluttered.

And one more creative task for you: think about what you find absolutely intriguing and crucial about Nightingale. What must be on the front page so that you would immediately download this player? Find it and place it properly. :-)
(05-13-2011, 09:36 PM)Manko10 Wrote: [ -> ]Much better, although I don't like the font too much, especially the kerning isn't done right. Please reduce the letter spacing a bit for the introductory text.

It's just verdana with 0.2em spacing.

(05-13-2011, 09:36 PM)Manko10 Wrote: [ -> ]
Quote:Also, in regards to splash pages in web design, Songbirds site (http://getsongbird.com/) is just a splash page. So is the Apple site. By putting in properly labelled links & meta tags, SEO wouldn't be a problem.
Yes and no. It always depends on how you define a splash page. I wouldn't call the Songbird site a splash page. It is already a real website, although very minimalistic. What they could have done better is to integrate the other pages. It is always confusing if sub pages look completely different than the main page (e.g. Apple has done this right, their website looks very consistent).

making the design consistent is a must. as for splash pages and design consistency, see my site (http://mattsd.com/) for example. its got a splash with subpages and the design is consistent.

(05-13-2011, 09:36 PM)Manko10 Wrote: [ -> ]I think the logo and Nightingale font are still too big. They smother the rest of the design. Another thing is the contrast. The navigation bar is placed correctly but lacks a bit of contrast to the rest of the page. The same applies to the download button.

I'm trying to match the colors to the logo and the Orange and purple in it are too dark to use in anything that's supposed to stand out.

if we were using the blue bird instead then I could use the blue, but that's not the way the cookie crumbled.

personally I'm starting to think that this design is an inappropriate one for various reasons.

(05-13-2011, 09:36 PM)Manko10 Wrote: [ -> ]And one more creative task for you: think about what you find absolutely intriguing and crucial about Nightingale. What must be on the front page so that you would immediately download this player? Find it and place it properly. :-)

what the product does better than all the other products like it. that's what gets me to download something and try it.

I'm on my phone now so I'll make the changes tomorrow.
Personally I think, the bottom section with the screnshot should have a clear limit on the top. I'm thinking of a layer or something.
Eventually a screenshot with the logo popping out in one border would be nice to replace the logo.
And the download button could have some color.
Maybe you could spread the gimp file, so we can try around with it, to play around with it, try other things etc.
Pages: 1 2 3 4