Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Locked thread
Oh My Science
Dec 29, 2008
1. The trailer/teaser column seems unnecessary, removing it would leave more room for titles. This may prevent titles from taking two lines.

2. You need some kind of header up top explaining what trailerthingy is, and how it can help the user. A callout. In order to make a better suggestion we need to know more about your intentions with this website. Are you getting people to subscribe? Why should people view trailers on your website and not elsewhere? etc.

3. I agree that the way things are organized in the dropdowns isn't ideal, I'll draw something out later if I think of something.

4. The rows should have alternating colours, just a light grey or something.

Edit: I like his picture view idea vvvv

Oh My Science fucked around with this message at 22:47 on Sep 18, 2013

Adbot
ADBOT LOVES YOU

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
I wouldn't put each trailer in an accordion. I'd just keep them all expanded by default so that users can scan by pictures.

Perhaps also look into doing a picture grid layout similar to Netflix or iTunes album view?

The button for switching filters shouldn't erase the existing results items. Perhaps put up a tiny spinner next to the button itself while you retrieve things, then fade the ones that are different away? Or perhaps do the filtering entirely on the client?

MiddleOne
Feb 17, 2011

EDIT: Take note of the picture idea ^^^^

I would definitely recommend adding some color immediately. As monochromatic is your goal I would recommend looking for a shade of blue similar to your font-color and then put that color as background for your header or at least your footer. Bootstrap does that kind of look very well so that's what you should be going with. Also set your body elements background-color to something that isn't the standard #fff, it distracts from your actual content which it shouldn't since it's the background.

Also it's not apparent at all at the moment that the rows are even expandable, you need to make it more obvious by either having some rows already expanded or an icon being present.

But most important of all since you're using bootstrap, turn up the width of your content! Bootstrap is one of the best if not the best framework for creating a site with responsive content. There's absolutely no reason to have the width of your content so low. Add at least another columns worth of width.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
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

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Awesome ideas, all. I'll work on implementing some of these suggestions...

putin is a cunt
Apr 5, 2007

BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Thermopyle posted:

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:
  1. My goal is a monochromatic and very minimalistic look, but the color is just default Bootstrap...I have no allegiance to it.
  2. I realize About and Contact don't do anything yet.
  3. 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.
  4. 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?
  5. 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.
  6. Click on the "Also show featurettes, clips, etc" link. Does that transition feel good?
  7. Should I add a plus sign or something to indicate the divs are expandable?

This is an example of "too minimal". Nothing draws focus, leaving the visitor with no indication of what they're supposed to click. There's nothing indicating that you can actually expand each row by clicking on them. The headings ("Release date", "Director" etc) look too similar to the content, maybe change the font or uppercase them?

Edit: also I'm a bit confused by the link at the top right, it says "Also show featurettes, clips, etc", but it doesn't seem to show more items, the list still seems about the same length. The trailer for "One Chance" for example, disappears.


I just wanted to leave my two cents on this. I think you're trying waayyyy too hard with the web site. Remember you're marketing your illustration abilities, not your web design abilities. By all means include some decorative illustrations if you want but you're turning your whole site into one big illustration, that's a baaaaad idea. Keep it simple, your current site: http://www.kodie.me/ is much more along the right track despite some very unfortunate colour choices. Stay the course though, you'll get it. Have a look around at other portfolio sites and notice how many of them are actually very very minimal.

putin is a cunt fucked around with this message at 07:39 on Sep 24, 2013

pipes!
Jul 10, 2001
Nap Ghost
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:
http://insideintercom.io/the-dribbblisation-of-design/

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

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:
http://insideintercom.io/the-dribbblisation-of-design/

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/

jackpot
Aug 31, 2004

First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

Lumpy posted:

I find good stuff (like that!) to read here very frequently, and hopefully others will too: http://sidebar.io/
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.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

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."



:cry:

pipes!
Jul 10, 2001
Nap Ghost

Lumpy posted:

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."

