Hi,
Does anyone have any websites/URLs they could suggest re how to develop
web
pages that have the web 2.0 look & feel? i.e. rounded buttons, colors
etc.
I’m a backend code guy but would like to know the best/easiest way to
web2.0’ize
my site.
e.g.
Thanks
That is a huge question. Really all you need are text filters,
gradients, and rounded rectangles. I use photoshop but it may be
overkill. I just like the blending options for text. “Web 2.0” is more
than just colors though there are a lot of qualitative design theories
involved. A few good sites are:
http://alistapart.com/
http://www.mezzoblue.com/
http://www.csszengarden.com/
or if you just want to steal people’s CSS get the Firebug plugin for
Firefox
Personally, I would hire a design guy to do the work. I am also a
(part time) developer, so I can never get the flare that true designers
seem produce.
Lots of gradients, rounded corners, oh and a nice chunky sans-serif
font!
Please, just hire a designer…
On 12/20/06, Greg H. [email protected] wrote:
I did come across this link
http://mittermayr.wordpress.com/2006/02/03/20-culture/
–
seth at subimage interactive
http://www.subimage.com/sublog/
Simple you just visit…
http://www.web20generator.com/
and you’re done.
On 12/20/06, askegg [email protected] wrote:
Personally, I would hire a design guy to do the work. I am also a
(part time) developer, so I can never get the flare that true designers
seem produce.
–
Ross R.
www.sorrylies.com
I’m amazed that article which is so thoroughly tongue-in-cheek has
missed one of the most noticeable visual features of Web 2.0: the
“Fade from Piss Yellow Highlight”.
when i finished one of my sites in RoR, i found that i was spending
maybe even more time trying to come up with a decent design. so i sent
the porject over to the designers, and after a day they came back with
such a simple yet awesome site design. i decided to make my RoR coding
better while letting the designers do their job.
Subimage Interactive wrote:
Lots of gradients, rounded corners, oh and a nice chunky sans-serif
font!Please, just hire a designer…
On 12/20/06, Greg H. [email protected] wrote:
I did come across this link
http://mittermayr.wordpress.com/2006/02/03/20-culture/–
seth at subimage interactive
http://www.subimage.com/sublog/
I’m going to have to echo everyone’s who’s said hire a designer. A GOOD
designer. BUT if you want to do it yourself, take the time first to
learn about design theory, like grid structures and typography, and
effective use of negative space, and balance and style. Then load
yourself up with a graphics program. I’ve been using Photoshop for ages
& am trying to transition to the GIMP, which seems to be equally
powerfull. For what you’re doing, it’s probably more than sufficient.
You may find a vector tool like Illustrator (or Freescape) more useful
for creating site images, though – I usually use both.
Use 24-bit PNGs. There’s a js plugin called pngfix that’ll let IE use
them, but it still won’t work for background images, so keep that
limitation in mind.
Design for a max-width of 770px to keep everyone happy, make sure your
CSS is standards-compliant, and make use of AJAX (Scriptalicious is
easy to implement).
If you really want to follow “Web 2.0” guidelines, go here:
http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
BUT I think you’re approaching it from the wrong angle. Design should
be about creating a visual feel, not copping a current trend. While the
2.0 style sure can be pretty (gradients and whitespace are great!), I
think you might be better off incorporating some of its elements into
your website where appropriate, rather than trying to include them
solely for the sake of looking 2.0. 2.0 should be about function, not
form, and we all know that form ought to follow function, anyway. Your
site design ought to be based around your goals for the website and its
useability, not recreating a current trend. The 2.0 look has become so
ubiquitous that it’s already becoming cliched – if you spend all your
time trying to look current, you’re going to find you look dated pretty
damned soon.
Just a few thoughts from the design side of the fence.
thanks Sarah - I’ll take up your advice. Any recommendations on a good
book/text covering the design concepts you mentioned? I obviously keen
to
have a crack at this otherwise I wouldn’t have posted, so thanks for
taking
the time with you answer.
BTW - Another good link I found (via digg) was this
onehttp://iris-design.info/photoshop/web-20-style-buttons/
.
thanks Sarah - I’ll take up your advice. Any recommendations on a
good book/text covering the design concepts you mentioned? I
obviously keen to have a crack at this otherwise I wouldn’t have
posted, so thanks for taking the time with you answer.
Start looking at design. Lots of design. It’s everywhere; pay
attention to it – what works, what doesn’t, and why.
Learn basic composition & art principles.
Search for “CRAP” on Google.
For general typographic principles:
“The Elements of Typographic Style” is practically a bible
“Stop Stealing Sheep” is much shorter & a better introduction to the
art of typography.
Typography for the web is a pain in the ass. Stick to the web-safe ones:
http://www.angelfire.com/al4/rcollins/style/fonts.html
Unless you implement sIFR, which is great but sometimes a pain
itself, and can only really be used for headlines.
I prefer to set my main body font-size to xx%, and base all other
font sizes in ems. This creates the most consistent font sizing while
still allowing browsers to increase/decrease font sizes.
http://webtypography.net/ is a great resource.
Design Theory:
I HIGHLY recommend “The Elements of Graphic Design”, which is short &
very readable but presents lots of good principles & applications.
“The Non-Designer’s Design Book” comes highly recommended but I’ve
never read it myself.
The Universal Principles of Design is a fantastic book about the over-
arching principles of design as applied to all kinds of different
disciplines, but is probably something you only want to get into if
the design bug bites hard.
http://www.usask.ca/education/coursework/skaalid/theory/cgdt/
designtheory.htm gives a general overview of design principles.
http://poynteronline.org/column.asp?id=47&aid=37529 talks about grid
structures. Also try “Making and Breaking the Grid”.
Search for the Golden Spiral and the Golden Rectangle.
For more web-specific stuff:
http://www.webdesignfromscratch.com/ is a great site about making
websites.
http://developer.apple.com/internet/webcontent/bestwebdev.html
describes best practises for website design.
Run your designs through the W3’s standards-compliance tools, and
test cross-browser/cross-platform. A few tools to test browser
compatibility, if you don’t have the resources:
http://ipinfo.info/netrenderer/
http://v03.browsershots.org/
http://www.browsercam.com/
http://www.designmeltdown.com is a great discussion of design trends
& a good source of inspiration.
http://platea.pntic.mec.es/~jmas/manual/english/sitemap.html is a
pretty comprehensive design manual, though not all that accessible.
http://www.alvit.de/handbook/ is a whole mess of links to other
resources.
BTW - Another good link I found (via digg) was this one.
There’s a million tutorials out there like this, about how to make
Aqua-style buttons, Web 2.0 buttons, reflections, gradients, etc.
Basically it’s all just making use of PS’s Layer Styles (in the layer
pallet, click the button at the bottom that looks like the Flash
logo, and play especially with the “Bevel and Emboss” and “Gradient
Overlay” and the various inner/outer glow option). Your best bet is
to just go in & play around with layer styles, experimenting until
you get a feel you like – you can get a lot of interesting effects
this way, and it’s an easy way of adding depth to otherwise flat
graphics. To reuse an effect, simply right-click on the layer with
the styles attached, choose “Copy Layer Style” from the drop-down,
then r-click on a different layer & select “Paste Layer Style”. You
can also save layer styles as sets but I can’t remember off the top
of my head how to do this.
Good luck, and if I can help out, do let me know!
Heya,
Also keep in mind that good design is an interative process, exactly
like good programming. The rinse and repeat formula is applicable,
too. IMHO, design and programming are also not to be strictly
seperate, as they can greatly influence each other.
Some pointers:
Good luck! 
Best,
Thomas
thanks Sarah/Thomas
Hey, one question comes to mind. By spicing up the UI using images for
buttons (with web 2.0 effects etc) this would imply the need for
multiple
buttons images to be created for each language, and also the ability to
change text via the properties files would be lessened.
Are there any tricks re maintaining the flexibility of displaying text
from
this respect, but with the look and feel of web 2.0 type images?
Perhaps by
slicing up a web 2.0 type of button style into top/button & corners so
that
it is possible to create what looks like a web 2.0 button using DIV
techniques (like when one creates a rounded square to keep a variable
length
amount of text in), and then having the text appear within this?
Any suggestions/ideas re this?
Cheers
Greg
This forum is not affiliated to the Ruby language, Ruby on Rails framework, nor any Ruby applications discussed here.
Sponsor our Newsletter | Privacy Policy | Terms of Service | Remote Ruby Jobs