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 9 years ago.
Improve this question
My client asked me to create a site for our company and sent 5 different logos in 5 different colors. He wants to add different color logo on each page. Say user will open about page then he'll get green color logo, contact page then blue color logo, home will have orange color logo and so on.
Personally I don't want to use multiple logos in this website, but to convince him I need reasons why this is not a good practice.
So, I wanted to know about the usability guidelines for website logo. I googled a lot but didn't able to find such blog post or articles.
Please help, thanks!
Well, if the logo doesn't rely on color much and is strong enough to take this kind of beating, then it might actually work.
Anyway, here's a few arguments against changing colors:
The logo needs to integrate well with the rest of the site to be aesthetically pleasing, so the colors of the stylesheet need to be in synch with the logo. If the logo's colors change, then the rest of the style must follow - this will increase the cost for development and maintenance.
Maintaining the logos themselves also takes more time - we can't simply make a single template with the logo and a menu; instead, we need 5 dedicated templates, or we need to make the logo part dynamic. Again, increased cost for development and maintenance. Also, if the logo ever needs to change, the graphic designer in charge will have to do the same thing 5 times instead of once.
Color is one of the most basic things humans recognize, and it has a strong connection with the subconscious. Using one logo and one color set consistently throughout the entire presence leads to a stronger sense of familiarity.
Changing colors might produce a short moment of confusion to the user, a feeling of accidentally having left the site, a second of "oh, I must have done something wrong" - not good feelings anyway. You don't want to confuse the user, you want a slick, coherent, comfortable, no-surprises experience.
It is more like a marketing question than a usability.
Web site branding needs a permanent visual sign. This is the logo. Permanence means to color also. Changing color page by page strongly confuse visitors.
Related
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 7 years ago.
Improve this question
I'm building a photography portfolio website, which will have a fluid, responsive design. To have the images look good at all sizes, and to not have to deal with retina resolution issues, I'm thinking of just using SVG files for all images.
Using SVGs sounds like a perfect solution to these issues, but for some reason I haven't seen any websites exclusively use them, which makes me wonder if there are any downsides to them (aside from lack of support in IE8, which I don't care about).
If you use them too much, or in animated form the end user might have some performance issues, especially on smart phones. Icon fonts are much CPU-friendly, but they are much simple and monochromatic.
Other than the lack of support for older-browsers, there's no downside to them. We love SVGs.
As mentioned in the comments, I would go with SVG icons/sprites/cartoons, and stick to bitmap/raster formats for photos. Photographs are bitmaps by nature, and when trying to convert them to vectors you may find some issues:
Not everything can be converted into a vector... or it could, but at a high price (bigger file size, complex files that require more processing). Then we could start a whole debate about file size vs image quality.
You are limited by the camera/lens technology: using photos in SVG may give crispier/sharper edges on scale, but the details inside won't appear because they are not there (e.g.: you may have a picture of a hand in SVG, but it doesn't matter how much you zoom in, you may prevent pixelation but you won't see the cells either).
Older browsers will not support the format (although you already mentioned that this is not a problem in your case).
Then there are other issues specific to a photography portfolio/store website:
If you are planning on selling the pictures, by using SVG you'd be giving the product away for free: right-click, "Save image as..." and the user will have the full size image without paying.
You could add a message/watermark to prevent that (or to sign/give credit to yourself), but watermarks would be "easy" to remove. And sadly we all know how the Internet works.
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
I've been an IT pro for awhile and I am recently getting more and more into web development. I'm especially interested in HTML 5, CSS 3, JavaScript, jQuery, and responsive design concepts. One thing I always seem to have problems with is images. I'm hoping some pros here can help out someone just starting.
Where do you find images to use for your client's sites / or your own sites?
Besides taking your own pictures, is there a "go to" site that devs use that has good variety, high quality, and is preferably free?
Once you acquire some images, do you go through a routine of re-sizing them or otherwise fixing them up for use on your site? Gimp is pretty good for re-scaling, but sometimes the image quality degrades. It's probably best to get good images with the right size to begin with. Is there some CSS magic that devs typical use to get their images the size they want?
Like I said, I've been using Gimp to do simple things like create cool text, re-size images, and create basic banners. Is this a pretty good tool to use for this, or am I missing out on something better (and easier to use).
I've read a lot of articles online, but I trust people's input on this site.
If you need images for production, that you yourself can't make, you can check out shutterstock, for example. If your clients need photos or graphics, they will have to pay for them, one way or the other ;)
Here are some good primers for dealing with images on the web:
Adaptive images - http://adaptive-images.com
or
Responsive Images - http://scottjehl.github.io/picturefill/
Retina Quality Images on the Web – http://imulus.github.io/retinajs/
With Bitmap images (Photos for example) always get the largest you can get and scale down to the sizes you need. With Vector - SVG for example - you can scale without losing quality, but when you scale vectors you will likely have to rework the drawing, because the proportions will not fit.
GIMP is open source and if you can not spend any money it will do the job. Like is said: scale down from large photos. No the other way around. You will lose Sharpness and Quality fast when enlarging images.
I don't know of good Photoshop alternatives on Windows. But I could give many great and cheap alternative for Photoshop, should you be using a Mac.
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 9 years ago.
Improve this question
I am new to web design, and am struggling to get my head around the design aspect.
Let me be more specific in my question...do most people make their websites look attractive, with 3d boxes, shadow effects, textured backgrounds etc with CSS entirely? Obviously photo editing would be done elsewhere but being new to CSS it is hard to see how it could be as powerful as using a piece of software.
For example - the website below...would the main nav bar at the top (with a different texture to the background), , the actual background and the box with Online 3d kit builder etc all be designed using CSS or do designers tend to create those types of objects elsewhere and just reference them as images in CSS code?
And referring to the images just below the main picture, would they have the link bar put on them with CSS or in another programme?
I realise all people do things differently, but I would really appreciate people's views/exeriences.
Link - http://www.mkksports.co.uk/
Thanks in advance
In this case, the backgrounds and logo are made elsewhere and referenced by the CSS. The buttons in the header (including their orange button look on hover) are pure css. The teaser images' ("UNI SHOP", "BESPOKE SERVICES, etc.) overlay text and formatting are pure css.
The idea: if you can do it in CSS, do. It makes it much easier to change the whole site at once, and keep it consistent. For example, you wouldn't need the same designer's original photoshop file to make a completely new teaser image. Just wrap the new image in the right class, copying the markup, and you've got a new identically-styled teaser with the exact same formatting effect.
You should always use CSS for styling whenever possible. CSS loads much faster and uses less bandwidth than loading a bunch of images. Any time you can use CSS to get the same effect as you could with a graphic design program, you should.
With CSS3 and HTML5 it's quite easy to accomplish a lot of the looks that used to require images.
That being said, the site you referenced is using background images for the navigation/page background, but they are using CSS for the hover effect on the links in the menu.
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 9 years ago.
Improve this question
I am not a web programmer, but we all find ourselves needing to mess around with html, css, and javascript at some point. And every time I do, I find myself hating CSS's guts. This is almost entirely related to positioning. Many things that I think should be easy and straightforward turn out to be very difficult or even (seemingly) impossible.
Take centering something in the user's browser/interface. I recently wanted to do a "Coming Soon…" temporary splash page (cliche, I know), and I wanted a tiny piece of text or image to land right in the middle of the user's browser. Conceptually this couldn't be simpler, and yet to actually achieve this in CSS you have to do all kinds of tricks. I'm not asking how you achieve this. There are several tutorials/examples, including these two excellent ones:
http://css-tricks.com/centering-in-the-unknown/
http://www.dynamicsitesolutions.com/css/center-page-content-horizontally-and-vertically/
What I want to understand is why it is so complex to achieve something so basic? Why can't I just make a div (or whatever) that spans the height and width of the browser, and align something in the middle of that? Why do you have to come up with entire frameworks like Bootstrap (which, in my opinion, are still incomplete and hacky) to do things that should be a part of the philosophy of the implementation?
The people that come up with the CSS standard are much smarter than I am, and there must be a reason for this. What is their logic or philosophy behind how it is implemented? What am I missing? I want to understand, so at least next time I try to implement something I won't fool myself into thinking "This will be easy" when, I assume, there is a reason it can't be.
Because HTML/CSS is limited by its roots: ltr horizontal flow
When we first started making websites, HTML was designed as a simple way to make content flow, like in a magazine or a book. Maybe it would have images or embedded audio, but there was no way to foresee at the time that we would have websites in the millions of lines of code. HTML was designed with horizontal flow, not vertical flow in mind.
There are other examples of this:
It is comparatively difficult to vertically align text to the center or bottom of a page, this requires a lot of unintuitive understanding whereas central alignment on the horizontal plane is a simple text-align='center';
Tables are defined with <tr> table row tags, not <tc> table column tags.
Ever tried making a <DIV>, especially one wrapped inside other divs, the full height of the page (not screen)? It's not as easy as you'd think.
An element with height:100% is not automatically the same height as your browser, only the height of your content. See this example.
Because of the need to maintain backwards compatibility, browsers continue to use rendering engines based on left-to-right, top to bottom rendering. It seems unlikely that an alternative to HTML will take the web by storm any time soon, so we're probably stuck with this paradigm for the foreseeable future.
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 10 years ago.
Improve this question
Can anyone give me any advice or direct me to a good tutorial on converting an Adobe Illustrator template to a WordPress template?
I've read a lot about doing this by using slices, but I've also heard sites built with slices are a nightmare to maintain. This site will be updated frequently so I can't have that problem. Also, the site's background has a gradient, so I'm not sure how slices would work with that.
If I have to use slices to make this template though I could go with a solid color, but the gradient is preferred.
Thanks
Use slices just to cut up your site in a way that allows you to use current CSS techniques. For example, a small slice for a background image that's a seamless pattern, or a thin, tall slice for a vertical gradient (you'd use CSS to repeat-x it across). You'll probably need to hide various layers as you slice to get the right bits and pieces. You've probably read folks who have had issues with the old concept of slicing a design - where the whole site was built on pieced together images, and making edits was a pain as a result.
If you just use slicing to basically grab the individual elements you need (read up on image spites as well for efficiency!) and background images - just the parts you need whereever you can, because you can repeat vertically and horizontally - you'll be just fine.
You are going to want to break down all of the elements of your illustrator template. And then build that from the ground up on creating your Wordpress theme. Since you have a gradient background, slicing it all up would not be the best option. Take all of the elements of this Illustrator template and save them separately.
Then I would familiarize with the steps on turning these elements into a fully function Wordpress theme
http://wp.tutsplus.com/articles/news/building-wordpress-themes-from-scratch-a-new-book-from-one-of-our-wptuts-authors/