I don't know what's worse: a seven or so year wait for mass-adoption, or the gigantic pile of crappy polyfill js hacks that will be created to get it working in the interim.

Authentic You
Mar 4, 2007

Listen now this is your
captain calling:
Your captain is dead.

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:
http://insideintercom.io/the-dribbblisation-of-design/

This is a wonderful articulation about one of my biggest gripes in UI/UX. My favorite part about doing UI is solving problems and figuring out how to parse and manipulate data in meaningful ways and making a bunch of ugly sketches and HTML prototypes. My least favorite part is doing the graphic art part of it. I work on a piece of browser-based enterprise software and it's fascinating looking at competitors because none of them actually solve the problem effectively (it's the same as all those weather apps). In one case, the app is gorgeous, but all it does is present you with obscene amounts of data and barely does anything to help you actually figure out what that data means. I even told my boss at one point that an ugly interface that's good is miles better than a pretty interface that sucks. It's really easy to make an ugly but good UI look pretty (CSS fun time!), but it's really hard to make a pretty but crappy UI good (back to drawing board, recode the whole loving thing). The only reason we've even dealt with aesthetics at all at this point (early in development) is to make the software more visually appealing to potential buyers, but still, making it look good is secondary to making it work right.

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.

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 used it in production for 2 sites that went up several months ago, with zero complaints: audience for both is rich and youngish and trendy, and 99% of the traffic is from some combination of tablets/modern browsers/macs, and autoprefixer sorts out IE10. It is excellent, if unusable for more general use.

pipes!
Jul 10, 2001
Nap Ghost

RobertKerans posted:

I used it in production for 2 sites that went up several months ago, with zero complaints: audience for both is rich and youngish and trendy, and 99% of the traffic is from some combination of tablets/modern browsers/macs, and autoprefixer sorts out IE10. It is excellent, if unusable for more general use.

http://grooveshark.com/s/Man+Of+La+Mancha+The+Impossible+Dream/2pSWFR?src=5

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.
Eh, that's the music soundtracking the series of object-fitted html5 videos I have sitting pretty in their css grid layout positions on one of the sites. No probs so far!

Man_of_Teflon
Aug 15, 2003

I would love to get some critique of my e-commerce website - https://www.coldpressjuicers.net - both from design and customer use/layout standpoints. I have absolutely no web design experience, but the templates Shopify has at least gave me a decent starting point. I would also be happy to share any of the ideas and experience I've had that led me to make all the design decisions I've made so far.

The idea behind my website is that, in regards to juicing, there are a few different kinds of people entering the site:

Group A: People who don't know anything about juicing.
Group B: People who know enough about juicers in general to want one, but don't know what kind of juicer to buy.
Group C: People who know what kind of juicer they want and are just looking for a place to buy it.

I'm targeting the last two. I originally had a lot more information on my site for Group A people, but it all seemed to just get in the way of conversions for Groups B and C.

--

So, people enter my site in a few different ways:

1) Product listing ads on google. These are the ads that show the item and the price, pretty straightforward. These link directly to products, such as:

http://www.coldpressjuicers.net/collections/all-cold-press-juicers/products/omega-j8006-juicer
http://www.coldpressjuicers.net/collections/all-cold-press-juicers/products/omega-vert-vrt350hd-commercial-juicer
http://www.coldpressjuicers.net/collections/all-cold-press-juicers/products/tribest-slowstar-sw-2000
http://www.coldpressjuicers.net/collections/all-cold-press-juicers/products/kuvings-silent-juicer
http://www.coldpressjuicers.net/collections/all-cold-press-juicers/products/tribest-solostar-3-juicer (this one being an example of a product where there aren't a lot of pictures/video available)

These target Group C people since they are already directly at the product and just have to add it to the cart. Unfortunately, conversions haven't been too good with these.

2) Search ads on google/bing tied to searches for specific products. These link to landing pages featuring the product searched for, followed by copy. The copy briefly mentions why juicers in general are great, but is mostly about why cold press juicers are the best. Example landing pages:

