The Web Design Critique Thread

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread

ZeBourgeoisie: Aug 8, 2013; THUNDERDOME
LOSER

Okay, I'm quite new to the world of web design, so my sites so far are horrible. The first website I've ever made for an actual client is a free website for a Christian preschool being built in Brazil but funded by my city's church. I worked face to face with my clients, a polite woman who spoke fluent English and a man who didn't speak a lick of English.

We (me and the woman) worked closely on this project, but I'm dissatisfied with the results.

https://www.nainter.com

The tables broke, the site loads like a slug, and I've become disenchanted with this whole webdesign path I'm starting down. The clients where pleased enough, and said they'd recommend on my professional attitude alone, but I just feel like a complete idiot now. It's funny, at first I felt invincible, like I knew what I was doing, but now I'm doubting my every decision in life thus far.

Now, I don't have a formal education. I'm mostly self taught via the internet, books, and pay-to-view videos. Is it worth it to continue my education to a higher level, or should I just abort this career path?

Sorry for ranting I'm just in a slump. :smith:

Well, anyhow, do you fellows have any tips on future endeavors? I abused tables a lot, and I'm paying for it with how they broke. Right now I'm trying to find more charities to build websites for but I'm afraid this abomination is going to stain my reputation.

ZeBourgeoisie fucked around with this message at 06:02 on Aug 29, 2013

# ? Aug 29, 2013 05:59

Adbot: ADBOT LOVES YOU

# ? Apr 25, 2024 12:55

MiddleOne: Feb 17, 2011

I've got no words... So many differently named divs that seem to do nothing. :psyduck:

Well first thing is obvious, don't use tables for content. No scratch that, don't ever use tables. Almost anything a table can be used for a box will do better. The basis of any main-content box right now is a fixed width, automatic or 100% height and margin: auto; to stick it in the middle.

You're also having some very volatile combinations in your css. Using em for borders while making almost everything float is begging for the layout to break. Using the em value for anything beyond fonts while not doubling down on it and using it for everything is begging for trouble, stick to static values. Also stop putting borders on everything, it looks like poo poo and will make adjusting your css a living nightmare as the border increases the fixed width of any box you put it on.

Also start formatting your CSS properly and stop having separate classes do the same thing. You have like 5 classes who all just set the background-color of their content to the exact same color. Re-use your divs. Proper CSS formatting looks like this btw and makes the CSS so much easier to read.

a {
example: test;
size: #;
}

Also the links in the header are dead.

I would tell you to eat poo poo and die but just about everyones first site made from scratch looks like that. Getting used to making layouts, bending CSS to your will and making 2-3 colors and simple shapes into something that looks good takes time and experience. If I were you I would start completely from scratch to try to make an entirely new site for the charity and then present it to them as an alternative for free. Leaving shoddish work behind will insure they and anyone they talk to will never want your services again.

The best tip I can give you regarding learning is to look at what works for other sites and why it works. Also get acquainted with photoshop and the concept of mock-ups, it will make your work much easier.

# ? Aug 29, 2013 07:20

ZeBourgeoisie: Aug 8, 2013; THUNDERDOME
LOSER

Xoidanor posted:

Thank you, sir (or madam).

My favorite advice is mockups. I'm going to certainly try that one. Yeah, I heard of them before, but I always thought it was a wordpress thing for some stupid reason.

# ? Aug 29, 2013 12:27

Authentic You: Mar 4, 2007; Listen now this is your
captain calling:
Your captain is dead.

ZeBourgeoisie posted:

Okay, I'm quite new to the world of web design, so my sites so far are horrible. The first website I've ever made for an actual client is a free website for a Christian preschool being built in Brazil but funded by my city's church. I worked face to face with my clients, a polite woman who spoke fluent English and a man who didn't speak a lick of English.

We (me and the woman) worked closely on this project, but I'm dissatisfied with the results.

https://www.nainter.com

Welp. You have your work cut out for you. I agree with Xoidanor's advice. The whole structure is a mess and never use tables ever*. I don't even know how you'd fix some of the positioning issues without just starting over. Some additional pointers: Never ever center align body text. Also get rid of that rainbow gradient thing and never use it again on anything ever. I don't think I've seen something like that on a website since 1998 and it looked horrible and tacky then.

For this particular project, you might want to look into utilizing an HTML/CSS website template. These templates will have the HTML structure and a stylesheet already set up, so all you need to do is plug in your own content and make modifications (add your own header image, change the fonts, etc). You can let the template take care of more difficult stuff like positioning, and you can focus on the stylistic side of things.

