Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
My question is rather simple, but affect serious issue.
When I'm developing websites / widgets and other web applications may I use similar approach in design cases like other pages have? It's just my inspiration.
For example. I'm not copying piece of codes, graphics, but using some very useful strategies and concepts, but
find very comfortable Google new navigation (top, dark bar)
icon navigation and positioning like in Google+ or Google Maps is nice in my opinion
apple.com boxes with rounded corners and delicate shadow is just perfect
etc. etc.
So... what if I create administration panel for example finding inspirations in that pages? Similiar but in different dimmensions and colors , using different buttons layout, using my own code and graphics (or with royalty-free licence on icons, btw. similiar to iPhone icons ;) )
What about copyrights and intellectual property?
I AM NOT A LAWYER AND THIS IS NOT LEGAL ADVICE!
You cannot copyright things that are considered useful or practical, Like rounded corners and shadows. Yet in Intellectual property there are "Trade Dress" which means: The total image and overall appearance of a product or service; protected under common law principles to trademark law.
But as mentioned above this can be a very fine line and ultimately it is up to the judge/jury to decide did you infringe.
If you cannot afford a lawyer I would recommend doing alot of reading and studying. A book that hes helped me out a alot is: Intellectual Property: Patents, Trademarks, and Copyrights by Richard Stim. Published by West Legal Studies. That book gives you a good base and is used in Law Schools and you can understand it.
Getting ideas
Collecting ideas from other sites is normal and probably the right thing you can do! Like checking out features and way of others do things. That's called research -- taking bad and good from other sites and making yours better.
Using similar elements
Its pretty impossible to get sued, because you used similar toolbar on your site, as google has. Of course being a copycat is not a nice thing to do. Unless you are getting only the idea and of course create the full toolbar from ground up.
As example: I really liked the orange toolbar in new google analytics. So I used it in a UI for a big system. I only used the tab and icon look. Also made it in blue not orange.. That's taking some good idea and making it fit for your current project.
What you shouldn't do
You must remember, that all logos and images are copyrighted (unless stated otherwise; also, some sites copyright their own logos and layout graphics, but offer the content as free to use.)
Making a parody-site
Technically you can go as far as copying a full site. However, this is on the very critical verge, where you could get sued. However:
If you don't use any of the logos or trademarked elements
You make all graphics and photos yourself (dress all your models the same)
Create all code from ground up (copyrighting html and css might be possible, but if you change it a little, or better yet make it your own.. its not the same)
Maybe even put the sidebar or menus on the opposite side or something
If you follow these points, you should be safe from getting sued, however copying somebody's site is not a nice thing to do. Unless, you want to play a prank on your friend or creating a fansite of a site of some kind.
Disclaimer: I'm not a lawyer, but I also have never been sued! These are general facts, on how you get things done on the web. 85% of worlds ideas are already being done, but who said you cant make the same ideas better?!
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My wife's birthday is coming up and I would like to create a website similar to
Ba Ba Dum: https://babadum.com/
I have learned HTML5 in school but never learned about its ability to create animated websites.
How do I go about making a website like that? Do I have to use Flash or is it fully rendered with HTML5? Looking at the source code revealed something about google api and ajax and jquery, are they essential to making an animated website like this?
Thanks!
Although your question is way, way too broad, I'll try to help.
The site you linked -as far as I can tell- is made HTML, CSS and JavaScript. There are less and less sites that use Flash, and you shouldn't use that either - it's starting to die out, at last.
Be prepared to research a lot - you'll have to learn about CSS3 (style, position and animations), JavaScript ("JS", it's very useful for sites filled with interactive elements - sounds, videos, etc) and jQuery (special JS library, it contains several dozens of pre-written functions that can make web development easier and faster). If I were you, I'd visit Codecademy, it's a website that teaches these languages, and for free. Completing those courses shouldn't take more than 20-30 hours, and it would give you a solid base to start from.
Of course, the required skill level depends on the type of site you want to build. A simple, animated website can be built with only HTML and CSS3. For more complex sites you most likely have to use JS and jQuery.
Here is what should you do:
Start out with a fix idea: you want to know what you want to create, especially because (probably) this will be your first serious project. Doodle on paper, write down your ideas about what should happen if you press a button, for example.
Divide the site into smaller pieces: you won't finish it one day, so you should focus on building the site step by step. Create a button, use CSS to make it fancy then give it some animation. If you are satisfied, you can move on to the next part.
Research: most likely you won't be the first person to do the things you want to do the way you want to do. Use google and you'll find hundreds of different tutorials, starting from simple things (building a layout) to more complex one (pure CSS animations, canvas, etc). If you stuck, Stackoverflow will help, but you'll have to be more specific with your questions. This current question is bad, and I'm only writing this response because I too know about needing help and realizing no one will help me just because my question is too broad. And I don't have anything better to do at 23:40 :) Try to find out if someone already asked your question - it's possible, and that way you may find the answer(s) instantly.
Study source codes: if you are using Chrome, you click on any element on a site to view it's code - you just have to select "Inspect element" from the context menu (there are other ways to do it with other browsers). It will show you the HTML, the CSS properties and even the relevant JS code. You can modify these values (especially useful with CSS) if you want to experiment a little - these changes are only visible for you and deleted when you refresh the page. This method is useful if you found the perfect button animation you want to include on your page but don't know how to do it.
Backup your work! Create a backup copy of your site every day, so if you mess something up badly (happens to everyone, especially if you're in a hurry like often I am) you don't have to start from scratch. It happened to me before, and if you are using other people's code (from tutorials, I'm not talking about stealing) it might happen to you too.
Also, good luck!
Here are a few places I'd recommend going to, all of these have helped me and are a good place to start.
Codecademy - http://www.codecademy.com/learn
For basic HTML, CSS, JavaScript and jQuery lessons. Best site on the web, I say. Also, recently released AngularJS lessons, which are quite good.
Code school - https://www.codeschool.com/
Provides good AngularJS lessons, which you should do once you've finished the Codecademy ones.
Egghead - https://egghead.io/
Good for AngularJS lessons and HTML5 canvas lessons. The HTML5 canvas lessons are brilliant, the presenter is a genius.
What all these things are.
HTML5 canvas - A method of drawing graphics to the screen. Great for video games and animations. I've actually made the loading effect of that site you listed with canvas.
jQuery - A JavaScript library, which is a bunch of predefined functions for ease in coding. It is good for special effects and event listeners.
AngularJS - An awesome library which makes displaying data so much easier. Great for fast single page apps.
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 4 years ago.
Improve this question
I'm trying to get in the habit of designing the interfaces to my websites at the very beginning before I do any actual coding. I've read "Getting Real" by 37 signals and they recommend doing the interface first, before any actual code is produced.
What exactly is meant by that? Does that mean use pure HTML and CSS to design the site and add php, js logic to page afterwards, or is it okay to sprinkle in the php, js from the beginning?
What if your using a framework, should I set up empty controllers that simply call the views, or should the early stages be solely html, css?
Also, what do you guys think about design first vs later?
EDIT I'm talking about AFTER I have sketched everything with pen and paper.. I'm taslking solely about the html mockups. And I'm not too sure about using extra tools that I would need to learn to do this
I think that the majority of the benefit of designing the interface first has been achieved after you are done your paper sketches. Basically, you are just ensuring that you have a design in your head and that your coding process is somewhat end-user driven. You are also trying not to waste time on needless documentation.
Getting the HTML in place (or the skeletons of the Views in an MVC app) makes some sense and this is the main thrust of what 37signals says. I would certainly not do anything beyond this that is just going to be thrown away.
I think if you have a proper design, it is immaterial if you next move on to writing the back-end code after the HTML or if you do the CSS and JavaScript. The CSS and the code should not even need to be aware of each other.
Do whatever gets you excited and motivated. Do whatever gets you thinking more deeply about how the app will actually work so you can catch any flaws in your original thinking. I like to code before CSS but that is just me. You might find it important to get the CSS further along before the app takes shape in your head.
Joel Spolsky likes Balsamiq as a mocking tool. I think that 37signals uses Draft (an iPhone app). I use a Sharpie. The key is not getting too detailed though.
Opinions vary, but I believe that JavaScript should come last. I believe most sites should be designed so that they work 100% without JavaScript and then have JavaScript added for polish.
Learn more about Unobtrusive JavaScript
So (for me):
Quick and dirty sketches of views
Get some HTML in place
Maybe some basic CSS for layout (or more if I need to impress somebody early)
Write the core logic
Add support for web services and AJAx calls
Pretty it all up with snazzy CSS
Write some JavaScript to add the sizzle
Let me ask you this. Do you paint a car before or after you have made the working parts? Maybe you have chosen which paint but ultimately it cannot go on until the car is finished. Maybe you don't agree with this analogy but I think coding will bring out issues that cannot be understood before a site is designed. Code first, design second.
Get a pad of paper. Each page represents one page of your site.
Sketch the interface. What controls go on each page? What controls are the same on each page? What forms are there and on which pages? What happens when user clicks on item x? Item y?
This will help you solidify your plan of both the content and behaviour of your site.
If you just start blindly coding you will end up with burnt spaghetti.
The user interface is what the users of the website will see. Before coding you probably start with some very basic sketches of the site that are not code, to identify page navigation, general placement of content and interaction with the site.
But the earlier you can show and discuss a working UI, the easier it is for the users/client to get an idea of the final product. So quickly move to the HTML, CSS, JavaScript and things like images, to identify:
The data presented on the page (HTML)
The representation of the data (CSS)
The interaction with the data (JavaScript)
Doing so helps to gradually develop an actual working UI that you can discuss with the client. This keeps them involved from early in the project. It forces them to think about the site, and make decisions about content, look and interaction.
Getting such feedback early in the project reduces the risk of building a product that needs to be changed later on. And making changes early in the project is easier/cheaper, then later in the project.
While the UI is being developed you can already start looking into data structures, software components and integrations with other systems to drive the site. But that's not what users/clients are interested in, they want to see and use the product.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 5 years ago.
Improve this question
When making color choices during web design, I use free online tools such as ColorSchemer in which I:
click on a color
use the colors it suggests for me
This makes my designs look better than if I chose colors freely out of a color wheel.
But beyond this simple approach, what are are the best strategies for using these tools to make more professional color decisions?
alt text http://i35.tinypic.com/i4ia7n.jpg
I love using colourlovers. Specially the palettes, since you can pick a color and get a palette with it.
I struggle with this too. What worked for me was the Colour Lovers site and especially their blog.
This site allows users to submit and vote on color pallets and, although, they could be used for anything, many tend to be perfect for websites.
Additionally, their daily blog culls out the best and also investigates interesting color trends. I hadn't thought I cared much about colors, but their site has started to turn me me around.
I often use kuler, amazing product!
Walk in the street, go to an art gallery, look around you, take photographs.
Great colour combinations are all around.
Colourlover blog (http://www.colourlovers.com/blog) has good examples of how real things colours can make great paletes.
Yesterday's post shows a pallete constructed out of a hotdog (Chicago dog)
This is a list of sites that I use whenever I have the 'designer's block' :)
sorry but the rules prohibited me from posting more than one 'hyperlink'...
[ Site Design/Layout ]
unmatchedstyle.com/
webcreme.com/
ffffound.com/
...............
[Interfaces]
patterntap.com/
flickr.com/photos/factoryjoe/
................
I also use most of the other sites that have been mentioned.
The tools are all based on various color theories. So, it's probably best to understand that, and then the tools make more sense. There's plenty of great books on color theory.
I find www.kuler.com to be excellent. Give it a try and let me know how you get on.
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.
At work I see one colleague designing a site in Photoshop/Fireworks, I see another taking this data, slicing it up and using Dreamweaver to rebuild the same from scratch.
It seems like too much mucking around!
I know that Photoshop can output a tables based HTML, and Fireworks will create divs with absolute positioning; neither appear to be very helpful.
Admittedly, I haven't tried much of (DW/FW) (CS4/CS3) since becoming a programmer, so I don't know if new versions are addressing this work flow issue, but are we still double handling things?
Can we attach some sort of layout metadata (this is a rollover button, this will be a SWF, this will be text, this logo will hide "xyz" <h1> text etc) to slices to aid in layout generation? are there some secret tools which assist in this conversion process? Or are we still restricted to doing things by hand?
The frustration continues when said hand built page needs to be reworked again to fit Smarty Templates/Wordpress/generic CMS.
I acknowledge that designers need to be free of systems to be able to do whatever, but most conventional sites have:
a header with navigation
a sidebar with more links
the main content part
maybe another sidebar
a footer
Given the similarity of a lot of components, shouldn't there be a more systematic approach to going from sliced designs to functional HTML?
Or am I over-simplifying things?
-edit-
Mmmmm.... I suppose I will accept an answer, but they weren't really what I was looking for.
It just seems like designing the DOM is a bit of holy grail ("It's only a model!"), and maybe with all the "groovy" things you can do with HTML and Javascript, it would be mighty hard work, but with a set of constraints (that 960 stuff looks interesting), some well designed reset style sheets and a bit of... fairy dust? we should be able to improve the work flow.
Photoshop's tables by themselves are pretty much useless, I agree, but surely we can take this data, and then select a group of cells and say "right, this is a text div, overflow:auto" or "these cells are an image block, style it with the same height/width as the selected area". Admittedly here at work there are other elephants in the room that need to make their formal introductions to management, but some parts of the design>page workflow seem... uneducated at best.
To me, doing it by hand is an advantage. You only have to get it right once, and if you're going specifically for visual appeal, you've likely got a lot of work ahead of you making it cross-browser friendly...
Would love to hear other answers. This is just my take on it as I make more data-driven than visually appealing sites.
Skip Photoshop entirely and just get your designers mocking up straight in the view HTML. Not only will you remove the complicated, awkward-feeling process you're feeling, but you'll get better, more resilient designs, because 100% of it will be based on what's possible in HTML/CSS, not what's possible in Photoshop.
More reading:
Why We Skip Photoshop
(37signals)
Walls Come Tumbling Down (Andy
Clarke) (via Jason Berry's
answer)
Web Designers Should Do Their Own
HTML/CSS (37signals) (via Paul
Souders' answer)
A number of people nowadays are designing straight into the browser using (X)HTML/CSS because of that exact problem - all of the mucking around with Photoshop and then going to code after getting the client to sign-off on a static design.
A good read is Andy Clarke's Walls Come Tumbling Down presentation.
Omega touched on it, but I think the biggest problem is cross-browser compatibility. If all those browser quirks didn't exist (coughInternetExplorercough), what you suggested would be much simpler. However, it often takes a lot of hand-coding to make it look pixel-perfect in every browser.
Another thing is fine-grained control. Sure, you can just pop your PSD template into Dreamweaver or whatnot and have a working website, but it's going to use hacks and ugly things like tables to make it work. And even then, it probably won't work entirely like you want it to. You have to remember things like accessibility and SEO, too, and Dreamweaver just can't give you that.
My opinion is that HTML/CSS is sufficiently simple that a competent web designer should be moderately fluent in it. Photoshop has its place for quick look-and-feel experiments, but I think this misses an important step: user experience design.
Personally, I've been designing and prototyping directly in HTML for some time now. This is where the clean separation of content and layout provided by CSS really shines. I organize pages into regions using unstyled divs, which allows me to organize the page conceptually (i.e. keep related items near each other in the code) and postpone thinking about appearance. This has the side effect of making a pretty thorough site inventory.
Next I'll use CSS to lay out the divs, which happily also produces wireframes (useful for reviews and paper prototyping.)
The last step is applying visual elements: color, text styles, graphics. I'll use whatever graphic program I need to cook up the pretty.
Note the orthogonality inherent in this method: develop concepts, then layout, then look and feel. This puts the hard thinking (conceptual models) up front, and the most volatile thinking (colors/styles) at the end. So when the art director changes the color palette, you only have to edit one CSS file. And if you need to change your conceptual model, much of the layout and look/feel may be reusable.
If you need traction in this method you can use a standard css grid like 960 (http://960.gs/). It handles a lot of the arithmetic and floaty business that makes layout such a chore.
In addition to Rahul's link above I also recommend: http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss
It's a nice pie-in-the-sky sorta dream, but I think as long as websites are written in (X)HTML/CSS, at the end of the day, you'll always have to do some, most or all of the work manually.
There's just a fundamental rift between static pixels in some 'shopping software and dynamic, changing, expanding, content-focused, text-based sites. The best tool to bridge that gap is still... the human professional.
Tools like iWeb (completely WYSIWYG) or DW/Fireworks (somewhere in the middle) only get you so far or have serious limitations. You get only pre-fabbed templates in case of iWeb, often sub-optimal code in case of DW/Fireworks. You'll have to decide which limitations you can live with and when it's best to do it manually.
There are several tools such as Sitegrinder that do just that.
Adobe themselves has a project in Labs called Catalyst that does what you describe and more for Flash:
It takes the slices from Photoshop, allows you to change their properties and export it to a working Flash file. (Right click box, add text property, it becomes a text field...)
If you watch their video (which you should - its amazing), you will see that they are deluded into thinking that websites will soon be built this way.
Before Zimbra was bought by Yahoo, it looked like they were heading towards such a tool that outputted cross-platform HTML similar to what catalyst does for flash. No more. But with the shake-ups at Yahoo, such software may still rise from the Zimbra ashes.
In my opinion, a site should be mocked up in Photoshop if necessary, with parts being cut out for use in the actual site, but to design the site completely in Photoshop, then want to make it work on the web is just going about it backwards. Really the two should be done in parallel.
In short, graphic designers design the look of a website, but you need a programmer to program it.
What you probably should go for is train the designers to work within a well established grid system for their site designs. If they can understand the layout as a grid/block system a lot of interesting design can be accomplished within those constraints. But it isn't going to be straight conversion from PSD to HTML because they are two completely different ways of representing visual data.
There are lots of frameworks that make the css work easier. One is Blueprint CSS
http://www.blueprintcss.org/
There are lots of templates out there for representing the grid system within photoshop.
http://konigi.com/tools/photoshop-template-blueprint-css-comps
Think of the grid as a visual constraints layer, then the design can be mapped between a photoshop comp and specific HTML/CSS implementation. Visual elements have to be bounded within clean grid boxes. SOme elements or units within the grid can be mapped to background images. Others solid colors or white space with div containers holding content.
With a well understood and grid framework you can get pretty close to pixel perfect layouts.
Also, good designers will understand how to use white space effectively in a design mockup. If there is lots weird intersecting lines and crossover elements in the visual design then that presents a real challenge for implementation. Just because you can visually imagine it doesn't mean it is easy to implement in a browser without making certain kinds of trade offs for the way HTML and CSS work. Think of the grid system as the constraints and an effective way to judge layout requirements.
Personally, I design it in html/css first using borders and background colors. I then take the PSD and insert the images as background images or html images. It's pretty fast, the code is yours so you know what each css rule mean which speed up the dev process (as opposed to to PS's awkward sliced image names and css selectors names)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I was wondering how to approach design of a website in terms of layout/design.What kind of process designers usually follow ?I am a developer who is taking first steps to develop a good looking website.What are the best practices - using divs, grid design etc.
Step 1.
First is to identify which type of site you are designing for. If you are designing a site that will show products, or lots of pictures in general, think of an appropriate design. (ie, don't build a 3 column layout for such site, as it will look very cramped and pictures will have to be small to fit other content in other columns).
Or on the other hand, if you know your site will be very simple, you may decide to put it all in just one page and use javascript to make anchor links scroll to certain areas of the page. This is becoming increasingly popular.
Step 2.
Try to visualize the site in your head, of how you want it to look. Think of color schemes and columns layout. Think of where the menu will go, if possible, try to know the the menus in advance, that way you'll know if you'll need drop down menus or not, if they should be vertical or horizontal, depending on how many links the navigation will have, etc.
Step 3.
To help with step 2, visit sites such as http://www.cssmania.com to get inspirations and ideas of what a decent website should be like. Don't copy them, but get a feel of graphic usage, menu placement, font & typography, etc.
Some designers use photoshop to design it, then slice it up and create the site. Some jump straight to html/css. This is entirely up to you. Personally, i start right away with html/css, and then, i prettify the site by adding background images, custom buttons, etc.
"What are the best practices - using divs, grid design etc."
Try to use DIVs instead of tables if you can. In the web design world, designing in DIVs is looked upon. However, pure css layout usually takes longer to make. So if you are on a budget or timeline, it's OK to do it in tables.
My personal method for designing a site is to first of all consider the needs of the site. What is the most important thing that a visitor needs to do or needs to know. Consider this site, the three big things you may want to do when you open the home page is 1. view some questions to answer, ask a question, or and log in. You are immediately able to do those 3 things quickly with minimal clicks and no searching.
The second thing to do is to think about the impression of the site. If you visit a major bank's website they convey trustworthiness, if you visit a blog it conveys a sense of personality, when you visit a news website it can give you feeling of urgency or knowledge.
Third you should consider brand recognition. There is a reason Pepsi's website is blue and Coke's website is red. If you see the stackoverflow logo somewhere there is a good chance that it would ring a bell (serverfault maybe not so much). This is a major design challenge that a lot of companies spend a lot of money on.
Finally, think of the poor users. I personally have the attention span of -oooh a red car! If I can't figure out what your site does instantly I will be lost and want to go somewhere else. If I can't figure out how to do something I want to do in a few glances I will dread coming back. I hate digging around a website to find a login or a bit of help.
An example is registration on a site I'm working on. The site just asks for an e-mail address. You put in your e-mail address and a confirmation is sent to your inbox. Click a link add a password and you are done. Your e-mail is your sign in. (Don't you hate it when your favorite username is taken?) You don't have to fill our your home address because we won't send you any letters, and we don't need your name because we aren't going to know you on the street.
After this just look at other websites similar to what you are doing. Look at design blogs like Smashing Magazine. These all will give you inspiration, but don't think, 'Oh this website has blinking text, I should have blinking text!' or, 'This blogger says I should use this font for business websites, so I must use it.' You are smart enough to know better
I think the most important thing is to use your own site. If you don't use it, you don't know what needs fixed or changed. Have others use it too, right in front of you. Don't say anything, just watch how they use it and if they struggle with anything.
Here is what I do (i'm a developer who tries to design!)
Draw out the layout on a piece of paper
Make a mockup in photoshop/paint etc
Divide the page content into different blocks , div's , tables's
Find out what page elements are common to all/most pages like header and footer
Convert the mockup into html and css
See if it shows up right across most browsers (hardest part)
Get feedback from a co-worker/friend and modify the design
I prefer table layout on div layout so you can choose the one that suits you and your applictaion then write css for the pages and follow "Look and feel" .
Although I m not expert hope this works.