OT (or not?) - new website

OT (or not?) - new website

Hi folks,

sorry for what may seem a sneaky self-promotion campaign but actually it is not...

an unfinished/test version of my website is out in the wild and I'd be glad if some of you want to make a stop and report back any browser issues or typo (there are both an IT and an EN version)

the reason why I thought it was not totally improper to post here is that most of the images have been made using Cheetah3D at some point (and pretty often as the main app). Also, I plan to add a whole section dedicated to C3D inside the "stuff" area (currently under construction) where I'd like to share models, materials, thoughts etc. so keep an eye on it if you want (don't hold your breath though...)

don't hesitate to submit any comments/question/criticism using the contact form on the website

thank you and sorry for the intrusion...

cheers,
Alessandro

P.S.: ouch, I was about to forget the link: www.studioardesign.it

Worked great for me using Safari 5.1, OSX 10.6.8
Nice job on it!

Looks great Alessandro!!

Your Cheetah renderings look awesome:icon_thumbup: :icon_thumbup:

The only things I have concerns with, are that your menu is a little hard to read on the darker images.
And, you might want to change your 'Blog' page to open in a new window so people get knocked off of your main sight.

Erin

SurfingAlien said:

Hi folks,

sorry for what may seem a sneaky self-promotion campaign but actually it is not...

an unfinished/test version of my website is out in the wild and I'd be glad if some of you want to make a stop and report back any browser issues or typo (there are both an IT and an EN version)

the reason why I thought it was not totally improper to post here is that most of the images have been made using Cheetah3D at some point (and pretty often as the main app). Also, I plan to add a whole section dedicated to C3D inside the "stuff" area (currently under construction) where I'd like to share models, materials, thoughts etc. so keep an eye on it if you want (don't hold your breath though...)

don't hesitate to submit any comments/question/criticism using the contact form on the website

thank you and sorry for the intrusion...

cheers,
Alessandro

P.S.: ouch, I was about to forget the link: www.studioardesign.it

Click to expand...

Wow!!
In my experience, the best kind of site is one that immediately delivers its message.
Your site is just that kind: simple, yet extremely effective!

AWESOME!! :icon_thumbup: :icon_thumbup: :icon_thumbup:

-- GS

Erin said:

The only things I have concerns with, are that your menu is a little hard to read on the darker images.

And, you might want to change your 'Blog' page to open in a new window so people get knocked off of your main sight.

Click to expand...

thanks for the feedback Erin.
I know the texts can be difficult to read over some of the images but unfortunately it's an issue I have to live with while using a slideshow of extremely different images as background. I've tried to make them more visible using a dark glow/shadow (which is a css3 feature so not every browser use it) and a white "hover" but I reckon this doesn't totally solve the problem on some images...
thanks for remind me about the blog page, it was what I wanted to do indeed but forgot to set it up correctly... still a WIP as you can see

thanks everybody for the kind words

cheers,
Alessandro

Looks good to me! Meant to comment earlier, but have been slammed here at work. I think the contrast problem is ok. Not much you can do about it and maintain compatability across browsers & OS's. I think that there will be some cognition from memory carried across after seeing it the first time anyway. Plus the hover over shows the copy highlighted either way. I think my only bother with it might be the leading for the main links on the top right. I think I'd give just very slight more room in between. The letters are so rounded they need just a little room to breath (I do like the tight kerning and tight left and right margins though. It looks cool.) I'd probably after adjusting the leading I'd bump the size of your logo on the left to a little larger than the top and bottom margins of the copy links on the right. Especially since your logo is rounded on top and bottom. It's similar to the bowls on a rounded letter drawn higher / lower than the x-height. Just some minor suggestions. I do find inspiration from your renders. Keep up the good work, and thanks for all your advice you've given me and others!

Swizl said:

Looks good to me! Meant to comment earlier, but have been slammed here at work. I think the contrast problem is ok. Not much you can do about it and maintain compatability across browsers & OS's. I think that there will be some cognition from memory carried across after seeing it the first time anyway. Plus the hover over shows the copy highlighted either way. I think my only bother with it might be the leading for the main links on the top right. I think I'd give just very slight more room in between. The letters are so rounded they need just a little room to breath (I do like the tight kerning and tight left and right margins though. It looks cool.) I'd probably after adjusting the leading I'd bump the size of your logo on the left to a little larger than the top and bottom margins of the copy links on the right. Especially since your logo is rounded on top and bottom. It's similar to the bowls on a rounded letter drawn higher / lower than the x-height. Just some minor suggestions. I do find inspiration from your renders. Keep up the good work, and thanks for all your advice you've given me and others!