On looking at other sites, use Chrome Dev Tools/Firefox Firebug and check out all the websites you visit so you can get an idea of how they are constructed. Reverse engineering websites and modifying existing designs (Wordpress themes, in my case) was how I got my start, and now I have a job doing web-based UI/UX design and front-end development. I went to school for design and picked up the web development on my own. Learning it is quite doable. The best way to do that is to actually go make websites. It's okay to utilize templates and such. And throw out/un-bookmark any books or online resources that led you down the erroneous path of using tables for layout.

*Tables do have their (singular) use. Tables are only ever appropriate for tabulated data. They were never intended to be used for layout and now that we have CSS, they should never be used for layout or anything other than containing data that belongs in tables/spreadsheets. I guess I'm saying this because the app thing I'm working on utilizes a lot of tables for displaying event logs and stuff so I've been thinking about tables a lot.

# ? Aug 29, 2013 17:13

ZeBourgeoisie: Aug 8, 2013; THUNDERDOME
LOSER

Authentic You posted:

Yeah, I got most of my books from Half Priced Books, which was probably a bad idea thinking about it. They must have been old as hell because they said the box attribute of CSS was not reliable and that tables where still the standard.

The lady actually specifically wanted rainbow effects, though.

# ? Aug 30, 2013 02:40

Authentic You: Mar 4, 2007; Listen now this is your
captain calling:
Your captain is dead.

ZeBourgeoisie posted:

Yeah, I got most of my books from Half Priced Books, which was probably a bad idea thinking about it. They must have been old as hell because they said the box attribute of CSS was not reliable and that tables where still the standard.

The lady actually specifically wanted rainbow effects, though.

Oh wow, those books must be loving ancient. Tables haven't been standard for layout for like ten years or something, and I don't think I've ever actually used the CSS box attribute (or seen it used), and CSS is ubiquitous and perfectly reliable these days. Even my CSS book from 2006 only ever addresses tables in the context of tabulated data. The one thing about web development books is that they get dated really quickly. You're better off using online resources that update themselves in a timely manner. Get rid of those old books. If you do better having a physical book for learning (I definitely do), make sure you have the latest editions.

As for the rainbow effect... I've done plenty of design projects were I've had to save clients from themselves and their horrible design ideas, especially if said horrible idea makes me look like a bad designer. I suggest compromising by making a cute rainbow-colored title in Photoshop and placing it as an image. Nothing wrong with the rainbow idea itself necessarily, it's just really bad-looking and dated rendered in a browser.

# ? Aug 30, 2013 04:03

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

ZeBourgeoisie posted:

https://www.nainter.com

I hate recommending this because I hate frameworks, and I don't think that, in the short term, they will help you learn. BUT. You seriously need to look at something like Bootstrap, Zurb Foundation or PureCSS (Bootstrap being the most popular, and the one with the largest ecosystem). Pick one of them, and use it to build anything that goes live. The frameworks are designed so that developers [who may have little to no design training] can build quite good looking sites quickly and easily; it's analagous to your position, where, as it stands, you do not have the skills in place. If you're building anything that people will see, and that has even marginal importance, it shouldn't be going live looking like that. Using a framework means, generally, that things will just work. You can concentrate on improving layout, use of colour, typography and all that jazz.*

For learning, practise building sites from scratch. Write them entirely without the use of the framework. But try to understand why frameworks do things, and what their limitations are. The developers of them are good and know what they're doing, but it's nearly impossible to reduce design to a systematic level: if you stick with it, you'll get a lot better, and you'll want to dump them entirely.

*Also, if your client liked the current site, they will poo poo bricks if you provide them with a simple fameworked site that is consistent, nicely structured and magically works everywhere.

# ? Aug 30, 2013 13:44

pipes!: Jul 10, 2001; Nap Ghost

It's actually really loving difficult to "get" the separation between content and form for web design when first starting out, and the move towards responsive designs definitely ups the complexity. I try to keep tabs on "beginners guide"-type sites, since they tend move closer to the pace of the industry than printed books. I quite like this site for starters:

http://learn.shayhowe.com/html-css/

Followed by using the Mozilla Developer Network (MDN) as a reference (for faster searching use a Google search string like "mdn div tag" or the like):
https://developer.mozilla.org/en-US/

