Preview of new Mrinterface website

[Mrinterface]

Finally I got some time to work on my new and improved mrinterface website.
I was thinking of using the old terminals look from the 80s for this new version. Check it out here :

Mrinterface_preview1.png (320.62 KiB) Viewed 4987 times

The site will contain the video reviews, the simulators and a small personal blog( all the other sections will disappear )

I was thinking of using pixel art keyboard pictures in some way( these : http://geekhack.org/index.php?topic=19113.0 ). Maybe use them as thumbnails for the actual keyboard pictures/videos.

Any feedback on the design is appreciated.

EDIT : I won't do the blog. If I have something to type, I'll type it at DT....

[Burnin]

For inspiration: http://bytbox.net/blog/ IMHO this is the best personal blog design ever

[Mrinterface]

For inspiration: http://bytbox.net/blog/ IMHO this is the best personal blog design ever

Nice, thanx!

[Acanthophis]

I don't like a dark theme, so there's that.
I personally like minimalistic designs. Displaying info as simple as possible, but not more than needed. But that's personal preference.

Nevertheless, good luck (kinda sounds wrong, but I couldn't come up with a better term)!

[RC-1140]

Personally I like dark themes, but green on black is too much contrast imho. Also this font is not too readable. Really no offence, but I don't like it.

If choosing a dark theme, a lower contrast would be preferable. Look at the solarized color scheme by Ethan Schoonover for an inspiration, this is my favourite color scheme. I also made a custom css for a blog I often read:
http://blog.fefe.de/?css=http://web.hal ... arized.css
It's based on this css:
http://blog.fefe.de/?css=darkgreen.css

If you want to use green you might also look at this:
http://blog.fefe.de/?css=greenplot.css
The lower contrast of the green on dark green compared to green on black makes reading less tiresome.

[Burnin]

http://blog.fefe.de/?css=http://web.hal ... arized.css

This one looks pretty nice

[Acanthophis]

Ok, I phrased that dumb, or wrong, pick one.
RC-1140 is right, the high contrast threw me off.
His dark blue example blog is quite nice, I admit.

[RC-1140]

His dark blue example blog is quite nice, I admit.

Why else would I have made this css? It's not my blog though

It's my default color scheme for nearly everything I do at the computer which is not meant to be printed. Can be found here:

http://ethanschoonover.com/solarized

It's nice as it has many colors available for highlighting, and the contrast is balanced between all these, so everything fit's together nicely.

Anyway, MrInterface, what I think is another "problem" is the legibility of the font you have chosen. It might look great for logos or designs, but for content I would choose something different, like Audimat Mono regular if you want to keep the sharp edges and the industrial look. Or maybe another different font, you can find many good free ones on fontsquirrel.com

btw. what was the font you chose at first? VT220? Your first try looks very much like this: http://blog.fefe.de/?css=vt220.css

[webwit]

I was thinking of using the old terminals look from the 80s for this new version.

In web design, it's a common mistake to take this too far. For example, if you have a site about cars, you could design a page to look completely like a car. Cute, but unusable. What you should do instead is use a few critical elements, use good colors, but keep it "normal" for the rest. Then you get the feeling you want, but keep it usable and sane. So in this case, a logo or header lines would use that old terminal font, and black and green would be prominent colors, maybe green only for headers, but normal text would use an ordinary font.

[rodtang]

That font is awful if you want people to actually read anything on your page.

[Acanthophis]

The duck must know.

I like your header. You should hang on to that. The rest could be...well, "cleaner", as mentioned above.

[Mrinterface]

First of all, thanx for all the feedback. I really appreciate it.

I'm not really looking for the most perfect font to use for legibility. I'm looking for ways to re-live the terminal era on the computer screen used these days. I got the font from this place : http://sensi.org/~svo/glasstty/
Since I grew up with these kind of computer interfaces ( fluorescent green on black ) I thought to incorporate it in a new design for the website.
I'm currently looking into some tradeoffs between my maniacal pursuit for old school terminal font perfection and current day user font preferences

[RC-1140]

You should definitely keep the header.
I would go for something like the greenplot.css I've linked, with a font like Audimat. I think that's a good compromise.

[Mrinterface]

I just came to some realization : if I'd like to use that particular terminal font in any way , the user needs to have it installed. If the user does not have the font, it will default to a more common one.... Doh.

[webwit]

You can embed a font in your site nowadays.

[Mrinterface]

You can embed a font in your site nowadays.

Thanx, did not know this yet. I found the @font-face property.... Great.

[cactux]

[Account and posts deleted on request]

[Mrinterface]

Do not get me wrong, I love green but IMO reading green text is hard to read

I'm currently looking into a merger of darkgreen.css and that terminal VT220 font. I want to make the effect more subtle. I think I'm going to use a better readable font for stuff like texts/blog, but for headings I can choose the VT220 font. I'll mock it up and see how it looks

[Burz]

Re: green-on-black...

Try amber instead. Old-school but classier and easier on the eyes. Also, don't go with the fully saturated monochrome values; they don't look authentic. De-saturate the foreground color just a bit, and make the scanlines blur just a bit.

[Mrinterface]

Re: green-on-black...

Try amber instead. Old-school but classier and easier on the eyes. Also, don't go with the fully saturated monochrome values; they don't look authentic. De-saturate the foreground color just a bit, and make the scanlines blur just a bit.

Nice....

Already incorporating most ideas. I'm trying to get a healthy blend of greens/ambers in the most minimalistic design I can think of.

Work in progress :

[Mrinterface]

Just updated the whole website with the new design.

I hope you all like it

http://www.mrinterface.com

Regards.

[fossala]

Is there any reason it's split over 4 pages?

[Mrinterface]

Is there any reason it's split over 4 pages?

Not really , no.
I can change it easily to just have it all on 1 page.

[fossala]

I have just always disliked having to go through multiple pages. The only reason I can see is for adverts that your website doesn't have.

[Mrinterface]

Alright, fixed that

[fossala]

Trying to be helpful here, not horrible, but when you scroll down the top of the table that follows is white. Shouldn't it be black like the rest of the page?

[Mrinterface]

Trying to be helpful here, not horrible, but when you scroll down the top of the table that follows is white. Shouldn't it be black like the rest of the page?

Yes, you are right. Did not notice that since I had my page scroller on
Thanx for the help. Will fix that.

[Mrinterface]

There... FIxed.

[fossala]

Looking good

[Vierax]

yep it looks great, even if the page takes a lot of time to load because of youtube vids :/