As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am learning HTML and I have a good book to learn with but my cousin told me that I should pick a fun project to learn how to program but im not sure what I should do.
what is the most fun project to do when you are learning HTML?
Do a website about something you like or know good. Like, if you are a music fan, do a site about your fave band or some musical instrument. There's no single "fun project".
Making your own CSS Zen Garden is a fun place to start.
It will teach you the basics of HTML and the all-important CSS.
“Most fun” is hard to say, but a few things which you might find interesting:
A homepage for yourself
A Twitter aggregator
A simple wiki (if you want to learn server-side programming at the same time)
A recipe list
A photo album
... and so on ...
And, as others have suggested, it would be a good idea to try and pick up some JavaScript and CSS at the same time… But, if you truly are new to programming, that will get overwhelming very quickly. So it might be a good idea to stick to one thing — say, learning HTML — before you try to learn CSS or JavaScript.
The most obvious one is make your own website and/or blog. I enjoyed it when I knew nothing but HTML. Granted, I'd learn some CSS, Javascript, and some Server Side language(such as PHP) as well because HTML on it's own is quite tedious.
"Be a Good Jedi: Build Your Own Blog"
Quoted from Rob Conery's blog: http://blog.wekeroad.com/blog/be-a-good-jedi-build-your-own-blog/
1) It’s the perfect app for a geek who
wants a blog to build – they’re the
perfect domain experts
2) It’s easy
(for the most part) but gets harder
and harder the farther in your dive
3) It’s ubiquitous. What a perfect
interview topic: “I’d love to see how
you handled asynchronous pings to
Technorati and – oh – do you have a
POP feature? Also – did you use
MetaWeblog or Wordpress?”
4) It’s
your calling card. If your blog rocks
– likely you do too. If it sucks and
it’s slow – well…
5) It’s a great
way to learn a language. Want to try
out ASP.NET MVC? Compare the LOC and
features to your Webforms blog – then
try Rails…
6) Luke did it – and
that’s good enough for me
If you're only learning HTML (as opposed to JavaScript, PHP, etc):
Pick a topic you're passionate about (your favorite game, movie, book, programming language, hobby, etc)
Make a useful website about it that will benefit users
My mum started with a family website and created slideshows. You can gradually move on to your hobbies and share those.
Some fun projects could be:
Make a website about something you like or do.
Help out a friend and make a website about something he/she likes or does...
Help out an small organisation / shop in you neighbourhood (for example a restaurant, a shop, a cafe, a radio station ...) by making their website. Maybe you could get some free beer or food in return :-)
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm a developer, and I find that I have a hard time dealing with graphic and visual design. It's as though the part of my brain devoted to abstract reasoning swallowed up the visual part.
There are a pile of awesome introductions to various programming languages that assume a certain level of sophistication with programming. Are there any such tutorials for HTML and CSS? As in tutorials that approach HTML and CSS in a similar way?
Failing that, what good web design tutorials might you guys recommend?
HTML and CSS are just means to an end. 20 years from now we may have something different, but design fundamentals stay the same. From your question, I think you want to develop a sense of what is visually pleasing and usable and have the understanding to implement such designs.
Along those lines, look at magazine layouts; look at professional advertising; look at logo design and try to pick out the things which make them distinctive. Look at websites which are popular, easy to browse, easy to read.
Take the things you see and like and try to incorporate a little of that into each design you build. Some of the tools (like Photoshop) can be daunting at first, so don't try to conquer the world. Just make each design better than the last.
Here's a real, doable example that starts with only minimal knowledge:
Read some tabular data from a database; as a programmer, I'm sure you know how to do that.
Read a tutorial anywhere on HTML tables. Their structure involves only 3 major tags and a handful of supporting ones. [See footnote #1]
Put the data in the table with no styling. Looks terrible, right? Now identify why it looks terrible. What is not pleasing to the eye? Compare it to a clean layout on another site that you like.
Examine small details like padding and margins and learn the basic CSS rules to implement those things. In doing so, you will begin to develop a sense of fundamental usability and aesthetic guidelines (such as the importance of well-placed whitespace).
Now take one of those "daunting" tools like Photoshop and accomplish a really simple task. Maybe it will be something as simple as cropping an icon or creating a simple gradient for your table heading. Pick a task, and find a tutorial if you need to.
This all sounds extremely simple, but you would be surprised how many developers never bother to even try.
Another Example
Fonts make a huge difference in the aesthetics and usability of a visual design. Start by perusing a few major sites and looking at commonly used fonts. Do a little reading on what fonts are commonly used in print, and why.
Now take a technical approach. What fonts can we safely use on the web? What tools are available to us as developers to embed custom fonts?
Armed with this knowledge, create a plain page and try styling a small news article (cut and paste the raw text from somewhere; it doesn't matter).
Choosing a good font will improve the design. But what about headings? Special styles like drop-caps? It's all there in HTML and CSS; start reading best practices on semantically structuring documents and how to implement different styles.
At the end of this exercise, will you be an expert? Of course not. But you will have discovered a whole set of new technical avenues that you should pursue further like semantic structures, the HTML document model, and CSS text-styling directives.
You may even come across multi-device/accessibility topics, such as how to accommodate screen readers.
As a designer, you will begin to understand the level of effort which goes into something as "simple" as styling text and you will start to develop that intangible sense of what "feels" right. The better you get, the more your audience will share that feeling.
My Opinion
It's a common misconception that developers can't/shouldn't be visual designers. I disagree; engineers should understand end user experience, heuristics, and aesthetics. Not everyone can be a great visual designer, but I have taught many people the basics and their designs are always a cut above the rest (even if they aren't perfect). I have also built my career upon being comfortable with the most technical and the most user-facing aspects and frankly, it's a lot of fun. Nothing is off-limits.
Links
A List Apart - Code Articles - Great articles on specific technologies, but make sure to not miss out on other general design articles.
Color Theory
Color Palettes
Printed Text Guidelines - Extremely applicable for certain types of websites.
CSS Basics - straight from the W3.
[Footnote #1] - to any HTML/CSS developers: I am not suggesting that the OP build table-based layouts; just suggesting that they take a familiar data structure and get a sense for the tasks involved in styling it.
Graphic design and HTML/CSS are almost completely different domains. What is it that you're looking to get better at? Graphic design using programs such as Photoshop or Gimp? Are you looking to get a better technical understanding of how CSS and HTML work? Or are you looking to understand good UX (User eXperience) design and how to incorporate that into HTML/CSS layouts?
I think you need a better understanding of what it is that you're looking for first. Maybe take a look at W3C specs as a starting point. Having a technical background, reading these specs should be relatively trivial (for the most part) and will help you understand what it is that you want to understand.
I think the best way to become a good web designer and developer at the same time is to learn web development tutorials at thenewboston.com, they make learning easy and fun at the same time.
After learning CSS, HTML, Javascript, etc, you can download source code of various website templates and learn how from them.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 12 years ago.
We develop for web.
For some reason our design team hates [the look of] indented unordered and ordered lists. This is the default treatment for these lists, and I think it's for good reason. These types of lists are generally important, and indenting them draws attention to them, and makes them easier to read.
Every web app we build that has content management is sure to use lists, and I always get demands to remove the indenting on these lists. I try to ignore these requests as long as possible, but eventually design wins the battle.
The design team also hates when vertical navigation in a tree structure has sub-levels that are indented. They prefer to use colour, font size, font weight or other treatments to indicate different levels in the tree. But again, indenting has to be removed.
These examples both seem to be absolutely terrible ideas in my opinion - but that's the problem - it's just my opinion. Without doing a full usability test (which most of our projects cannot afford), how can I determine what is the best usage? Since it's coming from design it seems that they carry more weight for usability because it's usally 'visual', not the developer implementing the designs.
I guess the questions here are:
Am I off base in thinking these are bad ideas? Can someone point me towards a study on this so I'm not relying on opinion? It's a little tough to search for this on the web. I tried Jakob Nielsen with no luck.
In the absense of a usability expert on your team, and in the absense of usability testing, how can a developer push back against design treatments that seem to represent poor usability?
Personally I agree that indentation should be used in lists and menus. However, I don't think you're doing yourself any favors by arguing repeatedly. Someone has authority in your company and I wouldn't recommend arguing about the same thing once a decision is made. If the designers have authority over whether or not to indent, and they say not to indent, then suck it up and stop arguing.
and find something else to fight over that they haven't already dictated a standard for. :-)
Keep in mind that developers are hired for their expertise in programming while designers are hired for their expertise in making things look really really good.
The two skills are fundamentally different. I'm sure there are decisions you make in the actual programming that the designers have absolutely no expertise in. People do better at what they specialize in.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
It's well-known among teachers that some people can program and some can't. They just don't have mindset for that. In a nut-shell, I want to ask if the same is true about web-design.
I have a friend who is a good designer in general and can produce reasonably good-looking sites with WYSIWYG editor like Dreamweaver. But, since we're starting a common project, I'd like someone who can 'get hands dirty': work with html and css code directly. For many reasons, I'm sure you understand.
Now I'm thinking to incite him to learn, but not sure what're the chances of success.
So, do you also need some 'programming abilities' to profess css and html, or it's just a matter of training for regular designer?
I would especially like to hear particular experience from web designers.
PS I intentionally leave out JavaScript, let's keep it simple
The best web designers I have worked with know a small amount of html but don't use it when they are designing the sites. They do their work in PhotoShop (a minority will use GIMP). The reality is that I would rather they concentrate on laying out eye catching websites instead of trying to code it and lay the site out on the fly.
A web designer is absolutely not the same person as a front end web developer. That person has a skillset aimed towards converting the designers work into a set of working html/css templates.
Let me be clear that I am not saying that there is no cross-over between the two skillsets, but rather that very few people will be excellent at both design and development. If you are willing to settle for less than stellar results, at least be sure you go into the project with your eyes open.
Not at all. HTML is not a programming language, it's a markup language.
It shouldn't take you long to figure it out; I did it when I was 12. I personally think you need to be a better, how do I put it... artist to design websites than a programmer.
Of course websites nowadays are a lot more interactive, and for that you'll need some sort of server scripting (PHP, ASP, etc) and Javascript - and these are real programming languages.
A web designer who can't hand code HTML/CSS is not a web designer. The lack of such skills shows more of an aptitude problem(wanting to improve one's self). the graphic designer + front end developer combo doesn't always work well, because chances are the developer doesn't have the eye for the details in the design, such as margin, line-height, text kerning etc etc. Also it's hard to convert the interactive elements as well.
edit: this topic has been debated within the web design community on and off for a while now. You may find some interesting links in the blog post I wrote regarding this issue.
you are much better to know how to code a website HTML / CSS / Javascript before you go saying your amazing with a WYSIWYG editor. Sure you can use software to create a nice looking site but when it comes down to it how do you solve cross browser issues? How do you add dynamic content (even without server side) a WYSIWYG editor is just like designing a website in powerpoint or word but a lot more smarts. Though without the backing knowledge you are not going to go far.
As for learning plain HTML / CSS is fairly simple its an easy markup to get the understanding of. But then with that comes more, learning how to SEO plain HTML for example. There is always more to a site than HTML / CSS for it to be successfull.
This seems like a life question; I suspect it is true about almost anything. I think it can be hard to guage someone's aptitude for programming without seeing them actually try to program for awhile, however. Many people need to struggle with it for awhile before an "AHA!" moment is reached.
Nevertheless, I don't think design skills and abaility to work with CSS and HTML necessarily correlate to an aptitude for programming, per se. Of course, the two are not mutually exclusive,
It is not important for the designer to be able to program/markup/code in HTML or CSS. However, it is important for the designer to be aware of the current constraints imposed by HTML/CSS. With things becoming more dynamic, it is also important for the designer to understand how things are going to interact with each other. For example, you cannot become a real architect, without being aware of the constraints imposed by civil engineering.
But that's it. It is not important for a good designer to even know Dreamweaver or Photoshop or some other software :)
I am a university teacher, and I have also written both computer programs and HTML. Although I teach math, I understand the point about teaching computer programming. Although it might seem like there is no gray area between being able to program and not, I would say that writing in a markup language is one. You shouldn't divide the world into "cans" and "can'ts" with a question like this.
If he's a generally bright guy, yes you should encourage him to learn HTML and CSS. I wouldn't propagandize it as the thing that real men do or the greatest thing since sliced bread. Rather my argument would be to have a more complete perspective of what, after all, he's already been doing. Just as a racecar driver shouldn't necessarily need to pick up a wrench, but knowing what to do with one is useful for a deeper understanding. If you offer your friend a positive sell, the worst that can happen is that he'll say no and not take your advice. And who knows, he might even like it.
A lot of people either can't program or just wouldn't enjoy it, but don't mind writing in markup all that much. Most research mathematicians these days write their papers directly in a markup language, TeX/LaTeX, that in some ways looks a lot like HTML. Some mathematicians also like to write computer programs, but most of them don't. If they did like it, there is a good chance that they would have ended up in Silicon Valley. In fact in my profession, the whole question of can or can't write markup, or can or can't write programs, is stale. We're long used to a continuous range of abilities.
In my opinion, you can't have enough knowledge about this sort of stuff when doing any type of computer design or software implementation.
The more you know about the underlying technology, the better you will be at working with the high-level frameworks and constraints you live in.
Even if you work only in Photoshop in order to design a website, having the knowledge about what works and what will be more difficult in HTML/CSS/Whatever will give you an edge when designing that website over someone who doesn't know those details.
Of course, with knowledge comes constraints, which might be bad in and of themselves. Some of the best new technologies out there was built by people who didn't know that almost everyone else thought that what they tried to do was impossible.
But I still hold that more knowledge = Good Thing™
Web site creation especially a commercial website involves a LOT of different skill sets.
Back-end requires:
System Administration, Database Administration,
Web Applications development (anytime a website becomes interactive) requires server side programming skills and knowing various tools like (PHP, Java, ASP, Perl, C, C#, pick-flavour-of-the-month-server-side-language) and client side programming requires knowledge of browser behaviours mark-up languages and browser-side layout systems (HTML, javascript, CSS...)
Web Design requires artistic visual skills and related tools (Graphics programs)
Web Content requires language skills (Knowing how to proof read, translate, etc.).
Site Optimization requires knowledge of how to make sites appeal to various readers and audiences (both human and robotic)
A professional website involves several folks working in-tandem to bring all of the above together in various quantities.
If you are going to pursue something as a career, you need to know a bit about all aspects of that space and then follow in on what really excites you. So if someone is good at creating visually appealing content they should simply plan the content, and collaborate with someone to "program" their vision into the site.
Learning tools, and knowing about various components, is good as it tells you the boundaries and the playing field scope, but you don't need to know all of it to achieve professional competence in one specialization.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Most of the time I worked as an application developer at backend side. I worked on enterprise web projects but never touched on user interface, design issues.
Good looking web sites and user interfaces always impress me.
And nowadays I am trying to develop public web site I know CSS, HTML but stuck with web design / user interface issues. I don't want to use a template or steal someone's web design.
How can a developer / programmer learn to design good web sites / user interfaces, What tools should I use and learn? or is desinging good web user interfaces a god's gift?
Looks like you hit on a hot topic. As a web/graphic designer myself, I think the best way to improve your ability in that regard is to look at a lot of good designs; meaning, actively seek them out.
As pixeline says, there's not a lot of objective knowledge to be learned (though there is some). It's more about improving your aesthetic eye. If you look at high quality designs all the time, then your tastes will become more refined and your web designs will naturally conform to your acclimated aesthetics.
For instance, I work at an indie metal label, so from time to time I'm called upon to work on band sites, album designs, magazine ads, sticker/clothing/merch designs, etc. So I'm always flipping through metal magazines and looking at ads designed by other people, or admiring the merch designs of other bands, or checking out the sites of other labels.
This not only serves as a source of inspiration when I'm stuck, helps me to gauge my own abilities and find areas for improvement, but it also helps me track the ever-changing trends and fashions in my particular sphere of design. As we all know, fashion is fickle, and people's tastes are always changing. A good designer knows how to stay just ahead of the curve all the time. This means that your designs don't deviate too drastically from accepted aesthetics (otherwise your designs will be rejected by audiences), but you also don't want to employ design elements that are overused and played out.
If you can ride the knife's edge and innovate enough to stand out, but not so much that the audience is unable to accept it, then you will have mastered the art of web design. A good designer can identify emerging trends and capitalize on them, while making it their own by adding their own twist to it.
If you're just starting to venture into web/graphic design, don't be afraid to emulate others and steal good ideas. Don't plagiarize, and give credit where credit is due, but just as making copies of famous drawings/paintings is an essential training technique in figure drawing & painting, so too is emulating quality designs an effective tool in learning graphic design.
Sites like Best Web Gallery and Screenalicious are excellent places to immerse oneself in quality designs and layouts. I would highly recommend scanning through these sites in your free time to flood your mind with examples of good aesthetics.
EDIT: I also want to emphasize that talent is not as much of a factor as most people would think. More often, interest is what people confuse as "talent." If you truly have an interest in something, you will be motivated to immerse yourself in it and practice it. This in turn leads to better ability, and if started at a young age builds confidence, which leads to an ability gap, which leads to more confidence and more interest, which in turn leads to more practice...
I consider myself a decent graphic designer (you can check out my portfolio via my profile link) and an alright artist. And people often comment on how talented I am, but they don't realize that I have literally spent thousands of hours honing my craft. While other kids were out playing with their friends, I was in my room drawing. That's the only reason I excelled in drawing. And when I first started building websites, they looked just as hideous as most teenagers' Myspace pages. So don't get discouraged when you see the work of "talented" designers. They all started from humble beginnings as well.
Please read Don't make me think
There is not much to be learned as "objective" content, except for : use a grid !
http://dev.opera.com/articles/view/grid-design-basics-grids-for-web-page-l/
See the human eye recognize as "beauty" things like balance, symmetry, contrast, color tones. Work on these fundamentals, and then... practice, experiments, iterate.
Seth Godin recently posted a page of resoures for people who want to improve their design skills.
The Smashing Magazine website also has a lot of relevant articles.
The best way to learn is to start doing and soliciting feedback. The key is making sure that your site is as simple, intuitive and easy to use, yet providing a very rich content and feature set.
This post makes a very powerful demonstration of what good UI design means. http://stuffthathappens.com/blog/2008/03/05/simplicity/
A List Apart is a great web-based magazine on design and development of web content. It publishes twice a month, usually with two new articles, and is a magazine type format; it's a good complement to some of the books that others here have mentioned.
You can learn principles of good web design, you can know all the tools, but really it's like graphics design, you need some talent. Unless you have it, you'll end up with very correct, but dull design.
these sites offer good content :
http://css-tricks.com/
http://net.tutsplus.com/
http://blog.themeforest.net/
See Why is good UI design so hard for some Developers?
It's got tons of great info about this
I found this site a while back and bookmarked it in hopes that my wife might be interested in web design some day...
66 Links To Learn The Webdesign Basics
http://www.divitodesign.com/2008/08/66-links-to-learn-the-webdesign-basics/
Its broken down into these categories:
General
Programs
HTML
CSS
Design
Site Structure
Tutorial Sites
Colors
Resources
Stock Images
Search Engines
Inspiration
Fonts / Typography
Usability and Accessibility
Blogging
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
As one of those people that never got around to properly learning design (or having no talent for it), the design seems to be the step always holding me back. It's not a problem for rich-clients, as the standard GUI toolkits provide some acceptable ways to design a good-looking interface, but the web is another story.
Question: Does anyone know of a high-quality framework for designing the interface of web applications? I'm thinking of standard snippets of html for an adequate set of controls (the standard html controls plus maybe navigations, lists, forms) and style sheets to give it an acceptable, modern look. If such a thing existed, it could even support themes in the way wordpress, drupal etc. allow it.
I know of the yahoo yui, but that's mostly javascript, though their grid css is a step in the right direction.
Try the samples on ExtJs.
I find them immensely useful in working out the UI. (trees, panels, modals, etc etc)
I realise this is an old thread but it still comes high up in Google searches so it's worth mentioning that Twitter have recently put out Twitter Bootstrap, a "toolkit for kickstarting CSS for websites, apps, and more" which looks fantastic! » https://github.com/twitter/bootstrap
I'm not sure that what you're looking for exists in the way you're looking for it. However, I've had some luck with places like Open Source Web Design and Open Designs, which have some really slick templates that can be adapted to a web application so they at least don't look like crap.
There are also some commercial offerings, such as Gooey Templates.
Once you're getting closer to launch, you can contact a pro to fix the details for you, or simply build on what you've got.
Edited to add: You might also want to consider learning Blueprint CSS. I've found it helps guide my layouts and helps them look "right", without constraining me to the layout constructed for another purpose.
I'll suggest Google Web Toolkit if you're a Java developer. Examples
I'll also second the suggestion for Ext JS. It's got a vast array of really slick looking UI elements, incredibly well documented code, and a strong community.
You'd probably also find the myriad of Wordpress templates reasonably useful to build on, as Wordpress is at least reasonable at separating content from layout. The also tend to have a modern bloggy feel. Of course teaming up with a talented designer is the ideal way to go in my experience! :)
This will be more than a framework OP originally wanted but I'll suggest having a look at Morfik.
You'll be able to build pretty slick user interfaces with the conventional drag&drop way and with theming support (The homepage itself is built in Morfik). There're numerous other advantages Morfik provides, though let me not drift to off-topic for the subject. You may download the trial and see...
ps. Disclaimer: I'd worked for them.
you can check out this young site, http://guitemplates.com/. The templates are quite clear and modern, and at 20 bucks each they won't break your budget.
We had the same problem so we made our own. CSS UI (http://css-ui.com/), open-source UI framework. The concept is to use pre-defined CSS classes to style any element.
Check out http://jacanasoftware.com. Their templates feature multi level tabs, clean css, it validates, and the CSS won't mess with your controls. I highly recommend them.