Hi,
I wanted to design a website where I need to develop menus, login screens, Center Header Frame, and some frames such as which are used in the website "http://www.lynda.com/"
Kindly share some experiences of yours as to how can I design such a web user-interfaces. I am a programmer which have experience in Java+C+Database etc. So, kindly share some good tutorials as well to support your answers.
Thanks a lot.
Regards,
That's a fairly loaded question but you should start by doing some basic tutorials on web design (HTML, CSS) and once you are comfortable with those, you can learn a server-side programming language such as PHP or .NET. From there you can either write your own website or use a Content Management System such as Joomla or Droopal.
What I described is how to become a web developer. If you are entirely inexperienced in web development I would consider hiring someone until you are comfortable with it.
Please note that I am encouraging you to explore new types of development but you should be aware that developing a website can be a time-consuming and complicated process.
Draw the interface on paper. Use wireframes. Draw each screen. Get as many people to comment on them as you can, then build a HTML prototype. Ask the users to complete the task the website is designed for. Get feedback.
To design the sitemap and the groupings of pages, use something like excel and group them by similar page titles.
Best UI site Ive found is.
There are two aspects to this: The HTML and the code that emits HTML.
As a Java developer you can comparatively easily use JSPs and JSF in environments such as Tomcat and WebSphere Community Edition. Development in Eclipse tends to be quite easy. See tutorials such as this and this, the latter link has various samples which may also be useful.
The Sun JSF tutorial may also be helpful.
The idea of JSP/JSF is that you edit what looks more or less like standard HTML in an editor that udsrstands HTML (eg. Eclipse) so when you are thinking about the visual aspects of the app you can think in HTML. The java bits fill in the variable parts of your pages and you drop to java for that. JSF gives a nice way of "backing" your HTML with Java code.
Using the above you can get to a stange where you have some HTML pages, and if thay look anything like mine they have all the aesthetic qualities of someone with Van Gough's ear for music.
They you need a different kind of study ... web site deisgn, or involve a true expert in the field.
You can learn html from the tutorial here but the tricks used by professional designers to make things look good are very extensive - a lot of learning to do. I would want to get experienced help for that.
Well, in my idea, to design an user interface is much more than programming with joomla or asp.net.
First of all, learn colors, a software like photoshop, html and css.
Did he mean that design?
Before you start looking at web design it's important to understand the common conventions used in design and have a comprehension of what leads to good usability.
To learn about web usability and best practices I'd recommend:
Designing Interfaces by Jenifer Tidwell is an excellent resource for understanding common user interface patterns.
If you're learning, now is not the time to start experimenting with new concepts. Learn the common ways of doing things and the reasons that they are used/popular.
How about using Silverlight/WPF, both are XML (XAML) based, and support 2D and 3D graphics, animations, flows/processes (in Blend 3.0 and above).
Since you are experienced in Java, learning C# should be easy for you and XAML using many of the principles originated from HTML.
Sliverlight/WPF also supports easy separation of the visual design from the logic.
There are a lot of things to think about when designing a site.
For me these are the big 3 (most important to least important):
1) Usability
I'd suggest learning as much as possible about usability practices first. The old rule of thumb is that the most common usability patterns will be easiest for your users to follow. In other words, since most users have used sites like Amazon, Google, etc, you can copy some of their best ideas and implement them in your own site. Things like the placement of the login button is important. Traditionally, it's most common to see a login button or link at the upper-right corner of the page.
2) SEO (search engine optimization)
Before I knew anything about SEO, I thought it must be simple. In fact it is more complicated than I ever expected. But there are some simple rules to follow that'll help your cause. Things like using text links more than graphic links, unique titles for every page, and maintaining a high textual content to HTML ratio is all important.
3) Aesthetics
When you have some vision in your head of what you're building you may want to mock it up in Balsamiq Mockups first. After you get the basic idea down, then recreate it in something like Adobe Photoshop to get the final look and feel finished. And as a last step then cut up your design and create your HTML and CSS with usability and SEO in mind.
The idea with this multi-step process is to conceptualize with tools that are easy to play with first before you get into writing code. Because once it's in code everything becomes more difficult to move around.
As a last point, I've seen time and time again business owners let their personal preferences get in the way. They had their priorities backwards with these big 3 items, often putting aesthetics first. In the end they had a creative-looking site that nobody could find on the internet due to poor SEO, and the few users who did reach the site would be confused about how to use it.
Djna mentionedL "You can learn html from the tutorial here but the tricks used by professional designers to make things look good are very extensive"
This is an excellent point, it is worth adding to it that the type of thinking a graphic/digital media designer uses and a programmer uses is extremely different, its rare that you find someone good at both. If you want reasonable design and great code (assuming here you are pretty good at the code part) dive in and immerse yourself the subject is vast, fun, interesting, learn the tools (HTML, CSS), learn the theory (color theory, grid theory, typography, visual hierarchy), spend time looking at good design and analysing it, you'll learn something from everything you look at (good or bad) if you look at it properly (that includes stuff like books, magazines, papers, cd covers, as well as web pages, dvd menus, looking at how software UI designers have facilitated complex interactions in clever ways... look at everything you interact with and think about it). Its partly about learning stuff, its mostly about developing an eye and a mindset, in much the same way as becoming a good programmer involves allot more than learning syntax. Some highly regarded theory related articles : http://www.designcouncil.org.uk/
If you want really great design and really great code your normally looking at two people, often with conflicting views on virtually everything.
Hope this helps in some way.