http://www.coldpressjuicers.net/pages/kuvings-silent-juicer
http://www.coldpressjuicers.net/pages/tribest-slowstar
http://www.coldpressjuicers.net/pages/hurom-hh-premium-slow-juicer
http://www.coldpressjuicers.net/pages/green-star-gse-5000-elite-twin-star-juicer
http://www.coldpressjuicers.net/pages/super-angel-5500-all-stainless-steel-twin-gear-juicer (again a lack of pictures makes some worse)

These target people in Group C who need a little more reinforcement as to why they should buy a juicer and why this type of juicer is the best. I've been pondering replacing all references to generic 'cold press juicers' in the copy to the juicer featured on the landing page, but the problem is that the same copy is used on the homepage - see the following third path in.

3) Seach ads for 'cold press juicers' or similar generic terms, or facebook ads, and most other generic links in. These link directly to the homepage: https://www.coldpressjuicers.net

On the home page are, from top to bottom:
- a featured products slideshow with call to action
- free shipping/return policy promo images
- copy (that again briefly mentions why juicers are great but is mostly about why the kind of juicers I have are the best)
- another call to action
- another featured products list

This path is designed to target Group B people, hence the brevity of the copy content about juicing itself (I did just recently install click/attention tracking software though, and it showed that much more attention was directed to why juicers in general are great vs why cold press juicers are the best kind. So this may be a mistake...).

