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

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.

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

awesomeolion posted:

Hello everyone! I would really appreciate some feedback. I am a newbie trying to get into freelance and I recently designed and developed my portfolio site. The goal is to instil a sense of web design and development competence when potential freelance clients visit my site.

http://aidanwaite.com


I am old. This means my eyes are not what they were back when I was your age. I have a very, very hard time reading your copy for two reasons:

1. It's too small. Your primary content shouldn't be set less than 16px unless you have a really good reason to do so.

2. The typeface you chose is a very bad choice for body copy. It's thick characters make reading it an effort, which is compounded by it's small size. You have chosen two "headline" fonts, when you want a headline font and a copy font. kedo's suggestion of Open Sans is a solid one.

Also seconding the "why is it so skinny" comments. Your line-lengths are too short for no reason! I tend to give my content wrappers a max-width that will keep the line lengths for getting past three alphabets wide, but other than that, let it size to the browser window. Then you are a good chunk of the way to responsive and can tweak things when they start to look "weird" as you shrink the window down.

Not a bad site, by any means, but really think about typography, and think of us old people!

awesomeolion posted:


As an aside, how much would you say I should reasonable charge to design and develop a Wordpress site? (ballpark figure, ignoring functionality and project specifics).


Call an auto repair shop and say "ignoring what's wrong with my car or what kind it is, how much will it cost to fix it?" That's the answer to that question :v:

The Dave
Sep 9, 2003

Yeah the biggest issue is the responsiveness. And with a site so small and basic it shouldn't be that hard. The whole site feels very small, I actually increased the zoom in my browser by like 25% and had an easier time reading things and it overall felt better.

Is that one site all of a portfolio that you have? Is there any other thing you do that could show off your coding abilities. In your bio you talk about your experiences but then just list one very plain looking site as an example and it doesn't sell me at all.

I find the little 3d thing cheesy but maybe it would wow some simple-minded clients. The "Current Status" this unnecessary imo unless you are actually someone that is in-demand.

If you're contact link is just a mailto maybe the nav item should just be linked to your e-mail and not that block that doesn't really provide any additional details.

I'm almost thinking that your bio section should be worked into your intro area hero and then go down into your portfolio examples.

The Dave
Sep 9, 2003

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

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

The Dave
Sep 9, 2003

Definitely add time for research / exploration into your contract as well.

Warning: Small companies never want to pay contracts like this, and that's okay. They're not worth your time. However when you're getting started, sometimes you need to take lovely jobs to build a portfolio.

zfleeman
Mar 12, 2014

I wonder how you spell Tabasco.
I like your website. I agree with these other people that the font is a bit small, though, I know nothing about fonts. Also, some responsiveness would be a nice touch. It really is staggering how many idiots browse the web on their phones.

Yip Yips
Sep 25, 2007
yip-yip-yip-yip-yip
That font is intended for large point titling and even then it's kind of ugly tbh.

Robot Arms
Sep 19, 2008

R!
If you own yourname.com, use that for your email. When I see gmail.com, I think hobbyist.

The Dave
Sep 9, 2003

samglover posted:

If you own yourname.com, use that for your email. When I see gmail.com, I think hobbyist.

Yeah that's really just you dude. Gmail is fine.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

The Dave posted:

Yeah that's really just you dude. Gmail is fine.

Yeah, gmail is absolutely okay. AOL or Hotmail on the other hand....

awesomeolion
Nov 5, 2007

"Hi, I'm awesomeolion."

Thank you everyone very much for all the feedback! The page will be crazy for a day or so while I'm changing and testing stuff based on all the awesome input you all gave me. Once I'm done and happy with the new version I'll edit this post and explain some choices and stuff. Until then please disregard the page.

Thanks again, much appreciated y'all! Samglover, I think I'll go for hobbyist@aidanwaite.com :j:

The Dave
Sep 9, 2003

awesomeolion posted:


Thanks again, much appreciated y'all! Samglover, I think I'll go for hobbyist@aidanwaite.com :j:

