Rails - Dec 2006 - Web 2.0 UI design guide/tips - how can I make my site look Web2.0'ish?

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.
- do I need to buy a graphics program (like Photoshop)
- if yes would the GIMP be sufficient
- steps to follow in one of these programs
- is there an on-line site that I could use to create my personal images
instead?

Thanks

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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.


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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

-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Simple you just visit....
http://www.web20generator.com/
and you''re done.

On 12/20/06, askegg <andrew.skegg-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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 Riley
www.sorrylies.com

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

I did come across this link
http://mittermayr.wordpress.com/2006/02/03/20-culture/

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

Lots of gradients, rounded corners, oh and a nice chunky sans-serif font!

Please, just hire a designer..............

:p

On 12/20/06, Greg Hauptmann
<greg.hauptmann.ruby-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
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/

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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..............
> 
> :p
> 
> On 12/20/06, Greg Hauptmann
<greg.hauptmann.ruby-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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/

-- 
Posted via http://www.ruby-forum.com/.

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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".

On 21 dec 2006, at 04.58, subimage interactive wrote:
> Lots of gradients, rounded corners, oh and a nice chunky sans-serif  
> font!
>
> Please, just hire a designer..............
>
> :p
>
> On 12/20/06, Greg Hauptmann
<greg.hauptmann.ruby-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> 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/
>
> >

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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.


--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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
one<http://iris-design.info/photoshop/web-20-style-buttons/>
.

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

> 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!

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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:
- The best sites that have the best look and feel (and thus,  
functionality) are those where designers and programmers are working  
closely together, starting during the "inception phase" of the site.  
This is especially true when doing web applications, where things  
like Ajax-driven page updates need to work seemlessly (vs. pure page- 
based updates)
- One great designer can be better than ten not-so-good ones
- Learn the scoop: be aware of design, and learn how to differentiate  
good from bad

Good luck! :)

Best,
Thomas

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---

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

--~--~---------~--~----~------------~-------~--~----~
 You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---