Tag Info

Hot answers tagged

14

Yes, this question is incredibly broad. Maybe it's OK as a wiki article. For starters, define 'we'. There are many, many people and roles involved with designing web sites and they all tend to have different common mistakes. To give this question at least one answer, I'll toss out issues I've seen that seem to pop-up over and over again: using wireframes ...


11

Pixel fonts aren't terribly different from tiny print fonts when you get right down to it*. The one big exception is that you know what the medium will do with pixel fonts -- a very big advantage. There really isn't an ideal pixel grid, per se. Obviously a larger grid gives you more room to work. The smallest types I've seen work successfully are 7px ...


9

I would say no. Most of all: They will not look good in tiny versions They are too "predefined" in style: SE have a multitude of sites, and in very few of them will it fit the rest of the site They are too "militant"/gamey with over/undertones of religion, imperialism, war, power etc The symbolism will have to be learned on a much more complex level than ...


7

It all depends on the actual use; who uses it to what aim. There are a million alternatives, and what you must bear in mind is what data is ok to be approximately right and what parts need to be exactly right. You could call this the granularity of the data. How the data is fed is of course also a consideration. But mainly: what needs to be how detailed to ...


6

Unfortunately, no. You can highlight all layers then choose Options for Selection from the Layers Panel menu. Picking a color at that time will set all the highlighted layers to the same color. The colors aren't random; they walk through the list of colors available. While the order of the list may have been arbitrarily picked by the developers, the colors ...


5

You can certainly approach a UI designer with what you have. The concerns I'd have is that UI design, Wireframing, Prototyping, Interaction Design, Content writing, Development, etc all influence each other. In other words, it's very difficult to do any one of those tasks in isolation of another. Wireframes can't fully predict all user flows. They can't ...


5

This to me just looks like some white shapes placed over a blurred background with their opacity reduced at varying levels. The "main" rounded rectangle has a white stroke and hardened drop shadow to give it the illusion of thickness. I've created a similar effect in Photoshop, but the same concept could be applied using CSS. Something like the following ...


4

We likely need a lot more context here. This is as much a user experience issue as it is graphic design. My gut reaction upon hearing "requires 50 items at the top-level navigation" is to stop things immediately and get some content experts in to make sure that's truly a requirement (vs. an arbitrary want). As it is now, it seems like a shotgun approach ...


4

The good ones do. Generally a good designer has a library of custom patterns they refer to. Most "found-on-the-web" patterns are lacking something whether it's good seams, transparency, or whatever. There are some good one's out there (subtlepatterns.com being one of those). But they are rare. There are millions of tutorials on creating patterns. Once you ...


4

There's also a paid one here. It says it's available for Illustrator, Fireworks, Visio, OmniGraffle, Axure, Keynote and PowerPoint, and the Illlustrator single license is apparently something like $24.


4

There is a certain point in a long design process where it's easy to fall into the trap of overthinking what you're doing. Different parts of the design seem like they could be better, you aren't sure how, exactly, but maybe if... At that point, you begin an endless (and pointless) round of tweaks that as often as not end up uglifying what was fine to start ...


3

The first chart type I thought of was a bubble chart. You could put time as the x-axis and the page link as y-axis and then use the bubbles to represent the number of clicks at that time. Here is an example of said chart type: Source (raphaeljs) (Thanks user568458)


3

I think this question has been asked before but I haven't found it yet and if you do a google search for wireframing tools or mockup tools you will get a huge list to go through. That said some people use Omnigraffle for mockup which if I had to use I would. Other tools: balsamiq pidoco justinmind framebox (which is online) Mockup Builder Depending on ...


3

I think a very common mistake in web design is evident on the mobile web. If you browse the web on a small mobile device, such as iPhone or BlackBerry, you will notice that sometimes the buttons are too small. Now this isn't always the button itself, but one mistake that is made is that there is often not enough room around the button. Lets assume we are ...


3

Download the psd here click on the blue-button.psd text in top left corner Its all done with gradients, inner shadow for the highlight at the top and for the shadow round the edge i used a bevel. You can download the psd above ^. Its all a little off just were a picked random colors from the jpeg.


3

