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.
Related
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?!
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 4 years ago.
Improve this question
IS there a way to test CSS and HTML? For instance: sometimes some of the notices get affected by some CSS changes. I don't want to be testing all the notices by hand every time I do a change.
Thanks
It's very difficult to automate testing of layout. But it's not too difficult to drastically cut down the time and effort involved so that you can do it manually, but very quickly.
You could try Blink Testing.
I've heard of it used for websites like this.
Write a script that walks through your website, visiting as many pages as you can think of.
At each page, take a screen shot.
Combine all the screen shots into a 'movie' with just a second or two for each screenshot.
Now, each day you can 'play' the movie and watch it for any issues.
You could even extend bcarlso's approach but replace the MD5 check with a visual check. Each page gets displayed for 1 second - first the known good, then the new. You could alternate them a few times so any obvious errors will appear as a flicker.
A website with hundreds of pages can be checked like this in a matter of a few minutes. You may not think this will provide enough time to find issues, but it is remarkably efficient in identifying obvious problems with your website.
Any pages that have major layout problems will pop out at you as they don't match the same pattern as all the other pages.
I am assuming that the issue that you're trying to test would be that the CSS changed in some incompatible way with the layout causing, for example, text to be truncated or otherwise visually "broken". If that's the case, then I would say that there isn't a good way to test the aesthetics of a page at this time. One of the primary benefits of TDD and CI is quick feedback so that you know something is broken before it gets to production. Not knowing much context around your environment and how those changes make it into your app it's hard to suggest solutions, but here is an example of a potential non-traditional option:
Put a commit hook into your repository that let's everyone on the team know via an e-mail when someone changes some CSS. Preferably with a diff of the CSS. This would give the team a heads up to keep an eye out for layout problems.
We started an experiment to use WATIR to walk some of the main screens in the app and take a picture using ImageMagik (essentially a screenshot) and store it in a "Last Known Good" folder. Every day re-run the script on a clean install of the app and data and place the images in a "Current" folder. At the end of each run use an MD5 to compare the images and alert on changes. Have the QA team review a list of flagged screenshots and if the change was acceptable (for example, a field was added as part of a feature) then copy "Current" to "Last Known Good". Unfortunately we didn't get our experiment finished so I don't know if it will work well. I'm concerned about the brittleness of screenshots as "assertions".
Hope that helps!
I believe Selenium can test your frontends for you. Specifically for browser compatibility testing, take a look at Selenium RC.
If you'd simply like to make sure you're contents are in the right contents etc. etc. you can create a simple testing suite that's going to be making GET requests to your website. When you receive all the content you can run it through a validation template like xslt. Well formed html will usually be able to be matched against xslt's or xsd's. It is not ideal but if you're only worried about the structure of your website and not the styling you'll be able to achieve it this way.
A change to CSS should not affect the behaviour of a page, only it's appearance, so I'm not sure that Selenium would be much help for this.
I'm going to take a guess that you are trying to avoid problems such as elements being misplaced on the page so that they are not readable. If so, you would probably need some kind of OCR-based tool, but I don't know one off-hand to suggest.
However, it may be to better to invest your effort in preventing this kind of problem in the first place. If your layout is easily broken, maybe you need to refactor your CSS to something simpler.
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 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
When you learn HTML and so forth nowadays, the mantra is always "Clean code = better code".
So why do sites like Mobile Me and Google and Facebook all use huge amounts of tables and other not-semantically correct code?
Thanks!
Because people still use IE6, unfortunately, and it's so incredibly bad at CSS as to make it almost worthless for CSS selectors of any sophistication. Until IE6 is gone and dead dead dead in the cold ground, you're still going to see a lot of this.
If you could see what SharePoint generates, you would probably go into seizures.
Clean code is better, yes.
But working code is much much better )
Because sometimes that's the path of least resistance. It's not always about being ideologically pure, it's about being pragmatic and getting the job done in this crazy, multi-browser, multi-platform world.
Because it's easier.
While the purist in me will also strive for semantic tags and external CSS for layout, the pragmatist in me need to get this site up by 6pm (so I can go home to my wife and a nice warm dinner!) and there's just this little problem with [insert browser here*] that could easily be solved with a bit of conditional CSS, or a table or something.
There are other reasons for high-traffic sites like Google and Facebook to use inline CSS and js: bandwidth. Every external file you reference is one extra round-trip to the server to fetch. Of course, that doesn't really explain the style="xxx" tags as opposed to just inline <style> tags, but it still reduces the size of the page. Also, while caching does tend to reduce the number of trips, there are still a significant number of requests that are made with a "clean" cache that you still want to optimise for that case.
Not always IE (but mostly is)
I had an affiliate marketing client the other day who wanted me to make him a web template where he could go in and edit it with Adobe Dreamweaver (some app I don't use because I'm a Linux user). So, being the web-savvy guy I am, I did it in XHTML with cross-platform CSS that I have learned over the years, using DIVs primarily, and only using TABLES for form field alignment simply because of the 80/20 rule. It was lean code in as few lines as possible, loaded super fast, and worked on all browsers from IE6 on up.
But then I handed it off to him, and he was visibly frustrated and asked me to make changes. He didn't like the CSS because he couldn't cut and paste sections to another page and have the styling carry over. Instead, he wanted me to switch everything to inline styles. Next, he couldn't edit the floating DIVs very well, and would undo my cross-platform work I had done, so he wanted it reverted back to tables. The end result was XHTML + CSS for the shell of the page that centers everything into the middle and adds the fancy graphics around the page. Then, I used PHP "include" separation for headers and footers. The final part was the middle of the page, and that was his domain. I had to compose it in TABLEs with inline styles. At that point, he was happy and I had a compromise.
So, keep this in mind that there are some cases where you have to use TABLE formatting and inline styles because that's all the client really knows how to manipulate.
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
Designing a web application, how do you design the main page? By this I mean the page that is displayed to a user after entering the base url, like http://www.foo.com.
It would probably depend on a website, but...
stackoverflow welcomes us with list of questions, no silly what is stackoverflow landing page,
last.fm prestens a kind of dashboard, being very popular lately, kind of personalized landing page for registered users
google welcomes us with a search box, but iGoogle i completly diffrent story - looks diffrent for everyone (well, and that's the point actually).
The other thing is, if the user is logged in (provided the website supports logging in), should we present him a diffrent content there then some new, random incomer? And I don't mean some personalized content, but something completly diffrent, like his user profile instead of main page?
From one perspective it could be good - registered users usually know our site, and get a kind of special greeting as soon as they come back. On the other hand, this could cause problems - when I show a website to a friend, then he goes there from his computer and sees something totally diffrent.
And other thing is, when I show a http://www.foo.com to a friend, and it takes me directly to my user profile / dashboard - this isn't sometimes what I'd like to show everyone, as this might show some of my personal data, etc.
What do you do when you design your web applications? What's, in your opinion, best from user's point of view, do my concerns about the website looking diffrent for registered and unregistered users do or don't make any sense? (Again, I don't mean small diffrences, like hiding huge register now link - but showing completly diffrent view then).
It really depends on the focus of your application, but if you were to generalise I would say determine the one or two most critical paths in your application and focus on those.
Registration is probably what you
want to drive more than anything
else, so make it clear how users can
sign up and get involved.
Make it is easy for existing users to sign in.
Consider the amount of text you have
on your front page and reduce and
pair it down as much as possible. Keep the messages and information you
convey here as succinct as possible.
Provide some content immediately
showing what your application or site
provides. Don't make users follow a
link to access the core functionality
of your site immediately e.g. if
you're building an auction site,
ensure there are listings on the
front page.
Consider your audience. If your site is non-technical, the fewer UI elements you present the better. Portal like sites, with lots of compartmentalised functionality and information can be confusing and overwhelming for many non-technical users.
Make it clear how users can get Help if they require it
Without knowing the business area of your site then it's going to be tricky to answer this, but...
You should get the user into the main flow of your website as soon as possible, and the home page is the best place to do this.
If you're an online store, start showing your products.
If you're a search engine, give the user the ability to search.
If you're a blog/news site, show the user the latest news.
Yes - make the experience for a logged on/registered user better (show them THEIR news, show them their recommended products etc), but the purpose of your site should be obvious and accessible from that home page. Get your existing users into their flow as soon as possible, and attact new users in to your site by showing them the meat of your site.
There are plenty of places out there that discuss good web design, making your site "sticky" etc. Check out SmashingMagazine.com (it's one such site) but there are plenty of others.
Oh, and remember that there's one very important user of your home page that you need to accomodate - search engines. Make their life easy, make the content discoverable and indexable, and drive people to your site via Search.
What I've found works best for me is to "role-play" the end-user's experience.
When they initially hit your site, what do they most want to see, or in other words, what are they most likely to be looking for and wanting to do?
I work on many intranet websites for a very large company, and what I've learned is that a home page that has detailed information of the site and what it does is useless and, consequently, my end-users just skip over it in order to get to the pages that they really need. So, my strategy usually consists in a home page that allows them to get straight down to business and whatever they're there to do.
BUT, that's just for the sites that I create. I think it totally depends on your target market and what they're wanting to do.
For the most part, a visitor landing on your page will already know the gist of what your application is about, so there shouldn't be a need to explain in detail what is is you do. Instead, show them that you have the information they are looking for. Screenshots and screencasts are becoming popular these days as a means of getting this across to the short-attention-spanned user.
For registered users, I'd recommend taking them directly to the primary application page instead of the homepage (unless the homepage is the primary application page). For many apps this is a Dashboard (Flickr, Basecamp, Campaign Monitor). If your app's main focus is the homepage, you may want to show them a personalized version of that page (think Google vs. iGoogle).
With all this said, it really does depend on what you are building. Every application is different and there's no right way to do it - only conventions that work for most.
I would start by looking at the type of tasks that can be performed inside your web app, what's important? what's important when they are a new user? what's important when they are a repeat user? what's important when they haven't even registered yet.
Although all of these things happen on the the same page, it's likely that you'll need to define different states. e.g. If a user is on the homepage and not logged in, should we prompt them to login and register.
Perhaps also look at Personas so you can figure out exactly who will be using the app and what is relevant to them.
It should be whatever makes sense for the application, and this should be verified by testing the application with a group of expected users.
The main page should provide a first-time user with enough visual and/or written information to understand what the application is about. They should have some idea as to what actions they can take to interact with the app and what the outcomes of these actions could be.
I know people hate this answer on stackoverflow but there's only one way to find out what the most appropriate thing for your users is - you need to brainstorm ideas with potential users or at the very least you ask them.
I'm not suggesting that you do a focus group, or put a flawed poll up (neither of those things work). Rather, I'm suggesting that you go out and talk to people who will potentially be in your target users and do planning games with them (like card sorting) or go out and do some user testing with paper prototyping.
Anything else is guessing.