Again, that was dumb advice, so don't just bend to it if you don't want to.

awesomeolion
Nov 5, 2007

"Hi, I'm awesomeolion."

The Dave posted:

Again, that was dumb advice, so don't just bend to it if you don't want to.
Yeah I was just joking around. Okay so I finished a revision https://aidanwaite.com. I'll highlight some parts. I also put a shoutout to the SA forums in the footer :smug:

Fonts

I took Kedo's advice and switched to a bold and a light weight of Open Sans. I upped the font size on everything and I'm feeling it. Using the whole screen. Alright.

Cube animation

Inspired by Anony Mouse's pointing out that I just slightly tweaked a three.js example I set to experimenting with three.js further and eventually settled on what you see now. The way it's set up is on load it randomly picks between 2 birds and 4 mammals. These animals are in an infinite flying/running loop on top of the box header with the site title on it. There are divs on the left and right side of the screen that when pressed rotate the camera 90 degrees in that direction (or should I say PI / 2, amirite fellas).

Responsiveness

Turnt this up so it flows nicely-er. Works alright on my iPad and not at all on my iPhone so there's more work to do to tweak mobile. Looks like I'll need an image alternative to the three.js animated header on devices and browsers without openGL.

Pricing

Regarding pricing, thank you for the advice!

my bony fealty
Oct 1, 2008

awesomeolion posted:

Yeah I was just joking around. Okay so I finished a revision https://aidanwaite.com. I'll highlight some parts. I also put a shoutout to the SA forums in the footer :smug:

Fonts

I took Kedo's advice and switched to a bold and a light weight of Open Sans. I upped the font size on everything and I'm feeling it. Using the whole screen. Alright.

Cube animation

Inspired by Anony Mouse's pointing out that I just slightly tweaked a three.js example I set to experimenting with three.js further and eventually settled on what you see now. The way it's set up is on load it randomly picks between 2 birds and 4 mammals. These animals are in an infinite flying/running loop on top of the box header with the site title on it. There are divs on the left and right side of the screen that when pressed rotate the camera 90 degrees in that direction (or should I say PI / 2, amirite fellas).

Responsiveness

Turnt this up so it flows nicely-er. Works alright on my iPad and not at all on my iPhone so there's more work to do to tweak mobile. Looks like I'll need an image alternative to the three.js animated header on devices and browsers without openGL.

Pricing

Regarding pricing, thank you for the advice!

A small improvement, but one that I would recommend: Add a custom favicon to your site. It isn't much but seeing something neat besides your website in a tab might encourage people to pay more attention to it.

Anony Mouse
Jan 30, 2005

A name means nothing on the battlefield. After a week, no one has a name.
Lipstick Apathy
Looks a lot better, nice work!

zfleeman posted:

It really is staggering how many idiots browse the web on their phones.
I hope this is sarcasm.

awesomeolion
Nov 5, 2007

"Hi, I'm awesomeolion."

Anony Mouse posted:

Looks a lot better, nice work!

Thank you! The help is much appreciated.


my bony fealty posted:

A small improvement, but one that I would recommend: Add a custom favicon to your site. It isn't much but seeing something neat besides your website in a tab might encourage people to pay more attention to it.

Done and done! Thanks for the tip.

zfleeman
Mar 12, 2014

I wonder how you spell Tabasco.
Hey-o, everybody.

Not a huge deal, but I have images in this post, and they are being stretched terribly whenever the page responds to a larger screen. I didn't think this would be a problem because I just set the width=100% on the images, but it looks like the height isn't moving.

Here's a paste.

Also, I get really into making websites for like a couple weeks every few months, and then I forget everything immediately, so I may be butchering my vocabulary/not know what I'm talking about. I've been away from bootstrap for a while.

Leshy
Jun 21, 2004

That is more a question for the Web Design & Development Megathread, but easy enough to answer.

Your images have a fixed height and width set in the HTML. If you only adjust the width setting in the CSS, it'll start compressing the image horizontally, but leave the height intact. Add a height: auto; to the #textPost img {} in your CSS, and the images should properly scale down as the viewport gets smaller.