Beware, this is more of a 'sentimental answer'. I'll try to be concise. This still happens to me and will probably continue to happen, or at least I expect so. For me, it's not only the things I created five years ago, but those I finished last week. I always think there's something else I could have done to improve it. I don't actually think there is a ...


3

“Half of art is knowing when to stop.” - Arthur William Radford I always remind myself that I see everything 50,000 times more than anyone else ever will. It's very, very important to have fresh eyes on things regularly. I try and work on a variety of projects which entail different designs entirely. This way, if I feel one design may not be up to ...


3

Generally yes, In my experience the designers will create most texture effects like that on their own, if they feel confident they can do it. There are of course alternatives like free image sourcing sites, and paid sites as well like istockphoto.com etc. When I'm designing a website, I tend to make the textures myself to avoid copyright violations on ...


3

On http://jquerymobile.com/resources/ there is a listing including a link to the icon author's website and the actual files can be found as a zip download on github. Even though there is a .eps file in the assets folder, the icons in the .psd file seem rasterized. Maybe contacting the author directly would be a possiblity, if you really need the vector ...


3

I personally don't find emoticons appealing, but it's clear to me that someone who loves them has gone to a lot of trouble with these. If you look at them closely, you'll see alot of care given to the coloring and shading, plus all the the "cutesy" tricks of no nose (usually), large eyes, exaggerated expressions and so forth. They chose very well known ...


3

I would do it like this: Make a new layer. Make a Black line with Line Tool in that layer. Put Fill Pixels setting on so you can deselect anti-aliasing. Go to that layers Blending Options. Add Drop Shadow Blend Mode: Overlay. Color: White. Angle: 180 or 0. Distance: 1px. Spread: 0%. Size: 0px. Noise: 0px. Make sure that "Layer knocks out drop ...


3

Create a green background Draw the 2 lines with line tool Double-click on the line layer Apply bevel emboss > pillow emboss (select from dropdown) Rasterize both line layers Select marquee tool > fade from top > and then delete the bottom part of the line layer, apply this on both layers You can follow these screenshots, I tried to explain this as ...


3

I would create a different hierarchy - one for the login and one for registration. You could probably do something like: Login: Username Password Need a login? Register:(goes to new page) Once a user has logged in you can give them a launch page like: Welcome, Your name here. Button for settings -- Button for Credits That way, you're ...


3

I would highly recommend using the open/closed hand cursor when manipulating on-screen objects. The open hand on hover, and the closed hand on mouse down and when dragging. This standard is used in many popular applications, not the least of which is every Google app where dragging one or more objects is required (e.g., G-mail message list, a Google Map). ...


2

If you can only drag them up or down, what I'd suggest is, on hover, to show an icon next to it along the lines of two arrows. Bad ASCII version: /\ \/ Alternatively, a common cue is the 'grippers' you see to resize things like in the bottom corner of your web browser. Bad ASCII version: ///


2

I think DA01's answer is already an excellent list of things to consider. I'm adding my answer both because it's important and to bump the question as I'd really like to see more answers to this. Another very important consideration in designing a website is speed. Being aware of all the factors that affect page load speeds before you begin designing ...


2

A good hierarchy is critical - DA01's suggestion about using cards is excellent since it lets you visually organize your categories before starting to code. Plan for accessibility - controls that enable the largest group of people to easily use it make for the most popular designs. Stuff like redundancy (icons AND text), color coding (yes, it's less useful ...


2

Flat design is a relatively new trend (at least in popularity) and as such it's not going to be as widespread. for the most part, updating a website's visual usually consists of simply changing the CSS Stylesheet whereas when working with a desktop application, changing the interface and colors is a little bit more involved. Plus, you then need to push an ...


2

I imagine one of the reasons why you are having difficulty with this shadow is because it kind of gets smaller in the center, it doesn't go all the way to the ends. I would re-create it using a new element: Create a white rectangle (your page) over a gray background In a nee layer under the rectangle, draw a black oval shape the size of your desired ...


2

I think you need to work more on information architecture and wireframing, don't make the interface too crowded, this will give the user a bad experience. Try to keep it as minimal as possible. For inspiration can visit 52 weeks of UX. Read more learn more about HCI (human computer interaction), study human physiology to see things. If you want to be a UX ...



Only top voted, non community-wiki answers of a minimum length are eligible