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
kedo
Nov 27, 2007

Icon resources:

Icon Finder - searchable by keyword, vector/bitmap, free/premium, license and size. Mostly what you'd expect... lots of tech icons.
The Noun Project - for absolutely everything else. This'll be a good resource for your particular project, Creepy Goat

Adbot
ADBOT LOVES YOU

kedo
Nov 27, 2007

MrSaturn posted:

My knee jerk reaction to that is that while it's an interesting idea, it's not really that good for what you want to do. You're looking to build a portfolio to show off your animations, right? Don't make the portfolio be the animation - make it a simple, elegant, easy vehicle for people to see your existing work. Not a distraction.

A thousand times this.

Your portfolio site serves one purpose: to display your work. As a thought exercise, go through your layout and consider each and every element through this filter: Does [thing] aid or hinder a user's ability to view [piece]? Right off the bat I can see at least half a dozen things that fall under the "hinder" category: about half of your screen real estate is taken up by the illustration, parts of the content region are covered by fingers/UI elements, bright colors will surely clash with some of your illustrations, the content area is going to necessitate an internal scroll bar or carousel or some other nasty thing, your pieces are going to be rotated and HTML rotation fucks up image rendering (or they'll have to be unfortunately cropped), speech bubble will limit your content, etc etc.

Assuming your stuff is good enough to stand up on its own, go ultra minimal. Photos/illustrations tend to look best on black or white (black makes them look more dramatic). I'd only suggest going with your current direction if you know for an absolute fact you can kick the poo poo out of the design so prospective employers sit back and say, "whoa, holy poo poo, I want to hire this guy for this site alone."

Inspiration:
http://blur.com/

Good things:
- I see big, impressive examples of their work right off the bat on the homepage
- Their work page is simple, to the point and super easy to navigate
- Pages that house individual pieces have an image background which goes counter to what I said about ultra minimal, but it's consistent with the work they're displaying and thus it's not distracting - it makes the work look even better.

Bad things:
- Some pages suffer from readability issues

Remember that the people looking at your portfolio are looking at dozens if not hundreds per day... I am one of these people. At the end of the day I'm going to judge you by the quality of your work, not your portfolio site's design. Using weird gimmicks and uncommon functionality just means you're making it harder for me to view your work, which means you've annoyed me, which means I'm less likely to hire you.

That all being said... this would be a good gimmick site to show you're a little different from every other boring person with a ultra minimal Cargo Collective theme. Use this to display a real short reel or something and offer it up in addition to a solid, simple, easy to use portfolio if anything.

Also, don't let "ultra minimal" say "no soul" to you. I'd keep that happy illustration of yourself as your logo, perhaps. Put it in a circle and stick it up in the corner somewhere... always nice to have a splash of color.


e: also please send people to the lemon party, they will like it

kedo fucked around with this message at 02:08 on Aug 15, 2013

kedo
Nov 27, 2007

Megaspel posted:

I am a bit worried about my stuff standing on it's own, mainly because I've only just finished my second year and I don't have much recent stuff that matches my current skill level

The solution is to work on more stuff! :)

kedo
Nov 27, 2007

Quick feedback, I'll do more if I have time later:

• Some stuff overlaps the header when you scroll. Check your content z-indexing
• letter-space: -4 looks real ugly. Try like -1 or 2 at most.
• Don't launch a site with anything that says "under construction," it would be better to just not include that section.
• You might want to set the minimum height for the landing section (at least) to browser height. Maybe other sections as well.

kedo
Nov 27, 2007

Creepy Goat posted:

Thanks made the z-axis and spacing fixes, but how do I go about making the landing page browser height? The whole site would look far better if I could make each section browser height, I'm just not sure how to do it!

Javascript. Can't do it with CSS alone. For example using jQuery:

code:
$('.container').css({'minHeight' : $(window).height() });
e: Also, are you generating this HTML in some Adobe program? The markup is... um, well... atrocious.
e2: Oh, you're using Adobe Muse. Have fun with that. code your sites by hand

kedo fucked around with this message at 18:31 on Aug 21, 2013

kedo
Nov 27, 2007


:suicide:

I give up.

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.

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.

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.

kedo
Nov 27, 2007

Anony Mouse posted:

You mentioned the paragraph text maybe being too dense, I think I'd agree, but less because of the line height and more because of how long they are. Some of your sentences are 17-18 words long, that's a bit much for paragraph text; aim for 10-12 at the most. If you plan on having images to break up the flow of the paragraphs that could help too.

While I'm here, if anyone would trouble themselves to take a look at my portfolio website I'd be grateful. Any critique, no matter how minor, would be great. I sort of rushed it because I'm attending a career fair tomorrow which is a week earlier than I originally planned, but for having knocked it out in two days I'm decently happy with how it turned out.

http://www.jereddanielson.com

Minor and rushed critique incoming!