Anybody who wants more info about juicing can click on the blog (http://www.coldpressjuicers.net/blogs/news) link in the menu bar, but the idea is to focus most people on the 'BUY A JUICER' link on the menu bar.

--

Those who do click the 'BUY A JUICER' link on the menu bar are sent to the page that lists all the juicers I have: http://www.coldpressjuicers.net/collections/all-cold-press-juicers. I haven't set up this function yet, but there will be checkboxes on the left for people to select and sort the juicers - type (vertical, horizontal, twin gear), a certain manufacturer, all juicers below $300, etc.

This is a change from how I used to have it set up: the 'BUY A JUICER' link on the menu bar had a drop down menu with types of juicers, but this seemed to add hesitation as more people were then wondering what the different types meant. With the new checkbox system (that I'll have set up as soon as I have a night off... I promise!), people who know what the different types are can sort by type, while the people who don't know or don't care won't be distracted by that option.

I used to have product blurbs under each juicer in this view, but settled on leaving all the copy on the product page itself to encourage more clicking through to products, where the add to cart button is closer... good or bad decision?

--

That's all I've got to start... any and all advice will be greatly appreciated. Thanks in advance!!!

pipes!
Jul 10, 2001
Nap Ghost

Take the number of words you have on that site, and halve it. Then halve it again. People will never read that much about a juicer, much less things they actually passionately care about.

Oh My Science
Dec 29, 2008

Man_of_Teflon posted:

That's all I've got to start... any and all advice will be greatly appreciated. Thanks in advance!!!

Just a few quick comments while I'm at work:

1. In the main nav the first link "BUY A COLD PRESS JUICER" looks like an active link (styled differently from the others). What's the data look like for that? My first impression is that I'm already on that page, but maybe your data justifies the style change.

2. That's one giant wall'o text in the middle, not brief.

Man_of_Teflon
Aug 15, 2003

Oh My Science posted:

Just a few quick comments while I'm at work:

1. In the main nav the first link "BUY A COLD PRESS JUICER" looks like an active link (styled differently from the others). What's the data look like for that? My first impression is that I'm already on that page, but maybe your data justifies the style change.

I did just bold it last night to make it stand out... didn't think about that consequence. I think I will change it back, it makes sense that it could confuse people and I'm trying hard to avoid that. Thanks!

I will definitely work on trimming down the wall o' text, both on the main and landing pages.

MiddleOne
Feb 17, 2011

Fit a price tag to every image in your front-page slider that doesn't already have one. As you currently have it a visitor has to either wait for the slider to reach one of the pictures with a price or scroll down. Why gamble on them doing that when you already have a product on every image in the slider?

Man_of_Teflon
Aug 15, 2003

I did have prices on there before, but I took them off to try to encourage click-throughs to the products, thinking that keeping the price next to the add to cart button would be better. I have no idea what the accepted best practice is for that but now that I think about it, most big name websites do have prices accompanying their featured products on their homepages... so I'm gonna assume they did the research and that way is better. I imagine it could set expectations properly for when they are viewing the product.

Monday_
Feb 18, 2006

Worked-up silent dork without sex ability seeks oblivion and demise.
The Great Twist
I've made a website for my little webcomic using my very limited HTML skills. I'm going for a very minimalistic/old-school look.

http://www.scribbleswithwords.com

One thing I'm looking to do is to change the archive page to use my handwriting so it matches the navigation and the contact page, but I'm not sure how to do to that and still have them show up on Google. Another thing I was thinking about is moving the "previous" and "next" buttons underneath the comic, but I'd like them to align with the left and right edges of the image above it. Again, don't know how to do this yet. If I did, I'd probably make the URL on each strip smaller.

Just looking for people's opinions on how it looks in general.

Yip Yips
Sep 25, 2007
yip-yip-yip-yip-yip
I would probably center it. Separate the comic navigation from the contact/subscribe buttons. The white space at the bottom is killing me.

MiddleOne
Feb 17, 2011

If you're going to center it you'll need a box. Since you're knowledge of CSS appears to be non-existent just try putting all your content between the following tags.

code:
<div style="margin:auto; display:block; padding:0;">
Put your content here
</div>

kedo
Nov 27, 2007

MondayHotDog posted:

One thing I'm looking to do is to change the archive page to use my handwriting so it matches the navigation and the contact page, but I'm not sure how to do to that and still have them show up on Google.

Few days delayed reply, but you could use the good ol' image replacement method or you could take the time to make a font out of your handwriting and use that. I think I used this handwriting font generator before on a project, though I can't recall exactly as it was a long time ago. That would be your best option, as long as the font doesn't look terrible.

For image replacement, you just need to do something like this:

code:
<a class="next" href="http://www.scribbleswithwords.com/2014-01-27.html">
  Next
</a>
and

CSS code:
.next {
  width: [width of img];
  height: [height of img];
  background: url('previous.gif') no-repeat;
  
  /* Below is the important bit */
  display: block;
  text-indent: -999999px;
}
This is sort of a hack, but it's been used for ages and ages. display: block and text-indent: -999999px means the "Next" text within the anchor will be positioned -999999 pixels off screen to the left, so your background image will be visible instead. The main downside here is that if people have images disabled they won't see your navigation, but considering you're doing this on a webcomic site I think that's a pretty negligible use case.


MondayHotDog posted:

Just looking for people's opinions on how it looks in general.

Hard to find anything wrong with such a simple layout. But I'd give your links a color other than black and definitely center it. I might also add a bit of space or a rule or something between your navigation and the comic itself. Since everything is in your handwriting navigation ends up looking like it's part of the comic or vice versa.

OtherworldlyInvader
Feb 10, 2005

The X-COM project did not deliver the universe's ultimate cup of coffee. You have failed to save the Earth.


Context of the project:
I work in a small office on campus which helps students pass standardized tests required for teacher licencing in the state. The biggest hurdle we face is getting students through the Basic Skills Tests, which cover a wide variety of content, aren't actually aligned with any of the classes they're taking here and now, and are lacking in study/prep materials. We've assembled a pretty sizable list of resources to help students pass them, but we still don't have a great way to communicate them to students in a useful manner. Our existing website fails to do this (a lot of it is just restating stuff from the testing company's, uh... terrific web-site), and our ability to update it is pretty much non-existent. I have a basic familiarity with HTML and CSS, so of course I volunteered to put together a web-site. :downs:

Design criteria:
1. Simple for users to use, and simple for me to make.
2. Concisely point students to study and practice resources.
3. Look reasonably professional.
4. Answer basic questions about taking the test as long as that doesn't get in the way of #2.

Things about the visual design I'm concerned with:
I'm not so good with color theory. School colors are Red, Black, and White. I've substituted black with a dark slightly-off-grey. I'm not very happy with the red on the navigation bar, but can't identify why or what I should do about it (if anything).

I originally planned to have the University logo above the navigation bar, and have the navigation bar stay at the top of the page as you scrolled down. While I managed to google my way through an implementation of this, I decided aping my way through javascript violated criteria #1. I instead fixed the navbar to the top, and moved the university logo under it, but I'm not sure if that looks goofy or not.

I have no training in typography and little understanding how typefaces work on the web these days. I don't want to be that Papyrus guy, please help! I think I want a basic sans-serif title with serifed body, but I'm not really sure what would be an appropriate pairing.

Site so far: http://web.stcloudstate.edu/mtle/

Screenshot:

Robot Arms
Sep 19, 2008

R!
If you want this to be easy to update, you should probably be using WordPress (or a comparable CMS).

I'm not a big fan of the white bubbles on the gray background. It looks like a mobile theme from a few years ago, before responsive design became a thing. Also, ditch the rounded corners on the header/nav menu.

If I were you, I would use WordPress, and pick a theme from Themeforest, DIY Themes, Woo Themes, or similar. You'll get a great-looking site with minimal effort, and everyone will think you are amazing.

kedo
Nov 27, 2007


Some quick notes:

• Your navigation is not obvious at all, I didn't even realize there was navigation until you started talking about it. At minimum, give it a different treatment than the headline above it and make it look clickable.
• Give your content a maximum width. You shouldn't have more than around 80 characters per line of text, or your readability will suffer dramatically.
• Consider your hierarchy. Right now the logo carries the most visual weight on the page. Is it that important, or is the navigation and the "Minnesota Teacher License..." headline more important?
• Increase your body copy font size a bit. 14pt minimum. Increase your line spacing.

quote:

I think I want a basic sans-serif title with serifed body, but I'm not really sure what would be an appropriate pairing.

Unless you have a good reason, it'd probably be better to stick with one or the other. If you're dead set on using both sans and serif typefaces, use serifs on the headline and sans on the body copy. Better readability on screen. Since you don't have experience with typography, I'd probably just stick with standard fonts like Times or Georgia or Helvetica unless you want to spend a lot of time experimenting to find a combination that feels right.

Also as a general tip, I'd recommend checking out siteinspire.com, looking at a bunch of sites, and stealing borrowing good layout ideas. This is 90% of design anyways. Don't try to reinvent the wheel, and don't design in a vacuum.

Sudden Infant Def Syndrome
Oct 2, 2004

kedo posted:

Also as a general tip, I'd recommend checking out siteinspire.com, looking at a bunch of sites, and stealing borrowing good layout ideas. This is 90% of design anyways. Don't try to reinvent the wheel, and don't design in a vacuum.

Do you have some more site like this that showcase nice sites? I really like to look through them for ideas to steal.

Oh My Science
Dec 29, 2008

As it stands there isn't enough content to judge how this site will perform. Others have already pointed out the obvious flaws with your navigation / font choices. Is the main content all on the front page? That may impact the below statement.


samglover posted:

If you want this to be easy to update, you should probably be using WordPress (or a comparable CMS).

This is probably the best advice so far. Eventually you won't be around to manage or maintain the site, using a CMS will make it easier to update content and change or edit themes.


Sudden Infant Def Syndrome posted:

Do you have some more site like this that showcase nice sites? I really like to look through them for ideas to steal.

http://www.awwwards.com/ - Can search by category / tags.

Just google "website inspiration" and a lot pop up. Many of them use the same examples though, at least that has been my experience looking at multiple inspiration sites in the past.

kedo
Nov 27, 2007

I really like Styleboost even though the guy who runs it is notorious for disappearing for months at a time (like right now). It's a more curated set of sites than something like siteInspire.

Web Creme isn't bad either, but you'll get a lot of duplicates with siteInspire. There's also DesignCharts if you want to see an amusing "Flash is still a good thing to use!" echo chamber.

jackpot
Aug 31, 2004

First cousin to the Black Rabbit himself. Such was Woundwort's monument...and perhaps it would not have displeased him.<

OtherworldlyInvader posted:

I have a basic familiarity with HTML and CSS, so of course I volunteered to put together a web-site. :downs:
It deserves to be said again: Wordpress. You absolutely want Wordpress for this.

Omits-Bagels
Feb 13, 2001
I feel like my site is a bit of a mess. http://thesavvybackpacker.com

I started with a wordpress theme and had it modded a bit. I'm just having a hell of a time organizing all my information in a logical manner. And I can't get this drat slider to slow down.

snucks
Nov 3, 2008

Try again. Fail again. Fail better.
I've got a personal portfolio site that's up but I haven't yet really told people about. I'm recently out of college and not totally sure where my life is headed so the portfolio itself is hampered by being excessively vague and generalized; it'll probably get more specialized as I do.
http://asvvenson.com/
I'm also pretty new to web design so I'm probably making a lot of rookie mistakes. Let me know what I'm doing wrong; I'm eager to fix it :3:

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

snucks posted:

I've got a personal portfolio site that's up but I haven't yet really told people about. I'm recently out of college and not totally sure where my life is headed so the portfolio itself is hampered by being excessively vague and generalized; it'll probably get more specialized as I do.
http://asvvenson.com/
I'm also pretty new to web design so I'm probably making a lot of rookie mistakes. Let me know what I'm doing wrong; I'm eager to fix it :3:

I think it's pretty solid. Being harsh:

I would remove the resume unless you have a specific need for it to be there. If you do keep it you need to overhaul the layout. That whole block isn't working.

I don't like the animation on the contact buttons. If they flipped along the other axis and were sped up a bit (like 2x) I think it'd work better. I hate the font you use for the contact info and would try handwriting that like you did with some of the other stuff.

I feel like the About title is unnecessary and maybe the Projects title as well.

I wish the rightmost column of projects lined up into the grid or broke it entirely. Right now it looks like a mistake.

If you do remove the resume part just get rid of the nav buttons. If you keep them look for a different font and speed up or remove the fade animation. Also look for a different font for the About info.

Anyways, I think it'll look really nice once you tweak some stuff.

OtherworldlyInvader
Feb 10, 2005

The X-COM project did not deliver the universe's ultimate cup of coffee. You have failed to save the Earth.


Thank you for the responses!

First off, I've looked into WordPress. I think you're right in that this is the superior way to go, unfortunately the campus IT department does not allow PHP and MySQL on the office web-space they're providing. Is there any way WordPress can work within those restrictions, or alternative services that can?

In the meantime, I'll continue working on my existing site for now (even if it ends up being just for my own education). I'm working on addressing the issues raised, but still have more to do before I post an update.

Authentic You
Mar 4, 2007

Listen now this is your
captain calling:
Your captain is dead.

OtherworldlyInvader posted:

Thank you for the responses!

First off, I've looked into WordPress. I think you're right in that this is the superior way to go, unfortunately the campus IT department does not allow PHP and MySQL on the office web-space they're providing. Is there any way WordPress can work within those restrictions, or alternative services that can?

No PHP/MySQL certainly cuts down on your options.. And Wordpress is written in PHP, so there's no getting around that. I guess check out Django CMS? It's Python-based. I don't have experience with it personally, but lots of people like it.

Oh My Science
Dec 29, 2008
With no database you might as well just do a completely static site.

Try looking into static site generators like Jekyll if you need a way to organize a bunch of articles. If it's just the occasional update here and there on a few pages going the traditional route is best I guess.

OtherworldlyInvader
Feb 10, 2005

The X-COM project did not deliver the universe's ultimate cup of coffee. You have failed to save the Earth.


I've been busy with other things at work, so this has taken longer than I thought (big surprise!). However, I've gone through a few revisions of the site, taking into account the feedback you guys posted and the design trends I've been seeing on those site inspiration links.

Things I've done:

1. The Grey background is sort of changed
2. I've attempted to make the navigation more obvious.
3. Content now has maximum and minimum widths based on text size.
4. Logo sized reduced, placement moved, and switched to a color version.
5. Copy size increased, from approx 14 to 18 pixels on most monitors.
6. Switched to a single sans-serif typeface (Arimo on Google Fonts)
7. Site should be view-able at pretty much any window or text size.
8. Taken out the fixed nav bar.
9. Broken up the site into individual HTML docs for each page, instead of going with anchor links within the page.

Things I'm still concerned about :

1. The paragraph text might still be too dense, I forgot to try increasing the line spacing.
2. I'm not happy with the typeface for the title ("MTLE Basic Skills Resources"), but haven't been able to come up with something better.
3. Few minor issues to work out with text/window sizes and the navigation links on old versions of IE.

Current Version:
http://web.stcloudstate.edu/mtle/test/1.3/index.html

Screenshot:

Adbot
ADBOT LOVES YOU

Skiant
Mar 10, 2013

OtherworldlyInvader posted:

I've been busy with other things at work, so this has taken longer than I thought (big surprise!). However, I've gone through a few revisions of the site, taking into account the feedback you guys posted and the design trends I've been seeing on those site inspiration links.

Things I've done:

1. The Grey background is sort of changed
2. I've attempted to make the navigation more obvious.
3. Content now has maximum and minimum widths based on text size.
4. Logo sized reduced, placement moved, and switched to a color version.
5. Copy size increased, from approx 14 to 18 pixels on most monitors.
6. Switched to a single sans-serif typeface (Arimo on Google Fonts)
7. Site should be view-able at pretty much any window or text size.
8. Taken out the fixed nav bar.
9. Broken up the site into individual HTML docs for each page, instead of going with anchor links within the page.

Things I'm still concerned about :

1. The paragraph text might still be too dense, I forgot to try increasing the line spacing.
2. I'm not happy with the typeface for the title ("MTLE Basic Skills Resources"), but haven't been able to come up with something better.
3. Few minor issues to work out with text/window sizes and the navigation links on old versions of IE.

Current Version:
http://web.stcloudstate.edu/mtle/test/1.3/index.html

Screenshot:


- I'm not overly fond of the super-obvious texture for your background but it's not that big of a deal and you've got way more obvious problems to start with.
- I'd switch the text color to white in active menu items because the grey is not going well with the red you've picked
- Align page titles with the body text. As a rule, try not to get overly fancy with padding/margins on text elements like titles and paragraphs. Something between 1em / 1.5em margin-bottom is enough for most of these.
- There's a big difference of treatment between the "MTLE Basic Skills Resources" title and the menu/page blocks with their rounded corners and shadows, which makes the said title to be merged in the background while the other elements are floating on top of it.
- Your HTML markup is seriously hosed up, the menu for instance is a huge mess and you're basically shooting yourself in the foot by making it extremely difficult to maintain.
You're using title markup (<h2>) to define font-size instead of relying on CSS. The text link is outside of the link. You're over-using IDs and completely miss the point of classes.

Basically your page structure should looks like this :

code:
<body>
	<header>
		<img src="logo.png" alt="St Cloud State University">
		<h1>MTLE Basic Skills Resources</h1>
	</header>
	<nav id="main-menu">
		<ul>
			<li class="menu-item active"><a href="index.html">Home</a></li>
			<li class="menu-item"><a href="help.html">Help</a></li>
			<li class="menu-item"><a href="contact.html">Contact</a></li>
		</ul>
	</nav>
	<div class="page-content">
		<h1>Main title of the page</h1>
		<p>Content in here</p>
	</div>
</body>

  • Locked thread