my dog learned polymorphism*
The moose likes General Computing and the fly likes Webpages/UI design improvements for website Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » General Computing
Bookmark "Webpages/UI design improvements for website" Watch "Webpages/UI design improvements for website" New topic
Author

Webpages/UI design improvements for website

Santosh Ganapa
Greenhorn

Joined: Mar 27, 2011
Posts: 29

Hi All,

I am working on different domain in an IT industry.During my spare time, I used to work on developing an application (Personal professional website) using Java technologies.
Like first aI developed the application using struts framework.Now I am upgrading the application using JSF and IceFaces.

A problem that I am facing everytime here is that I am pretty much poor in designing the webpages though I am well aware about HTML,CSS,JavaScript.

I feel that I cant put/organise the contents on page properly because of which I get very frustrsted. For example, a form even with strong business logic is not getting much points if its UI is not up to the mark.

Please guide on this so I can design the webpages more effectively that looks attractive!
Ulf Dittmer
Marshal

Joined: Mar 22, 2005
Posts: 41621
    
  55
So you would like to improve your web design skills? Have you worked through any books on that topic? I don't think it's something that can be addressed through forum discussions, since are a number of things you'd need to get an understanding of.


Ping & DNS - my free Android networking tools app
Santosh Ganapa
Greenhorn

Joined: Mar 27, 2011
Posts: 29


Yes I do need to learn web designing skills but it would be appreciated if anyone can suggest the best sources/books for learning and practicing these things.
Karthik Shiraly
Ranch Hand

Joined: Apr 04, 2009
Posts: 497
    
    5
The following have helped me:

- "Principles of Beautiful Web Design" by Jason Beaird .
This book explains the principles of good visual design in simple terms.
The biggest mental block I had to overcome was that although what looks good can be subjective, there are many principles underlying good visual design;
and it is possible to substantially improve design by mechanically following these principles.
This books helps you do that. I don't know if it's the one recommended by professional designers, but I definitely recommend it.

- Follow those principles and prepare web page mockups using drawing tools like Pencil and Gimp
(or commercial ones like Photoshop).
Takes lots of practice.
Make sure to get some feedback on your mockups, preferably from family/friends, or from online forums.

- *Highly recommended* : If feasible, sit with a colleague or friend who is a professional designer and watch them while they work.
Even better if they are good at verbally communicating the little details about *why* they are designing something one way or another.
It's one thing to just read a book and try to practise, but it's much more effective when you see it being practised by a professional.
This is the one that helped me the most.

- Study and critique other websites keeping these principles in mind.

- A whole another layer of challenges gets added when it comes to converting mockups to HTML/CSS.
What looks nice in the mockups may not be so easy to actually implement.
So practise building websites using just plain HTML and CSS - no struts, no tomcat, no javascript, none of that -.until you're familiar
with all the gotchas of HTML and (especially) CSS.

Take some websites you personally like and look well designed, and practise by replicating their design.

Tools: Dreamweaver is good, but I personally prefer plain text editors. I also liked Google Web designer and Brackets
but not used them much since I'm working mostly on desktop & mobile apps nowadays.

- Build prototypes websites for your own ideas too, concentrating on visual design.
Don't bother about functionality, since the focus of these prototypes is the design.
Improve incrementally and iteratively, with feedback.
Preferably from family/friends who are not very tech savvy, because they are the
ones who prefer simplicity and give you brutal feedback, forcing you to cut all the bullshit out, and improve your site design and navigation.
If it looks good to them, it'll likely look good to the rest of the world too!

- Web design trends keep changing. Keep yourself updated from online design resources.
I follow Smashing magazine and A List apart.

 
jQuery in Action, 2nd edition
 
subject: Webpages/UI design improvements for website