|
Ron Don Volante posted:I recently redesigned the front page of my e-commerce website and I'd love some feedback on how it looks. I've been following the hero graphic example set by a few another e-commerce sites but have run into some constraints due to the template I'm working with. I'm still not entirely sure whether I should stick with this or switch to a slideshow of my products for the hero graphic instead. Any advice is gratefully received. My 30 second review:
I know I probably sound like a douche-bag, but the design is very "amateurish". I don't see any consistent spacing or grid, I see arbitrary colors, and strange typographic choices. I threw together a not very good comp to illustrate some of these things. This is by no means a "good" design: but it has some stuff to build off of. Your 'Featured' products give us a natural grid, so that's used as a base for the layout. Typography is mainly serifs: Banks use serifs for the most part because it screams "trust". The shopping cart and account stuff is set in a different face, to indicate it's related to each other, and has a different purpose than the other links (commerce vs. content) The big confusing part in the middle has been replaced with the parts users would want to know, and the rest has been replaced with the whole reason they came here: Silver Dollars!! I can immediately see stuff for sale, and there's a call to action for me to SHOP, which is what *you* want! This is obviously a bit to sterile, and there was no thought to color other than "use very little" but from a UI perspective, it's a solid starting point: USERS will like this better because they want two things when they visit your page: to buy coins, or to get in touch with you about an order. They get to those a lot sooner here. YOU will like this better because it ives your users what they want, and presents them shopping opportunities sooner. Anyway, sorry for sounding mean: I don't intend to, and I hope my ramblings help. [EDIT} OOPS! I forgot to export that image w/o transparency... the background should mainly be white. 
|
#
¿
Sep 12, 2013 04:09
|
|
|
|
| # ¿ May 21, 2024 00:43 |
|
|
Ron Don Volante posted:Site updated. Is this the right direction? I just slapped it together quickly, still need to clean up pictures and text. One thing I had trouble with was finding a decent font for my slides. Does anybody have any suggestions? Much improved, but your header is still too tall =) I'd also try a much lighter BG color. Mess around with it in your browser's dev tools till you find one you like. Start around #e6e8e9 and mess with hue and lightness from there. I just think that dark background is too "heavy" for the page, but that's just my personal preference. [EDIT] Also, why do most of the coins look goldish? Do they just photograph that way, or does silver tarnish to that color?
|
|
#
¿
Sep 13, 2013 14:11
|
|
|
Ron Don Volante posted:Just decided to drop the header's tagline. I'm still unhappy with the slide font though—are there any nicer fonts that are widely-used in web design? Fonts are easy... just look at hundreds and hundreds until you find the one that exactly matches the mood, tone, and message you wish to send  More than font though, your images lack proper layout. I've posted your image, then your image with the major blocks outlined, and some of the spaces to nearby blocks. You'll note a large variety of seemingly random numbers. The bottom image is your image, but with things moved around a bit. The right and left margins are 64px, text is spaced 32px (which is 0.5 of the left & right margins!) You'll note that the bullets don't count... pretend they are not there when aligning text. So same type and image, but on a grid. To my eye it looks much cleaner. While you should not always force everything to line up based on strict mathematical rules, using them as a starting point, especially when first learning, is a good way to ensure you have something nice as a base: you can then tweak by eye as needed.
|
|
#
¿
Sep 13, 2013 21:18
|
|
|
Ron Don Volante posted:
Free? Yes. Good? That is a matter of opinion. You may be lucky in that you are suffering through Paint, so everything else will seem awesome. Check out GIMP, which is open-source so it's free, and it has a really impressive feature set. http://www.gimp.org/
|
|
#
¿
Sep 14, 2013 04:28
|
|
|
Suspicious Dish posted:Just so you're aware, Paint.NET Is not MS Paint. Paint.NET is as fully-featured as GIMP is. My deepest apologies.
|
|
#
¿
Sep 14, 2013 05:06
|
|
|
samglover posted:According to this web designer, it's rarely a good idea to use black black in web design. I always use #111, instead, and I definitely think it looks better. The answer might just be to drop the black and use #111 or #222, instead. You've got a gray page, not a black-and-white one, and maybe the black around the coins is just too harsh. Oh man, thank you for posting that link. I read that article (which is wonderful) back when it was first published, and a few weeks ago I wanted to find it again and for the life of me could not get the right google-fu to do so. So another design tip: bookmark everything! I now have a nice nested folder structure for design and development and I bookmark the bejesus of everything I find useful, because invariably, if I don't, I want to read it again and can't find it.
|
|
#
¿
Sep 14, 2013 17:06
|
|
|
To reiterate what Suspicious Dish said: this is screaming for a "card" grid interface with images. Have a toggle between a list view and that. \/\/ check your PMs! Lumpy fucked around with this message at 18:47 on Sep 19, 2013 |
|
#
¿
Sep 19, 2013 14:36
|
|
|
pipes! posted:Here is a nice post about the "Dribbblisation of design", discussing both how echo chambers are dangerous places, and it tends to produce things that look pretty, but don't function well: No way dude. My UI is awesome if 8712 people clicked a button liking that square image showing a crop of part of a button. That article is a very good read. I find good stuff (like that!) to read here very frequently, and hopefully others will too: http://sidebar.io/
|
|
#
¿
Sep 26, 2013 02:57
|
|
|
jackpot posted:Fourth link down there's an article about Flexbox, and everybody needs to read it because holy poo poo is this gonna be fun when it's fully supported (which it will be, as soon as IE11 rolls out). We had a meeting about this a month or so back, it's pretty drat slick. Sticky footers, input styling, vertical centering...all kinds of poo poo we've been hacking for the past eight years is gonna be a whole lot easier. I think you meant: "..which it will be, as soon as IE11 rolls out, and it's widely adopted, which will be several years later." 
|
|
#
¿
Sep 26, 2013 22:06
|
|
|
OtherworldlyInvader posted:I wasn't expecting anyone would spend the time to wade through the jumbled mess of HTML and CSS I have there! Its pretty much the result of a combination of my inexperience, changing my design a bunch of times, experimenting with new ideas as I think of them, big gaps between working on it, and not having spent any time cleaning up. I expect I'll have to re-write everything from scratch to fix it, but I figured it would be best to get the visual aspects of the design figured out first. I'll work on implementing those suggestions next time I'm at work. Here's Skiant's markup with just a few CSS rules. I'm by no means saying your page should look like this, but you should always start with minimal markup like his, and then the barest minimum of styling to make things usable. This page is from a UI perspective, "complete". Navigation looks like navigation and tells them where they are without being distracting, the header is visually distinct from the content, and the text is legible and easy to read. Your graphic design should complement a base like this, rather than "pretty first", especially when you are just getting started.
|
|
#
¿
Mar 19, 2014 18:17
|
|
|
OtherworldlyInvader posted:Its been a while, but I've updated my site again based off the feedback from here. Much improved, but I personally prefer the basic version. The bubble buttons visually and physically disconnect themselves from the rest of the page, where in the basic version, they act almost like tabs. Try flipping the active / inactive colors so the active one merges with the main content area and reinforces the users sense of place. I'll take a look on something other than my iPad to check out your markup and so on, but you've done a nice job.
|
|
#
¿
May 3, 2014 03:48
|
|
). I also used <section> instead of a <div>, since as near as I can tell from the vague definition that's the semantic tag most appropriate for the content I have in it.
|
codyclarke posted:I'd love to get some thoughts on the design of my movie blog, Smug Film. It's been around since January 2013, so I've been staring at it since then, and as such, can't really look at it objectively anymore. I'm curious how well everything looks and feels and reads to a new visitor. Overall I like it, but I know that some tweaks could make it better. I'd like to know what areas might feel confusing or awkward or distracting. We have a ton of content—over 200 posts, averaging at about 1000 words each—and I'd like the site to be a place someone could kill a lot of time reading pieces. Just a quickie, because I'm on my phone, but look at the site in a phone. Your navigation is illegible, bylines are illegible, and your body copy is very hard to read. Body copy should be at least 16px on the web. Overall though, the site works pretty well: your content is front and center, and nothing makes me cringe, which is rare.
|
|
#
¿
May 10, 2014 13:22
|
|
|
codyclarke posted:Thanks, great point. We'll start working on building a good mobile site soon. You mean "making your existing site responsive." At least, that's what you hopefully mean...
|
|
#
¿
May 11, 2014 03:18
|
|
|
zfleeman posted:How am I doin'? You are using a monospaced font for your body copy. Do not do that. Monospaced type is harder to read that proportional fonts, and that's why 99.9999% of every book, magazine, well-designed website, etc. does not use monospaced body copy. Line lengths are a little long, but not too bad, if you upped the font size to something more legible like 16px, it would be just about right. It seems some of your posts lack titles, so the only visual cue that you are in a new post is the smallish date block, which you may want to address. All in all though, it's simple and doesn't make me want to die when I visit the page, so it's better than most websites =)
|
|
#
¿
Aug 4, 2014 14:38
|
|
|
sim posted:Thanks! The feedback really helped. I stole the full-width image+caption design from Medium. Actually, I realized I'm basically trying to duplicate Medium, on Wordpress. I also put one ad back in, at the end of the post, using responsive Adsense. Look much better. Now change your link decorations so they don't look like somebody is pointing out spelling errors. May I suggest this: code:Then do something cool like one of these because why not? http://tympanus.net/Development/InlineAnchorStyles/
|
|
#
¿
Aug 29, 2014 18:06
|
|
|
zfleeman posted:I am just plain goofin' with Bootstrap on my blog. I threw out a lot of the old style, and pretty much filled my not-very-formatted-at-all text, video and photo posts into a grid. If you poke around the rest of my website, you'll get an idea for the style (or lack thereof) that I'm going for. Whitespace. The odd (to my UI guy mind) lack of title and meta info to the right means the column of text reads as one big thing. Without changing layout or content, whitespace is going to be about the only thing you can do. Add something like 5em margin-bottom on .row (since your posts don't have their own class, this might mess up other things, so add a class to your posts!) and see what it looks like, then adjust.
|
|
#
¿
Dec 5, 2014 18:53
|
|
|
awesomeolion posted:Hello everyone! I would really appreciate some feedback. I am a newbie trying to get into freelance and I recently designed and developed my portfolio site. The goal is to instil a sense of web design and development competence when potential freelance clients visit my site. I am old. This means my eyes are not what they were back when I was your age. I have a very, very hard time reading your copy for two reasons: 1. It's too small. Your primary content shouldn't be set less than 16px unless you have a really good reason to do so. 2. The typeface you chose is a very bad choice for body copy. It's thick characters make reading it an effort, which is compounded by it's small size. You have chosen two "headline" fonts, when you want a headline font and a copy font. kedo's suggestion of Open Sans is a solid one. Also seconding the "why is it so skinny" comments. Your line-lengths are too short for no reason! I tend to give my content wrappers a max-width that will keep the line lengths for getting past three alphabets wide, but other than that, let it size to the browser window. Then you are a good chunk of the way to responsive and can tweak things when they start to look "weird" as you shrink the window down. Not a bad site, by any means, but really think about typography, and think of us old people! awesomeolion posted:
Call an auto repair shop and say "ignoring what's wrong with my car or what kind it is, how much will it cost to fix it?" That's the answer to that question
|
|
#
¿
Apr 10, 2015 16:13
|
|
|
The Dave posted:Yeah that's really just you dude. Gmail is fine. Yeah, gmail is absolutely okay. AOL or Hotmail on the other hand....
|
|
#
¿
Apr 11, 2015 13:11
|
|
|
Pfox posted:Intro Going to start with this one. Think about the humans who got here. How did they get here, and why did they come here? Likely there are two use cases: 1. Someone followed a link and wants to learn about the game 2. Someone who plays the game needs to log in. Right now this page doesn't let #2 do this w/o extra clicks. Why isn't there a small login form at the top? As for #1: The carousel is awful. It's too busy, visually distracting, and offers little actual content. The copy is "meh". The rest of the page looks like a bland phone company or marketing site or something. Does this page look fun? Nope. So I'm expecting a poorly designed, bland experience from your game. This is probably not what you want. Grab me. Sell me your game in one sentence. One bigass sentence that tells me the essence of your game. Have an image, probably as a background the giant sentence sits on, that captures the "essence" of your game. It's probably not a screenshot, as your screenshots are not sexy (and that's Okay!). Do a gogole image search for "space battle". That's what you are selling: the idea of awesome epic battles. If you grab me, I'll scroll down to read the minimal copy you have describing a bit more of what to expect when I sign up and a screenshot or two. I'll then fill out the signup form just under that. Don't make me work to sign up. So three sections on that page: Grab me. Hook Me. Sign me up. Hire a designer!
|
|
#
¿
Apr 24, 2015 17:53
|
|
|
Pfox posted:Great advice, thanks very much! Some designers will work for free / cheap if they think your project is fun. Hell, I'll mock something up for you this weekend! (I like space games.)
|
|
#
¿
Apr 24, 2015 18:07
|
|
|
The Dave is wise. What do your users want? To get a cab. Anything that isn't helping them do that is in their way. Here's a 5 min iPhone5 screen mockup that shows a "not perfect but pretty decent" version of your content. I know exactly what I can do (get a real cab!) and I clearly see how to go about it (call that number or use that form) all on a single iPhone screen. It's not going to win any design awards, but it's something that I think is a good starting point. If I need to read more about you or whatever, I'll scroll down.
|
|
#
¿
Jun 29, 2015 02:54
|
|
|
|
| # ¿ May 21, 2024 00:43 |
|
|
painted bird posted:Is it all right to ask for typography advice in this thread or should I go somewhere else for that? I need help picking out fonts because I'm a font scrub. Pro Tip: pick good ones 
|
|
#
¿
Jul 20, 2015 21:07
|
|