jare — 2013-12-20T05:43:43-05:00 — #1
I need your opinion on graphical style and navigation.
- Cyrillic filler text! Generally, cyrillic fonts are ugly as if they carved with an ax, especially on the large letters, so i have spend reasonable time to find proper font and i want you to embrace it's typograpical beauty
- Since it's not a commercial site i didn't include fallbacks. So only IE 11 and all fresh browsers.
- It's adaptive (3 level) and touch enabled.
What I want to accomplish:
I like how Apple(http://www.apple.com/iphone-5c/) used partially obscured graphic elements to subconscious tell that this page is scroll-enabled and how scrolling isn't a scrolling as we know it but more like some parallax-scroll thingy without invalid state(when you half-scrolled from one section to another and content is out of place and looks weird or unreadable) and still it feels like scrolling. So i wanted to try something like this, but build around HTML5 video backgrounds and to be non-distracting.
On the technical side:
I have made this project to play with Google Dart language (just released from beta) SASS/compass, HTML5 goodies and a new grid systems from the Foundation + some Scala on the Google App Engine JVM.
And it was pretty much good, well greased experience. I've managed to optimize pretty much every aspect of the page. Here's some benchmarks: [1, [url=https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Ftvc-2m.appspot.com%2F]2, [url=http://gtmetrix.com/reports/1.tvc-2m.appspot.com/egxhXt0V]3](http://validator.w3.org/check?uri=http%3A%2F%2Ftvc-2m.appspot.com%2F) With js and vanilla css it would be too hard and to tediously to do for free
Ah yes. Here is the link http://tvc-2m.appspot.com/
amy_hhd — 2013-12-29T18:08:53-05:00 — #2
First time through the site the camera moved on its own on the selected pages. I didn't really "get" what the sliders were for. Then second time through the camera didn't move on its own so I got it. However not sure if I would have if I hadn't seen it move on its own the first time. Very clever. Upon minimizing the screen size everything responded beautifully EXCEPT the image of the camera completely disappeared. Not sure if I would understand on a mobile device if I never saw the product image. I was viewing on Chrome on a 15" screen laptop and resized the screen to check the responsiveness. Hope this is helpful. A.
clipartlab — 2013-12-31T05:36:39-05:00 — #3
I'd suggest you try with more rounded font such as Calibri.
I'd also get rid off the blue outline on the mouseover text or would test 1px border variant.
noppy — 2014-01-02T05:31:22-05:00 — #4
Hey looks good to me.
The only fault for me seems to be that when you mouse over the square page indicators the border of the div that opens runs over the square below. Which i think is what ClipartLab is also saying.
If you got rid of the border i think the box with the pointed end and drop shadow would look better as well. Drop shadow within a border always looks a bit odd to me.
I also couldn't get the first screen back. not sure if this is important (can't read russian) but i guess i would like to be able to at least click somewhere to drop the first blue screen down.
Tested on FF26.0 Win7 64bit
jare — 2014-01-07T18:08:28-05:00 — #5
It's really helpful feedback. Normally you should visually connect controller (slider) and controlled element(camera image). I took a compromise between "right" and "pretty" because left part of the page looked a bit "too heavy" so i grouped inputs with the text panels. Since there is nothing else that can be controlled on the page I thought that it is obvious. But of course I can't tell for shure since i designed it.
Thanks, "Calibri" looks nicer and more readable. It's even more important for the big chunks of text. But "CondensedLight" might look more official and technical. On the firs "blue page" i use built-in font to deliver some content asap. Theoretically i can load another font in deferred way, but it will interrupt user. I definitely should play more with fonts and typography.
It's a Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=480888
I made this tooltip thingy without JS on pure css (hover + before, after) out of curiosity. And it turned out to be non-agile and with some glitches. For example i can't make proper arrow size in IE. So yah it's not a good solution + this bug makes it look somewhat strange.
Thanks guys! I appreciate your help.
mittineague — 2014-09-12T20:46:09-04:00 — #6
This topic is now archived. It is frozen and cannot be changed in any way.