slap me and kiss me
Apr 1, 2008

You best protect ya neck
Intro

I developed an online game that's essentially a free browser-based civilization. I would really like to boost conversion and retention. Right now my splash page scares over 80% of visitors away, and there's progressively less retention the deeper people get into the site.

Design Criteria
  • The initial pages should convince people to try it out, not scare potential players away
  • The game should feel exciting

Images

Splash page


Signup page


Interface


Changing settings


Links

http://www.afuriousengine.com

The Dave
Sep 9, 2003

So right off the bat, looking at your page for 5 seconds, it's extremely uninviting.

- Ditch the carousel, people are more likely to scroll and see all the images laid out throughout the page then sit then and cycle through.
- Reconfigure the copy. Your first bullet point about "Build an Empire" would be a fantastic intro headline + first paragraph. I think you should look into each of those bullet points representing a row of content with the images from the carousel.
- The nav is awful. All of the focus is drawn to your social icons, are they the most important thing you want a visitors to do? (No.) Also the top level bar with Home / Contact is just unnecessary
- Not sure any of those second lines of copy with the nav items is necessary.
- Stuff like "WWAAAAARRRRR" and "Play the game already" comes off as really amateur. I would avoid that tone.
- Contact page is all errors

That's just the first round of quick stuff.

slap me and kiss me
Apr 1, 2008

You best protect ya neck

The Dave posted:

So right off the bat, looking at your page for 5 seconds, it's extremely uninviting.

- Ditch the carousel, people are more likely to scroll and see all the images laid out throughout the page then sit then and cycle through.
- Reconfigure the copy. Your first bullet point about "Build an Empire" would be a fantastic intro headline + first paragraph. I think you should look into each of those bullet points representing a row of content with the images from the carousel.
- The nav is awful. All of the focus is drawn to your social icons, are they the most important thing you want a visitors to do? (No.) Also the top level bar with Home / Contact is just unnecessary
- Not sure any of those second lines of copy with the nav items is necessary.
- Stuff like "WWAAAAARRRRR" and "Play the game already" comes off as really amateur. I would avoid that tone.
- Contact page is all errors

That's just the first round of quick stuff.

That's really helpful, thank you! Would welcome second round (third, fifth, etc) of feedback as well.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Pfox posted:

Intro

I developed an online game that's essentially a free browser-based civilization. I would really like to boost conversion and retention. Right now my splash page scares over 80% of visitors away, and there's progressively less retention the deeper people get into the site.

Design Criteria
  • The initial pages should convince people to try it out, not scare potential players away
  • The game should feel exciting

Images

Splash page



Going to start with this one. Think about the humans who got here. How did they get here, and why did they come here? Likely there are two use cases:

1. Someone followed a link and wants to learn about the game
2. Someone who plays the game needs to log in.

Right now this page doesn't let #2 do this w/o extra clicks. Why isn't there a small login form at the top?

As for #1:

The carousel is awful. It's too busy, visually distracting, and offers little actual content. The copy is "meh".

The rest of the page looks like a bland phone company or marketing site or something. Does this page look fun? Nope. So I'm expecting a poorly designed, bland experience from your game. This is probably not what you want.

Grab me. Sell me your game in one sentence. One bigass sentence that tells me the essence of your game. Have an image, probably as a background the giant sentence sits on, that captures the "essence" of your game. It's probably not a screenshot, as your screenshots are not sexy (and that's Okay!). Do a gogole image search for "space battle". That's what you are selling: the idea of awesome epic battles.

If you grab me, I'll scroll down to read the minimal copy you have describing a bit more of what to expect when I sign up and a screenshot or two. I'll then fill out the signup form just under that. Don't make me work to sign up.

So three sections on that page: Grab me. Hook Me. Sign me up.

Hire a designer!

slap me and kiss me
Apr 1, 2008

You best protect ya neck

Lumpy posted:

Going to start with this one. Think about the humans who got here. How did they get here, and why did they come here? Likely there are two use cases:

1. Someone followed a link and wants to learn about the game
2. Someone who plays the game needs to log in.

Right now this page doesn't let #2 do this w/o extra clicks. Why isn't there a small login form at the top?

As for #1:

The carousel is awful. It's too busy, visually distracting, and offers little actual content. The copy is "meh".

The rest of the page looks like a bland phone company or marketing site or something. Does this page look fun? Nope. So I'm expecting a poorly designed, bland experience from your game. This is probably not what you want.

Grab me. Sell me your game in one sentence. One bigass sentence that tells me the essence of your game. Have an image, probably as a background the giant sentence sits on, that captures the "essence" of your game. It's probably not a screenshot, as your screenshots are not sexy (and that's Okay!). Do a gogole image search for "space battle". That's what you are selling: the idea of awesome epic battles.

If you grab me, I'll scroll down to read the minimal copy you have describing a bit more of what to expect when I sign up and a screenshot or two. I'll then fill out the signup form just under that. Don't make me work to sign up.

So three sections on that page: Grab me. Hook Me. Sign me up.

Great advice, thanks very much!

Lumpy posted:

Hire a designer!

Man, if only. This is just a hobby project with a budget of approximately $0, so hiring a designer isn't in the realm of the possible (if I'm going to exceed my budget, it's going to be on in-game art).

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Pfox posted:

Great advice, thanks very much!


Man, if only. This is just a hobby project with a budget of approximately $0, so hiring a designer isn't in the realm of the possible (if I'm going to exceed my budget, it's going to be on in-game art).

Some designers will work for free / cheap if they think your project is fun. Hell, I'll mock something up for you this weekend! (I like space games.)

slap me and kiss me
Apr 1, 2008

You best protect ya neck

Lumpy posted:

Some designers will work for free / cheap if they think your project is fun. Hell, I'll mock something up for you this weekend! (I like space games.)

That would be super cool of you! I've been really wary of posting for help, because a) I haven't had a tonne of luck working with contributors in the past, and b) rev-share and royalty posts are pretty bullshit, especially because I'm not planning on making any money on this at all.

I've been tinkering a bit, how is this?

slap me and kiss me fucked around with this message at 18:38 on Apr 24, 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.

The Dave
Sep 9, 2003

Pfox posted:

I've been tinkering a bit, how is this?

That design appeals to logins more than signups imo. If you need new players, why should they play? What's the value proposition? Cramming it into the bottom corner isn't selling anything. It's fine to not have a form on the page and just pop up a modal when a user clicks on a 'login' button in the navbar. Better yet is a login page people can just bookmark if they really want a one step process but you want to use the page for marketing purposes.

Sentient Data
Aug 31, 2011

My molecule scrambler ray will disintegrate your armor with one blow!
So how does this site look? Some of my friends are taxi drivers so I came up with a simple system for them, and it ended up being my Ode to gently caress Javascript and Mobile-Specific CSS

http://rideorlando.com


vvv:
No offense taken at all, I wouldn't be posting here if I only wanted to hear good things. I thought the quote page did highlight the price and contact info pretty well, but I guess if you mentioned that the re-quote box is stealing too much of the focus. I can restyle that box to be more subtle and probably position it differently, but removing it altogether isn't much of an option since it was a direct request of the drivers

Sentient Data fucked around with this message at 02:41 on Jun 29, 2015

The Dave
Sep 9, 2003

My intent isn't to be mean, I swear:

Style-wise it has what feels like a dated look. Soft gradient, shadows, and big containers with rounded rectangles currently feel like a thing of the past, regardless if there's anything necessarily wrong with them.

UX-wise, there's a lot left to be desired. Looking at it on desktop, maybe you should try a more responsive approach so you aren't catering to the mobile audience on all screen sizes. All of your information just sort of bleeds into each other. You can use more spacings to help visitor's eyes figure out where things are a little easier. I don't know if your first two paragraphs are really necessary, or the blue box style that comes with it.