Click to expand...

hey Swizl,
thanks for your suggestion and kind words!
I see what you mean, not sure how much I can do about it as the main menu is a theme based jquery script and I cannot control every parameter (my fault, not the script). regarding the logo I have to wait until the site (and numbers of pages in the main menu) are done, so that I know exactly the proportion of each item... WIP on all fronts, as you can see

on a side note, I should stop designing websites on Macs just to discover they look so bad on IE powered win machines...

cheers,
Alessandro

Sorry for not replying back sooner. I agree that you are at the mercy of things you can't control. I come from more of a print / manufacturing background and don't have much experience with web stuff. I do work with a bunch of really old school typesetters though. One guy that I work with has been typesetting for nearly 40 years! They have hawk eyes. I've learned a lot from them over the years. Anyway, I still think your site looks great.

I get the IE part. I can't convince my parents at all to stop using it. Oh well....

I didn't notice any typos or grammar errors on the English side. I'll check back every once in a while to see how it's coming along.

I like the emphasis on images. I like your new logo but I think in this context it would work better as a 2d design (so it doesn't fight with the main image). I'd ditch the "made on a mac" thing. I love Apple but my work is mine and your work is yours.

I don't like the typeface choice. It's not very readable, especially against a busy background

The UI is kind of unstable (e.g. when I mouse over "architecture" some stuff appears below it and then disappears before I can click it).

I'm definitely a believer in simple, clean design -- so take my comments for what they're worth. In general I'd suggest simpler, more white space, less tricksy.

thank you Swizl and Tonio,

I'll try to make good use of your comments in the next update :smile:

@podperson: actually the "unstable" UI was an attempt to make it minimal: having the "services/worldwide" sections not ready yet, I tried to sum up and group them under those four categories; so clicking on "architecture" shows its related services and MouseOut hides them again. it is not exactly how I wanted to do but the best compromise I've managed to do in the very short time I could dedicate to the site...

typeface: I actually have chosen the one I liked the most among the usual "web safe" ones, I may consider to "embed" another one like I've done for the "under construction" text... don't know. the truth is this is a "temp" version of the site where I used the existing pages to show something that belongs to the other ones, so the home page has become a temp gallery but I'm not sure I'll keep the slideshow running in background when the gallery/portfolio section will be ready... and working with a static background is another story. the page that is actually closer to what I have in mind is probably the one with the contact form, just to be clear.

simplicity is my main design rule so again thank you for helping me in the quest for it... as you can read in my blog home page, here's one of my fav quotes from architect Renzo Piano:
"La semplicità è il risultato di un grande, profondo, sofferto lavoro: sembra essere un punto di partenza, in realtà è un punto d'arrivo."

(happy google translation)

cheers,
Alessandro

The selection of typefaces that works well on the web is a bit saddening no question. I'd consider using Helvetic, Arial, Sans-serif for an architecture site, or using an embedded font like Futura. Perhaps Thayer are too cliché.

I appreciate the use of progressive disclosure to reduce clutter, but the stuff that appears and disappears looks like a submenu that can't be clicked.

This is a really nice font. That lower case "a" is just about one of the coolest things I've seen. Comes as a web font too! There's a check box to see how it displays on different browsers and different OS's.

Pill Gothic by Betatype.
http://new.myfonts.com/fonts/betatype/pill-gothic/

Not free though sadly. I'd buy the whole set for myself if I had the cash to burn.

Swizl said:

This is a really nice font. That lower case "a" is just about one of the coolest things I've seen. Comes as a web font too! There's a check box to see how it displays on different browsers and different OS's.

Pill Gothic by Betatype.
http://new.myfonts.com/fonts/betatype/pill-gothic/

Not free though sadly. I'd buy the whole set for myself if I had the cash to burn.

Click to expand...

Hi Swizl

thanks for the heads up, I have to say I'm not a fat of that "a" (the world is a nice place to be 'cause we all have different views...), I prefer the round shape of the Walkway set, for example (the problem with walkway is kerning... letters are too close and unfortunately there are some cases where changing the kerning in web pages is a real pain)

if your like sans serif fonts maybe you'll find some of these useful (and free!):

