Hey hey everyone I would love some feedback on a new site www.eco-cred.com I am creating. It basically serves as a promotional piece right now but we still wanted to have a ton of fun with it. Any suggestions would be much appreciated! This is only my second site ever and I mainly code just to learn new things. Its a real project and we have a couple of programmers and coders that are starting next week to make the dreams become a reality.
It looks basic. Not minimal, basic. Not much design to it really. It's a block of text with a huge image on a grey background. I recommend looking at other application sites. On another note, you never say what kind of app. iPhone/iPad or Desktop? You could turn it into something much better with a little bit more work. Try adding a logo to the left of the main header, then maybe maker the block of text faintly bordered.
I'd love for you to make a JSFiddle of this site so I could play with it and help you out.
I appreciate the feedback! Like I said I am new to this and just wanted to experiment until we hire the rest of the team. Here is the JS Fiddle let me know if it works! http://jsfiddle.net/552j4/
i am too new to all this, but i would surely use something more instead of the grey background, other things are ok, also, when u hover over the fishes at the bottom for the first time, the hover image takes time to load, so how about using sprites fot the same, that would avoid the loading of the second image.
I haven't looked into sprites at all, but I would love to get rid of the "blink" that happens due to the load. I didn't know how to approach that. We are playing with background textures too we haven't found any yet but we definitely think it needs something.
Well...I think you're off to a great start, ArchDesignLabs! First off, I enjoy the illustrations. I think the site definitely has personality.
I see a lot of comments about the dullness of the grey background...ok, so, maybe not the best color choice.
I would build this site from the standpoint of someone who doesn't know anything about this app. I agree with others as I'm not clear how this app really works either. Maybe a diagram to show users, as well?
Thanks @robst we are definately going for personality and quality graphics to stack onto the idea.
We are actually coding the begins to the web app now and will soon be posting more information and graphics including a nice video on how to use and why you should use it :)
The grey is def. dull and should probably have a subtle texture applied to it to give more depth so that is something we will continue to explore. Hoping to have updates by the end of the weekend actually! Great comments I am def. not a web designer but I am passionate about learning anything and everything related to architecture and design.
@dfogge thats how I originally had it but even if I put in a large background image for wider monitors the page wrap is still chopping off the visible image outside of 1214px. I have tried to set overflow to visible and everything else I can think of but I still cannot get it to show what is outside of the pagewrap. Suggestions?
So I styled the box that holds the main text a lot. Here's what got: http://jsfiddle.net/552j4/113/ There's a lot of CSS3 so many of your IE users won't be seeing the same site as you unless they have Chrome/Safari/Firefox.
Not sure how I feel about it @odd_e it seems like it just added on for no reason. I like the idea of calling more attention to the test but I think it can be done in a more elegant way. Got any other ideas?
Well, there's not a whole lot of information given, not even a screenshot of the app, or even what platform it's for. I think that if you gave more information, your site would look a lot nicer.
We have basically hit on everything that it does in the paragraph but we are changing everything to more graphics like the ones we have started on. Its a web app not for the phone yet I guess that would help if we said that. We have graphics of the design and how it works too that we are constantly adapting based on our Alpha testers. What is one thing you think should be added specifically? Graphics/Info. We are just having trouble deciding what to show because if we put everything up it would be an info overload. haha
I think that you should check out other web apps websites and that you should also see how other sites use the color scheme you do, and see how you should set it up. ex: Notable App
Great concept Arch! Go Canada! @ Beaver. :D It would be fun if the coloured buttons did something. Maybe ajax speech bubbles that pop up saying some sort of power saving operation but with different colours for the bubbles than the usual white.
Thanks @schot we love our mascot too! You have a great idea and we would love if the buttons would do something too but frankly I have no idea how to get it done haha. We are also still building both our front-end and back-end team as we only want the best for our startup! Gone through 12 candidates and counting with a few being tested as we speak!
If you would like to take a stab at making the buttons do something let me know and I can update a Js_fiddle or tinkerbin for you to show us the way.
The bubble technique is actually really cool! It only seems to work in safari for me though and displays in a very ugly way when it doesnt animate. Do you know what the browser support is?
I am using a wufoo form for the email part and I cant seem to figure out how to change the EMAIL part as you suggested. The form styling wont accept the placeholder="email" value so I will have to scratch my head for a while.
I actually hate how much text there is so we are changing it to be more infographic or even a simple 4 step process to explain the idea.
Great advice! Love the idea of the bubbles and really hope I can figure that out!
The reason that only works in Safari (and Chrome) for you is the animations are prefixed with -webkit-transform
you can copy these and change them to -ms-transform -moz-transform -o-transform and transform free
It may not need prefixes in some browsers the -webkit-box-shadow should work as just box-shadow
it's best to try it out on as many browsers as possible -ms is trident (Internet Explorer) -webkit is webkit (chrome, safari and android browser) -o is presto[I think] (Opera) -moz is mozilla (Firefox)
http://www.eco-cred.com
Thanks a million!
I'd love for you to make a JSFiddle of this site so I could play with it and help you out.
Thanks again.
i am too new to all this, but i would surely use something more instead of the grey background, other things are ok, also, when u hover over the fishes at the bottom for the first time, the hover image takes time to load, so how about using sprites fot the same, that would avoid the loading of the second image.
thanks
Thank you very much!
here is an article by Chris Coyier
http://jsfiddle.net/552j4/72/
when the browser is below a certain width the woodchucks feet get cut off and move to the left of him.
http://mobile.tutsplus.com/articles/marketing/7-great-app-promo-websites/
@krysak4ever great article I will def check it out! Thanks!
I see a lot of comments about the dullness of the grey background...ok, so, maybe not the best color choice.
I would build this site from the standpoint of someone who doesn't know anything about this app. I agree with others as I'm not clear how this app really works either. Maybe a diagram to show users, as well?
We are actually coding the begins to the web app now and will soon be posting more information and graphics including a nice video on how to use and why you should use it :)
The grey is def. dull and should probably have a subtle texture applied to it to give more depth so that is something we will continue to explore. Hoping to have updates by the end of the weekend actually! Great comments I am def. not a web designer but I am passionate about learning anything and everything related to architecture and design.
After that would be you'd just need to drop in a wider background image for #footer-top to compensate for wider monitors.
http://documentstorageexpert.wordpress.com/
http://jsfiddle.net/552j4/113/
There's a lot of CSS3 so many of your IE users won't be seeing the same site as you unless they have Chrome/Safari/Firefox.
Thanks again
ex:
Notable App
Keep at it!
If you would like to take a stab at making the buttons do something let me know and I can update a Js_fiddle or tinkerbin for you to show us the way.
Thanks again!
http://www.eco-cred.com
I like the page but there's still some work to do, I would definitely animate the fish and bubbles with CSS
Check out the bottom of this page http://www.zurb.com/playground/css-boxshadow-experiments
Change the input text from Value="Email..." to Placeholder="Email..."
The input and the button need some styles to match the theme
Since there is a lot of text on the page, check out http://www.google.com/webfonts#ChoosePlace:select
I am using a wufoo form for the email part and I cant seem to figure out how to change the EMAIL part as you suggested. The form styling wont accept the placeholder="email" value so I will have to scratch my head for a while.
I actually hate how much text there is so we are changing it to be more infographic or even a simple 4 step process to explain the idea.
Great advice! Love the idea of the bubbles and really hope I can figure that out!
you can copy these and change them to -ms-transform -moz-transform -o-transform and transform free
It may not need prefixes in some browsers
the -webkit-box-shadow should work as just box-shadow
it's best to try it out on as many browsers as possible
-ms is trident (Internet Explorer)
-webkit is webkit (chrome, safari and android browser)
-o is presto[I think] (Opera)
-moz is mozilla (Firefox)
http://en.wikipedia.org/wiki/List_of_web_browsers#Graphical