Advice: Focus all your attention on the input fields, as I assume that's the most important thing for your user. Then maybe drop everything else into a multi column layout with nice clean headers and icons.

The second page is all about two things, the price, and how to contact. So make that your focus.

I'm doing an awful job of exactly how to get there, but a lot of it would be de-cluttering, and prioritizing the right information.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
The Dave is wise.

What do your users want? To get a cab. Anything that isn't helping them do that is in their way. Here's a 5 min iPhone5 screen mockup that shows a "not perfect but pretty decent" version of your content. I know exactly what I can do (get a real cab!) and I clearly see how to go about it (call that number or use that form) all on a single iPhone screen. It's not going to win any design awards, but it's something that I think is a good starting point. If I need to read more about you or whatever, I'll scroll down.

Only registered members can see post attachments!

Sentient Data
Aug 31, 2011

My molecule scrambler ray will disintegrate your armor with one blow!
Yeah, I'll admit that the top text chunk wasn't there (which means the quote/contact columns were first on a mobile screen and explains why the ratio seems extra narrow on a desktop) but I was pressured to add the text after the fact for SEO. Though thinking about it now, I could probably move it to the bottom; I'll see how that looks


E: Yeah, moving the text to the bottom along with the 4th paragraph from the side really helped even out the feel of it. I'll still look more into the overall style after I get some sleep, but I'm happy with how moving around that text improved the feel

Sentient Data fucked around with this message at 03:19 on Jun 29, 2015

The Dave
Sep 9, 2003

Edit: actually not sure soliciting work is kosher in this thread.

The Dave fucked around with this message at 13:35 on Jun 29, 2015

painted bird
Oct 18, 2013

by Lowtax
Is it all right to ask for typography advice in this thread or should I go somewhere else for that? I need help picking out fonts because I'm a font scrub.

Coelacanthian
Dec 23, 2008
Lay it on me, baby! Love me some in-depth typography chat.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

painted bird posted:

Is it all right to ask for typography advice in this thread or should I go somewhere else for that? I need help picking out fonts because I'm a font scrub.

Pro Tip: pick good ones :colbert:

painted bird
Oct 18, 2013

by Lowtax
All right, then!

I've got this font, Octant.



It's a display font I'm using for a grant total of two purposes, the title/logo of the site and the navigation menu (and that second one is up in the air). I'm looking for good, preferably free, webfonts to use alongside it: a body typeface and a secondary display typeface for headings. And here is where I'm stuck.

I would like the body typeface to be a serif, because the site in question needs to have an old-fashioned, "old book" kind of feel to it. The obvious "free typeface" solution for that is Old Standard TT, but what would be a good secondary display typeface? All the san serifs I see suggested as matches for Old Standard TT are, uh, a little too modern-looking for the look I'm going for. I feel like the likes of Oswald, Beubas Neu, League Gothic etc. are too much of a mismatch for Octant to work.

Other alternatives for the body typeface are Linden Hill, Sorts Mill Goudy and Goudy Bookletter 1911. I was thinking Playfair Display would make a good secondary typeface, but I am a typography scrub and don't trust my instincts.

Another possibility I'm tossing around now is Octant, Cinzel Decorative and Sorts Mill Goudy.

I would love input! And recommendations of non-free typefaces are fine, as long as I can get a regular/italic/bold/bold italic package for less than USD 50. I don't necessarily need weights other than regular for the body typeface, but I very much need true italics.

painted bird fucked around with this message at 18:27 on Jul 21, 2015

Suspicious Dish
Sep 24, 2011

2020 is the year of linux on the desktop, bro
Fun Shoe
Try Libertine Serif: https://github.com/khaledhosny/libertine

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

Adbot
ADBOT LOVES YOU

painted bird
Oct 18, 2013

by Lowtax
Sorts Mill Goudy is actually perfect for my needs, looking at it (I fired up Illustrator and did some quick mock-ups). The body copy is going to be set at 15pt/20px, so a relatively large size.

Thanks for the help!

  • Locked thread