I'd shy away from using W3Schools as a reference, even though they're usually the first search result, because a lot of the information is contradictory, buried, out-of-date, or just simply presented counter-intuitively (plus a lot of spammy, sketchy SEO practices).

If you really do want to peruse web design/development, I'm echoing what people are recommending here: start from scratch, keep at it, and read everything you can get your hands on. It's actually a pretty good time to start, as a lot of the technologies that build the web have normalized, and there are now best practices out there that you can refer to to ensure at least a modicum of compatibility.

# ? Aug 30, 2013 15:14

WaffleSteak: May 1, 2004; damn honky

ZeBourgeoisie posted:

https://www.nainter.com

Sketch*

Everyone above me has great advice but you could probably also incorporate some sketching into your design process as well. Since you're new to design/web design I think sketching may help you fully flesh out all the problem solving for a website before you jump into somewhat unfamiliar tools (photoshop, sublime text, etc.) and get stuck. By sketching you can rapidly ideate design problems without wasting time looking at a blank photoshop file or empty text document. If you sketch the general layout for each page you can also end up using the sketch as a blueprint when constructing it in PS or coding the site up. (You can even label the drawing with the html structure to help as an outline before you even start coding.)

When I'm designing/coding any site (even small ones), I always start out with pencil and paper. Sketching is cheap, quick and easy to do, you really don't have to be an artist for this process, and you can do it pretty much anywhere. If you're stuck and don't know what to even start drawing, go into inspiration gathering mode.

Write out words that describe what you'd like the site to look like i.e. Clean, Professional, Trustworthy.
Now start gathering examples of sites that convey these words well.
Collect color palettes and typefaces that match the words.
Start sketching the basic things your site needs to perform it's goal. Put as many ideas down as possible.
Take a step back, go do something else and then come back to your sketches.
Cross out ideas that won't work and refine what you have.
Keep going until you feel confident you've found the right solution to your client's problem.
Go make it!

*Your first idea is not necessarily the best idea. Don't get too attached to your initial drawing it might not be the best solution.

p.s. You'll definitely want to learn about grids as well. Khoi Vinh has a great book on it specifically for web design: http://grids.subtraction.com/

# ? Sep 3, 2013 18:16

Mewnie: Apr 2, 2011; clean dogge
is a
happy dogge

Xoidanor posted:

a {
example: test;
size: #;
}

I'm getting into HTML at school and this is really how it's done? I find it really hard to read and when coding it just looks really messy to me :shrug:

Maybe I'm broken, but I've formatted it like so:

code:

a	{ example: test;
	 size: #; }

Using tabbing to keep things seperated and easier for me to read. Unless having tabs like that is bad. I know semantics is being heavily stressed in class.

# ? Sep 3, 2013 23:13

pipes!: Jul 10, 2001; Nap Ghost

Mewnie posted:

I'm getting into HTML at school and this is really how it's done? I find it really hard to read and when coding it just looks really messy to me
Maybe I'm broken, but I've formatted it like so:
code:
a	{ example: test;
	 size: #; }
Using tabbing to keep things seperated and easier for me to read. Unless having tabs like that is bad. I know semantics is being heavily stressed in class.

Xoidanor's sample is probably the most common style you'll come across on tutorials, etc. What you prefer looks really weird to me personally, but unless you're writing something that someone else has to work with, do whatever works best for you, especially if it's CSS that's going to get minimized before deployment anyways. For example, the house style I've developed over time is along the lines of:

code:

.apricot, 
.elderberry 
{
    box:          value;

    border:       value;

    background:   value;

    text:         value;

    other:        value
}

With relevant attributes listed in each "section" in alphabetical order, i.e.:

code:

/* I am a button used for ordering lard via cannon */
.button
{
    display:          block;
    float:            right;    /* A note about why I did this, if it's weird */
    height:           60px
    width:            100px

    border:           1px solid red;
    border-radius:    12px;

    background:       pink url('../images/foo.png') no-repeat center center;
    box-shadow:       0px 3px 3px 0px #000;

    color:            white;
    font-weight       bold;

    cursor:           pointer;
}

A little more upfront work, yes, but I find it helps you build more discrete, modular blocks of page elements, and then quickly get the gist of and edit them down the line. Also remember to comment liberally! I don't know about you, but I can barely even remember what I had for lunch two days ago, much less the innermost secrets of a two year old site.

pipes! fucked around with this message at 23:54 on Sep 3, 2013

# ? Sep 3, 2013 23:35

tarepanda: Mar 26, 2011; Living the Dream

I indent-align the attributes, but not the values themselves. I find that indenting the values and lining them all up looks nice, but makes it harder to trace which value goes with which attribute when you have a lot going on.

# ? Sep 3, 2013 23:49

WaffleSteak: May 1, 2004; damn honky

Mewnie posted:

I'm getting into HTML at school and this is really how it's done? I find it really hard to read and when coding it just looks really messy to me
Maybe I'm broken, but I've formatted it like so:
code:
a	{ example: test;
	 size: #; }

I usually write out css like:

code:

a { 
     font-size:12px;
     color:#fff; 
}

Another dev at my old job used to single line his css which was easy for him I guess...

code:

a { font-size:12px; color:#fff; }

Really just comes down to personal preference, and the way you work best with it but the first example is pretty universal. UNLESS you're working on a team of other developers where you'll want to write in the same format as everyone else.

# ? Sep 4, 2013 00:12

Oh My Science: Dec 29, 2008

Mewnie posted:

code:
a	{ example: test;
	 size: #; }
Using tabbing to keep things seperated and easier for me to read. Unless having tabs like that is bad. I know semantics is being heavily stressed in class.

Don't ever do this, I along with every other person who writes good CSS will murder you in your sleep.

Always assume other people will have access to or be editing your code, write ~~CSS~~ any code with others in mind. This means following standards as much as possible, writing comments, and encouraging others to do the same. Starting out with good habits is easier than fixing bad ones.

If you need help use tools like http://procssor.com/process or http://csscomb.com/ to make your code more legible.

The two examples used by WaffleSteak are great. If the css element has two or less rules a single line is A OK.

Coding questions belong in another thread.

Edit: If you are using Sublime Text, Textmate, or Chocolate.app they have support for CSS Prettify plugins and CSS Comb.

Oh My Science fucked around with this message at 00:27 on Sep 4, 2013

# ? Sep 4, 2013 00:21

Robot Arms: Sep 19, 2008; R!

pipes! posted:

With relevant attributes listed in each "section" in alphabetical order

I'm glad I'm not the only one who alphabetizes my CSS. I also use an index at the top of my CSS files to help me keep everything in sections. Here's what it looks like on Lawyerist.com (a WordPress site):

code:

/* INDEX

LAYOUT
RESPONSIVE ELEMENTS
RESETS
BASIC TYPOGRAPHY
index.php STYLES (FRONT & ARCHIVE PAGES)
single.php & page.php STYLES (SINGLE POST PAGES & PAGES)
page.php STYLES (PAGES)
HEADER
MENU
CONTENT
    POSTS
    BUYER'S GUIDE
    PAGENAV
    PAGENUM
    COMMENTS
    RELATED POSTS
SIDEBAR
	SIDEBAR POPULAR POSTS
FOOTER
FORMS
    BUTTONS
    GRAVITY FORMS
USEFUL STUFF

*/

# ? Sep 4, 2013 03:16

Ron Don Volante: Dec 29, 2012

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.

(I know last time somebody recommended I ditch the dark borders, but I just couldn't get comfortable with all that conspicuous blank space on the sides).

# ? Sep 11, 2013 18:38

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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.

(I know last time somebody recommended I ditch the dark borders, but I just couldn't get comfortable with all that conspicuous blank space on the sides).

My 30 second review:

Header is way too tall.
No 'Contact Us' link or contact info anywhere near the top of the page. This is a cardinal sin.
That "The #1 Source... " pill should go away. It's not well designed, and you already have a tagline up top there in the header.
I get that you are selling silver, but the color scheme is too muddled.
The 'Click to Read More About Us' is poorly placed, inconsistent with the rest of the site, and is redundant. There's an 'about us' link in the nav
Some things have square corners. Some have rounded corners... why?
The background should either be darker or much lighter.
The image of the pile of coins should go away: you've already told me many times you sell coins.
Not sure if you intend that section under the header to be a graphic, but the way it's scaled when you resize the browser down makes it illegible on mobile devices.

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. :downs:

Only registered members can see post attachments!

# ? Sep 12, 2013 04:09

Ron Don Volante: Dec 29, 2012

Thanks for the reply, that's actually extremely helpful. As you can probably tell, I don't have much web design experience so I was pretty much just ripping off this site. I'll get to work on your suggestions and post again when the site's updated.

# ? Sep 12, 2013 04:35

Robot Arms: Sep 19, 2008; R!

I wouldn't use that site for a basis. Since it looks like you are on Shopify, why not use one of the built-in themes? There are some really beautiful examples in Shopify's gallery: http://www.shopify.com/examples

There's no reason to build a mediocre site from scratch when you can just turn on a template and get a professional-looking site.

# ? Sep 12, 2013 20:31

MiddleOne: Feb 17, 2011

Might as well look at the professional alternatives if you're planning on using a template. Free templates can easily be modified into something great with the right know-how but without it you're better off paying for the real deal.

For example some quick googling gave me:

http://themeforest.net/item/humbles...hor=humblespace

http://themeforest.net/item/eighty-...djentertainment

http://themeforest.net/item/pandora...hor=Planetshine

# ? Sep 12, 2013 21:23

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

^^ I've used themeforest, but never with anything built in shopify. Can you do that?

Seriously, any of those shopify templates would be better than what you can build yourself (not knocking you - they've just been done by people with more experience), and some of them look like they'd be pretty easy to customize for yourself. For what you're selling, the hard graft, parallel, spring '12, and tattly all look like they'd fit what you're doing pretty well.

# ? Sep 12, 2013 21:38

Ron Don Volante: Dec 29, 2012

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?

I actually am already using a Shopify template, I had just mutilated it beyond recognition. Most of the Shopify templates seem to be more for artsy, Etsy-type stores aimed at young people, whereas my target demographic is pretty much white males age 40-60.

I tried to follow most of Lumpy's suggestions, but Shopify seems to insist on slides taking up the top of the page. Thoughts on the color scheme now? I think black slides make a better contrast with the silver coins than would white slides.

# ? Sep 13, 2013 00:35

Yip Yips: Sep 25, 2007; yip-yip-yip-yip-yip

It's serviceable. I'd say the weakest parts right now are the logo/tagline and the text in the slides. Neither are web design issues, strictly speaking.

I wouldn't mind seeing a color in there but understand that I'm talking something subtle. Sometimes when I say that people hear "NEEDS LOUD COLORS" and that's the opposite of what is good.

Yip Yips fucked around with this message at 07:16 on Sep 13, 2013

# ? Sep 13, 2013 07:11

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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?

I actually am already using a Shopify template, I had just mutilated it beyond recognition. Most of the Shopify templates seem to be more for artsy, Etsy-type stores aimed at young people, whereas my target demographic is pretty much white males age 40-60.

I tried to follow most of Lumpy's suggestions, but Shopify seems to insist on slides taking up the top of the page. Thoughts on the color scheme now? I think black slides make a better contrast with the silver coins than would white slides.

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: Dec 29, 2012

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?

The coins' darker hue derives from tarnishing (Peace dollars also tend to have a darker luster because of the Mint's chemical treatment of the planchets). The 1896 Morgan that's featured on the front page provides a good example of what a typical silver dollar would look like if it was minted today. The more colorful coins have something called toning, which is basically a catch-all term for any metal discoloration resulting from natural chemical reactions (usually sulfur reacting with the silver).

Ron Don Volante fucked around with this message at 17:59 on Sep 13, 2013

# ? Sep 13, 2013 17:56

jackpot: Aug 31, 2004; First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

Ron Don Volante posted:

I'm still unhappy with the slide font though�are there any nicer fonts that are widely-used in web design?

I'm not sure I understand, because your slides are all images, like this is literally slideshow_1.jpg:

Which I can understand why - using images is a lot easier for you than formatting those slides to have text on the left, photo on the right - but since they're just images, you can go hog wild using any kind of font you want, you don't have to worry about web-safe fonts*.

* Nobody does, anymore, but lets save that lesson for another day.

# ? Sep 13, 2013 20:33

Oh My Science: Dec 29, 2008

I'm not a huge fan of the solid black background on all your images, including the header.

# ? Sep 13, 2013 21:10

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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?

The coins' darker hue derives from tarnishing (Peace dollars also tend to have a darker luster because of the Mint's chemical treatment of the planchets). The 1896 Morgan that's featured on the front page provides a good example of what a typical silver dollar would look like if it was minted today. The more colorful coins have something called toning, which is basically a catch-all term for any metal discoloration resulting from natural chemical reactions (usually sulfur reacting with the silver).

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 :v:

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.

Only registered members can see post attachments!

# ? Sep 13, 2013 21:18

Ron Don Volante: Dec 29, 2012

Oh My Science posted:

I'm not a huge fan of the solid black background on all your images, including the header.

Alright here's a side-by-side comparison:

While the transparent backgrounds may look better from a design perspective (it definitely looks more professional to me), I'm still leaning towards black because it seems to bring out the luster of the coins more. Plus transparent backgrounds mean I have to mess around with the magic wand tool.

Lumpy posted:

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.

Is there a good free image-editing program that makes this sort of thing easy? I've been working with Paint.net but I'm not sure if it really has the capability to do that.

# ? Sep 14, 2013 03:16

Oh My Science: Dec 29, 2008

Ron Don Volante posted:

Alright here's a side-by-side comparison:

What about a light grey? Maybe the same color as the background of the tags.

I get what you're saying, but the contrast just seems off with solid black.

# ? Sep 14, 2013 03:39

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Ron Don Volante posted:

Is there a good free image-editing program that makes this sort of thing easy? I've been working with Paint.net but I'm not sure if it really has the capability to do that.

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: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Just so you're aware, Paint.NET Is not MS Paint. Paint.NET is as fully-featured as GIMP is.

# ? Sep 14, 2013 04:49

MrSaturn: Sep 8, 2004; Go ahead, laugh. They all laugh at first...

Suspicious Dish posted:

Just so you're aware, Paint.NET Is not MS Paint. Paint.NET is as fully-featured as GIMP is.

Well, that's a bit of an overstatement.

Ron Von - I think what we're all (not exactly) dancing around here is that you're probably better off doing this with HTML rather than just images. Some basic HTML/CSS tutorials can help you with that, but there is definitely a learning curve.

# ? Sep 14, 2013 05:00

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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

Yip Yips: Sep 25, 2007; yip-yip-yip-yip-yip

Ron Don Volante posted:

I don't mind the coins on black this way because for some reason I'm familiar with them being presented this way. Maybe it's reminiscent of black felt lined cases or something.

I'd actually try some sort of felt background just to see what it looks like, but it might not work and if it looks fake in any way absolutely don't go with it.

You know more about coins than I do, you tell me.

# ? Sep 14, 2013 07:33

Robot Arms: Sep 19, 2008; R!

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.

Robot Arms fucked around with this message at 13:53 on Sep 14, 2013

# ? Sep 14, 2013 13:51

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

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

pipes!: Jul 10, 2001; Nap Ghost

Lumpy posted:

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.

Pinboard is fantastic for this. Daily reads, converter resources, reference material gets bookmarks, theory and design ephemera gets rigorously tagged and saved externally. It's saved my bacon more times than I can count, and also keeps your bookmarks streamlined for daily use.

# ? Sep 14, 2013 18:05

Ron Don Volante: Dec 29, 2012

I ended up going with a slightly lighter black�a little less harsh than before but still dark enough to bring out the coins' color. A big thanks to everybody who gave me feedback on my site. It's not perfect by any means, but I think it's looking a lot better than what I came in here with.

# ? Sep 16, 2013 23:03

Adbot: ADBOT LOVES YOU

# ? Apr 25, 2024 12:55

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Lumpy posted:

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.

Evernote is great for this. Especially since their new Chrome web clipper is pretty amazing, and unlike bookmarks you don't have to worry about the site going away.

Ok, now I'm looking for some critiquin'.

http://www.trailerthingy.com

I'm no design guy, I don't enjoy design, I think CSS is a poorly designed POS, I spend as little time doing it as possible. Thus I'm using Bootstrap.

Maybe you should first look at the url before you read my notes for an unadulterated look?

Some notes:

My goal is a monochromatic and very minimalistic look, but the color is just default Bootstrap...I have no allegiance to it.
I realize About and Contact don't do anything yet.
I'm not entirely happy with the layout of stuff within the collapsed sections, but I don't know of a better way to present the info.
Do I need some small amount of text in the header area or maybe below it describing what this is, or is it just apparent?
Any other ideas? I was thinking about a block at the top with a horizontal arrangement of movie posters linking to the most popular movie trailers, but I'm also thinking that might conflict with the monochromatic and minimalistic goal.
Click on the "Also show featurettes, clips, etc" link. Does that transition feel good?
Should I add a plus sign or something to indicate the divs are expandable?

# ? Sep 18, 2013 21:29

The Something Awful Forums > The Finer Arts > Creative Convention > The Web Design Critique Thread

«‹›6 »