http://www.designerterminal.com/freebies/fonts-resources/free-sans-serif-fonts.html

cheers,
Alessandro

Yeah, definitely! I wasn't knocking your choice of fonts. I didn't really expect you to change your layout. I'm just a font nerd, so throwing some other ones out there. I quite like the way you used it. Most of the standard san serif fonts (Helvetica, Arial, etc.) are so overused anyway and don't really scream that you work in a creative field. Is the one you used a webfont? I'm not sure if the kern tables set up in a webfont work in the web browser? I've never used them for that. I use FontLab to adjust fonts here at work sometimes. We have to have specific tracking / kerning set for ADA font usage (Americans with Disabilities Act). Anyway, the font you picked looks like it's based on a mono-spaced font, which are particularly tricky to kern well even when not trying to display them on the web.

Here are two other web fonts that are similar to the one you used. Again, not trying to steer you away from the one you used. Just thought you'd like to see them.

URW Egyptienne Extra Wide Light

Backtalk Serif BTN Regular

Hey Swizl,

the font I used is good old Courier New... (so yep, mono-spaced indeed)

I'm not an expert in font design but I like to play with them using some kind of instinctive sense of proportions in some of my works. when it comes to web design I'm always a bit scared of what can happen in the different browsers, devices etc. so I tend to be (maybe too much) conservative...

when I'll have the time to work again on the site I'll try to give the font choice a little more love but I think I'll go the sans serif route instead of the courier/mono space one (I love the simplicity of Helvetica Neue but as you said it's way over-used in web design right now...)

I fixed the missing link in my previous post, please check it back again now...

cheers,
Alessandro

Ha cool! Yeah, I was wondering about that. Those are cool. I'll sort through and grab some I like. I keep a folder of ones I like and then will eventually find a use for them. Sometimes it might be a year or two until the right thing comes along to use them.

I kind of thought that was Courier when I first saw it. The webfonts on MyFonts have a display option to see what they would look like in different OS's and browsers. What's good about them too is that the font designer usually spend many months on just tweaking the metrics and kern tables. That has a lot to do with why some fonts can be kind of expensive. The ones I linked too are pretty cheap. MyFonts have discounts sometimes. So not to expensive of an option to stand out from the standard fonts used on most of the web. URW is highly regarded. I do go to DaFont sometimes or find free collections like the one you linked to. Let us know how it's coming along when you update the site.

P.S. I like the Piano quote. Very true.

In general, most "no-name" fonts are badly kerned. It's pretty easy to draw letterforms, but kerning a font is a serious pain in the ass. (I designed one font, long ago, and pretty much nailed the letterforms in an evening — I spent the next year tweaking kern pairs. And note that this was a "display" font, not a "body" font — so it really only had to produce nice headlines.)

I think it's hard to go wrong with the classics:

Futura
Helvetica
Humana
Akidenz Grotesq (sp?)
DIN (based on the European road signage)
Univers
Myriad

Incidentally, the characters most type nerds look at when trying to quickly gauge a font are the ones with the most "degrees of freedom":

e.g. lowercase a and g, capital Q, ampersand &. (The guy who taught me most of what I know about typography always went for ampersand first — it's where the font's "personality" is.)

If you want free fonts that look great on all browsers, try:

http://www.font-face.com/

And try these fonts:

http://webfonts.info/wiki/index.php?title=Fonts_available_for_@font-face_embedding

uploaded a new test for the home page (other pages are unchanged) with:
- different fonts (DraftPunkLTD for title/footer, Novecento for body/nav)
- different behavior of the services list (no more auto hide on MouseOff, now you need to click to show/hide)
- added horizontal space between main menu links (easier than I expected)

layout of right side (outside the container) still needs work but I'd like to fix the rest first

very interested in your thoughts...

cheers,
Alessandro

I meant to reply sooner. Looking good! I like the Novecento. I don't think the DraftPunk is showing up in my Firefox though. iMac PowerPC G5 with Firefox v3.6.23. I'm not sure why it's not displaying correctly. Also the font is coming out wrong for your studio name and your actual name in Safari v 5.0.6 (5533.22.3), but seems to be correct in Firefox. I'm attaching screen captures from both Firefox and Safari for you to compare. Maybe DraftPunkLTD isn't embedding correctly?

You can use Font Squirrel to convert a regular font to a web font. That way you can upload the font to the web page server.

FYI: Font Squirrel is almost certainly a copyright violation.