• Home
  • Blog
  • Add-ons
  • Forum
  • Wiki
  • Developers
Nightingale - The tune of life, the tune of yours
  • Portal
  • Search
  • Member List
  • Calendar
  • Help
  • Portal
  • Search
  • Member List
  • Calendar
  • Help
Guest Hi, Guest
  • Login
  • Register
Login
Username:
Password: Lost Password?
 
Nightingale Forums Development Visual Development Website design mockup(s)

Pages (4): 1 2 3 4 Next »
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Modes
Website design mockup(s)
Matt-SD Offline
Administrator
*******
Posts: 53
Threads: 4
Joined: Sep 2010
Reputation: 0
#1
04-23-2011, 10:52 AM
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.
... and that's how I killed my neighbours cat.

http://mattsd.com/
Website Find
Reply
Manko10 Offline
Lead Designer
***
Posts: 144
Threads: 7
Joined: Sep 2010
Reputation: 2
#2
04-23-2011, 08:29 PM (This post was last modified: 04-23-2011, 08:30 PM by Manko10.)
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.
Read my Blog Refining Linux!
Website Find
Reply
Manko10 Offline
Lead Designer
***
Posts: 144
Threads: 7
Joined: Sep 2010
Reputation: 2
#3
04-23-2011, 11:15 PM
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.
Read my Blog Refining Linux!
Website Find
Reply
Matt-SD Offline
Administrator
*******
Posts: 53
Threads: 4
Joined: Sep 2010
Reputation: 0
#4
04-24-2011, 10:16 AM
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.
... and that's how I killed my neighbours cat.

http://mattsd.com/
Website Find
Reply
Matt-SD Offline
Administrator
*******
Posts: 53
Threads: 4
Joined: Sep 2010
Reputation: 0
#5
05-13-2011, 04:34 PM (This post was last modified: 05-13-2011, 04:36 PM by Matt-SD.)
I've made another design.


.png   Nightingale Project » Home 2011-05-13 16-31-20.png (Size: 340.49 KB / Downloads: 405)

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.
... and that's how I killed my neighbours cat.

http://mattsd.com/
Website Find
Reply
Manko10 Offline
Lead Designer
***
Posts: 144
Threads: 7
Joined: Sep 2010
Reputation: 2
#6
05-13-2011, 05:44 PM
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.
Read my Blog Refining Linux!
Website Find
Reply
Matt-SD Offline
Administrator
*******
Posts: 53
Threads: 4
Joined: Sep 2010
Reputation: 0
#7
05-13-2011, 09:11 PM (This post was last modified: 05-13-2011, 09:12 PM by Matt-SD.)

.png   Nightingale Project » Home 2011-05-13 21-03-58.png (Size: 493.21 KB / Downloads: 396)

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.
... and that's how I killed my neighbours cat.

http://mattsd.com/
Website Find
Reply
Manko10 Offline
Lead Designer
***
Posts: 144
Threads: 7
Joined: Sep 2010
Reputation: 2
#8
05-13-2011, 09:36 PM (This post was last modified: 05-13-2011, 09:37 PM by Manko10.)
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. :-)
Read my Blog Refining Linux!
Website Find
Reply
Matt-SD Offline
Administrator
*******
Posts: 53
Threads: 4
Joined: Sep 2010
Reputation: 0
#9
05-13-2011, 10:04 PM
(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.
... and that's how I killed my neighbours cat.

http://mattsd.com/
Website Find
Reply
freaktechnik Offline
CCO (Chief Crashing Officer)
*******
Posts: 498
Threads: 24
Joined: Sep 2010
Reputation: 11
#10
05-14-2011, 03:16 AM
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.
freaktechnik
Website Find
Reply
« Next Oldest | Next Newest »
Pages (4): 1 2 3 4 Next »


  • View a Printable Version
  • Subscribe to this thread
Forum Jump:


Users browsing this thread: 1 Guest(s)
  • Return to Top
  • Lite (Archive) Mode
  • RSS Syndication
Current time: 03-22-2023, 10:01 AM Powered By MyBB, © 2002-2023 MyBB Group.
Design By AliReza_Tofighi In WhiteCrow Software Group.
white outlined nightingale project logo

Nightingale is free!
It is an Open Source project released under the terms of the GNU General Public License v2 (GPL v2).
For more details, please read the license information.

Follow us!
f  g  t

Support
  • Community Forum
  • Official Blog
  • Add-ons
  • Wiki
  • Help Forum
Contribute
  • Developer's Center
  • Translate Nightingale
  • Source Code
  • Report a Bug
Ressources
  • Download Nightingale
Linear Mode
Threaded Mode