Preview of new Mrinterface website
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
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 :
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....
I was thinking of using the old terminals look from the 80s for this new version. Check it out here :
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
- Location: Russia
- Main keyboard: KBT Pure
- Main mouse: Genius NetScroll 100
- DT Pro Member: -
For inspiration: http://bytbox.net/blog/ IMHO this is the best personal blog design ever
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Nice, thanx!Burnin wrote:For inspiration: http://bytbox.net/blog/ IMHO this is the best personal blog design ever
- Acanthophis
- Location: Germany
- DT Pro Member: -
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)!
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
- Location: Germany
- Main keyboard: Unicomp Terminal Emulator
- Main mouse: Razer Mamba
- Favorite switch: Buckling Spring
- DT Pro Member: -
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.
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
- Location: Russia
- Main keyboard: KBT Pure
- Main mouse: Genius NetScroll 100
- DT Pro Member: -
This one looks pretty niceRC-1140 wrote: http://blog.fefe.de/?css=http://web.hal ... arized.css
- Acanthophis
- Location: Germany
- DT Pro Member: -
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 is right, the high contrast threw me off.
His dark blue example blog is quite nice, I admit.
- RC-1140
- Location: Germany
- Main keyboard: Unicomp Terminal Emulator
- Main mouse: Razer Mamba
- Favorite switch: Buckling Spring
- DT Pro Member: -
Why else would I have made this css? It's not my blog thoughDeathAdder wrote:His dark blue example blog is quite nice, I admit.
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
- Wild Duck
- Location: The Netherlands
- Main keyboard: Model F62
- Favorite switch: IBM beam spring
- DT Pro Member: 0000
- Contact:
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.Mrinterface wrote:I was thinking of using the old terminals look from the 80s for this new version.
- Acanthophis
- Location: Germany
- DT Pro Member: -
The duck must know.
I like your header. You should hang on to that. The rest could be...well, "cleaner", as mentioned above.
I like your header. You should hang on to that. The rest could be...well, "cleaner", as mentioned above.
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
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
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
- Location: Germany
- Main keyboard: Unicomp Terminal Emulator
- Main mouse: Razer Mamba
- Favorite switch: Buckling Spring
- DT Pro Member: -
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.
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
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
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
- Wild Duck
- Location: The Netherlands
- Main keyboard: Model F62
- Favorite switch: IBM beam spring
- DT Pro Member: 0000
- Contact:
You can embed a font in your site nowadays.
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Thanx, did not know this yet. I found the @font-face property.... Great.webwit wrote:You can embed a font in your site nowadays.
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
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 lookscactux wrote:Do not get me wrong, I love green but IMO reading green text is hard to read
-
- Main keyboard: Matias Mini Quiet Pro
- Favorite switch: Matias Quiet
- DT Pro Member: -
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.
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
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Nice....Burz wrote: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.
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 :
- Attachments
-
- Screen Shot 2012-10-25 at 11.59.47.png (394.25 KiB) Viewed 4870 times
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Just updated the whole website with the new design.
I hope you all like it
http://www.mrinterface.com
Regards.
I hope you all like it
http://www.mrinterface.com
Regards.
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Not really , no.fossala wrote:Is there any reason it's split over 4 pages?
I can change it easily to just have it all on 1 page.
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Alright, fixed that
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
Yes, you are right. Did not notice that since I had my page scroller onfossala wrote: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?
Thanx for the help. Will fix that.
- Mrinterface
- Location: The Netherlands
- Main keyboard: UHK
- Main mouse: G203
- Favorite switch: Monterey blues
- DT Pro Member: 0012
There... FIxed.
- Vierax
- Location: France (Lille)
- Main keyboard: Tipro MID KM128 Bépo layout
- Main mouse: Kensington Orbit Trackball
- Favorite switch: MX Clear / MX Grey (under thumbs)
- DT Pro Member: -
- Contact:
yep it looks great, even if the page takes a lot of time to load because of youtube vids :/