• In your navigation, make the entire tab clickable, not just the word.
• Don't indent text on the web. Space paragraphs out with margins instead.
• Don't embed your resume in an <object> tag. In fact, don't embed it. Put it in HTML in addition to including a PDF download link.
• Give everything a bit more space, specifically vertically. Feels claustrophobic. Your header is way too close to your content, as is your footer. Add vertical padding within your footer too.
• Give your typography some consistency. Your body copy on your About page is a different size than on portfolio pages. I might adopt your caption style everywhere, as it feels the nicest. The white text feels a little awkward and jarring.
• Check things @ mobile dimensions – you have a lot of stuff not lining up or running off the page (example: http://imgur.com/oNdQC45). You should have consistent gutters on either side of the page.

kedo fucked around with this message at 14:54 on Mar 19, 2014

kedo
Nov 27, 2007

Overall this looks nice. The blue isn't my favorite as it's as close to default web blue you can get without being default web blue, but I like that there's a pop of color. Random idea I had while clicking through the site: why not have the blue change to a color derived from the main splash image on the page? This could help each location feel like its own special entity.

A few other misc. notes:

• @ mobile responsive state the main nav runs into the blue "Reisverslagen" headline, making Reisverslagen look like a piece of navigation. Maybe add some sort of bottom border to the nav?
• Calluna is available from Fontspring, who lets you host your own fonts. Could help with your FOUT.
• Blue links in your footer are hard to read due to contrast issues. I'd make them a bit brighter.
• Your hamburger icon feels huge. I'd keep the link the same size for clickablity, but make the hamburger itself about 2/3 as large.
• I wish the second line of dates in your sub nav lined up vertically with the first line (ie. Day 6 starts directly beneath Day 1). Feels like a mistake.
• Make your lightbox overlay color black. Photos look better on black, and the gray you're using currently feels dirty.
• I might give the active date in the subnav a more obvious treatment. Bold + italic is obvious if I take the time to really look at it, but when I'm scanning my eyes slip past it. Try reducing the opacity?

kedo
Nov 27, 2007

Agreed on typography, though I wouldn't suggest two different typeface. You don't have enough content to justify two. I would pick a nice, simple sans serif that has several weights. For example, Open Sans has a ton of weights. I might use bold for your headlines and light for body copy.

If you do want to go with two typefaces, at least choose a closely related set (ie. maybe Open Sans Condensed for headlines, Open Sans for body copy).

I'd also prefer it if each content section were a lot taller. They all feel a little cramped.


fakedit: Based on the site in your portfolio and your portfolio site itself, I see a trend of super narrow sites with super small type. Is there a specific reason why you're doing that? Narrow sites feel extremely dated, and small type is just unusable. Unless you have a really good reason, generally you shouldn't typeset anything smaller than about 14px. Body copy feels nice around 16 imo.

kedo
Nov 27, 2007

The Dave posted:

Also regarding pricing, IMO, the right way to do it is hourly with milestone checkpoints.

I usually price WP sites in a similar manner, though I charge a project rate instead of hourly. However my project rate is calculated based on how many hours I know it takes me to produce a WP site.

So let's say your hourly rate is $100, to make the math easy.

40 hours * $100/hr = $4000

That would be my base price, assuming that I know WP sites take me roughly 40 hours to produce. I'd then add a bit on top based on a few factors: A) how much money does the client have (ie. charge more for big corporations, less for small mom and pops), B) how difficult is the client going to be, C) what's the potential for the project to go over-budget (ties in closely with B), D) what value will this site have for the client (if it's their main site they're going to use to sell goods to make a lot of money you can charge more than if it's just some silly blog for a side project).

Pricing is more of an art than a science and depends greatly on your level of experience and how much you think a client is willing to pay.

e: Yes, and definitely have milestones and a contract that specifically outlines those milestones. I generally ask for 50% up front, 25% on design approval and 25% prior to launch.

kedo fucked around with this message at 20:28 on Apr 10, 2015

kedo
Nov 27, 2007

Agreed with what everyone has said. I'd also suggest a different color palette. The blues, whites and grays you're using all feel very sterile and kind of boring. I almost feel like I'm looking at some sort of corporate site where I'd go to file some memos or something. If you don't feel like playing designer, grab a palette that strikes your fancy here. It'll have a big impact.

Adbot
ADBOT LOVES YOU

kedo
Nov 27, 2007


That's a good one.

You want a humanist serif if "old" is your main criteria, definitely not a sans like several of the fonts you listed. A humanist serif is one that has features that are derived from when letters were inked with a pen (ie. ink wells, dramatic variation in stroke weight and character height, serifs are rounded and never flat, there are no 90° angles anywhere, etc). Goudy tends to feel either old or elegant, depending on how it is used. Playfair is a beautiful typeface but it's a little more modern and only displays well at about 18pt or higher in size.

On the other hand, humanist serifs don't always look great on body copy unless your users all have retina displays or you're going to use a nice big font size. A lot of the nice features I talked about look great big, but they turn the letters into a muddy, anti-aliased-to-hell-and-back mess when they're displayed at a small size, so choosing something a little more modern might be better for readability purposes.

That all being said, just get one that's easy to read and has a good amount of contrast compared to your display face. Some Google fonts to consider:

Crimson Text
Libre Baskerville
Cardo
Sorts Mill Goudy

  • Locked thread