thadde.us - my portfolio

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

thadde.us - my portfolio

Postby Thad » Wed Feb 18, 2015 1:34 am

thadde.us

It's a portfolio site with a few of the websites I've built and the audiobooks I've recorded. It's WIP; I really need to get some screenshots up on the Websites page, fix the Contact page up to be prettier and use the new, no-captcha version of reCAPTCHA, and add a favicon. And probably replace the bulleted links on the Audiobooks page with nice big rounded buttons. But for the moment, it's something I can put at the top of my resume and have people look at it and see a portfolio.

It's responsive, and it's got some jQueryUI tabs and some CSS3 animations, because people love that shit. I've kept it pretty restrained but hopefully managed to make it look reasonably modern.

I've been tracking the whole thing locally in git and I'm considering putting it all up on github when I'm done, so people can see it and say "Hey, this guy knows git."

Just have to remember to strip out stuff like, say, my reCAPTCHA private key before I do anything like that.

Anyway, feedback welcome if anyone wants to give any. This is a start but I know there's plenty more I can do to make it better.

User avatar
Mongrel
Posts: 9040
Joined: Mon Jan 20, 2014 6:28 pm
Location: Canadumb

Re: Hey, I built a website.

Postby Mongrel » Wed Feb 18, 2015 1:49 am

I can't really speak to the technical aspects, but how much are you planning on investing in this in terms of graphic design and layout?

It's early and I have no idea what you're planning, but two things have jumped out so far.

1) There is something throwing me off about the way the active buttons on the section links bar form a larger bar than the background. I makes me think the site owner meant to make a button that increases in size when hovered over, but that that function got stuck. I don't know that making it all one continuous bar would be better (since that would be kind of boring and flat), but something about that design could be tweaked. Maybe if the ends of the active part of the bar were clearly defined the way top and bottom edges are? Say a white edge on the left of the home button and a black edge to the right of the in button?

2) The colour theme is a little loose. Mostly that's not too bad, but that cream colour for the website tab really clashes with the rest of the site and makes it instantly look messy. Maybe a grey to help bring the background into the site?

Sorry if there's not as much constructive or complimentary there as I'd like. I actually expect your underlying code is the rock solid part, but like I said, I can't speak to that.

EDIT: I thought about #2 and I think a red would be better than a grey. I was worried it might be garish, but it'll tie things better than a grey will. One idea might be to make "websites" the blue you're using for "audiobooks" and use red for "audiobooks". Hell, just try playing around with it and see what you like.
Image

User avatar
Healy
Posts: 358
Joined: Fri Jan 24, 2014 10:53 am
Location: Bro-ing it up in the Arctic

Re: Hey, I built a website.

Postby Healy » Wed Feb 18, 2015 1:56 am

Hey, I just wanted to let you know I got a "HTTP Error 503 Service is Unavailable" error when clicking on the links for individual audiobooks. I don't know why it's doing that, though.

Anyway, nice site! You did a pretty good job on designing it.
Image

User avatar
Rico
Posts: 465
Joined: Tue Jan 21, 2014 2:29 am

Re: Hey, I built a website.

Postby Rico » Wed Feb 18, 2015 3:08 am

I think it might be a good idea to have more detail about your client sites. I mean, we all know those sites look kind of dated and tacky because the companies that make those products requested that, but they do look dated and tacky, so putting further emphasis on the backend and tech components might help you out. Depending on what sort of business you're hoping to solicit, simple fake template sites might work better than real-life client examples.

I guess the overall point is that a non-tech person is probably going to look at your page before it gets passed to the tech person, so make it prettier and where it's not make it obvious why it's not?

User avatar
Mothra
Woah Dangsaurus
Posts: 3170
Joined: Mon Jan 20, 2014 7:12 pm
Location: Boston, MA
Contact:

Re: Hey, I built a website.

Postby Mothra » Wed Feb 18, 2015 11:29 am

I agree with Rico. My first impression on seeing this without reading anything was "oh did a spam page pop up? (hunts around for 'skip ad' text)"

I guess just making it more obvious that these are contained somehow and not advertisements.

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Wed Feb 18, 2015 12:19 pm

Mongrel wrote:1) There is something throwing me off about the way the active buttons on the section links bar form a larger bar than the background. I makes me think the site owner meant to make a button that increases in size when hovered over, but that that function got stuck. I don't know that making it all one continuous bar would be better (since that would be kind of boring and flat), but something about that design could be tweaked. Maybe if the ends of the active part of the bar were clearly defined the way top and bottom edges are? Say a white edge on the left of the home button and a black edge to the right of the in button?


Not a bad idea.

I DID toy with the idea of the nav links resizing on hover, but in practice it looked and felt pretty awkward.

I could add borders as solid lines, which might look okay; I'll look into it. Another option is fucking around with shapes before and after the navbar trying to make it look like it's popping out of the background. But that seems a bit much.

Mongrel wrote:2) The colour theme is a little loose. Mostly that's not too bad, but that cream colour for the website tab really clashes with the rest of the site and makes it instantly look messy.


This helps. Color theory is not my strong suit.

Mongrel wrote:Maybe a grey to help bring the background into the site?

[...]

EDIT: I thought about #2 and I think a red would be better than a grey. I was worried it might be garish, but it'll tie things better than a grey will. One idea might be to make "websites" the blue you're using for "audiobooks" and use red for "audiobooks". Hell, just try playing around with it and see what you like.


Yeah, red might be better; I think there's too much gray on the site already. (Hell, all my sites. The tagline on my blog used to be "Now with more gray!" Brad actually mentioned this in the speech he gave when he performed my wedding. It's funny the things you remember.)

(I do use gray for a couple of tabs on the site, but it's a tertiary color.)

The trouble with red is that it's pretty easy for it to turn into kind of a garish pink. The whole div-with-a-lightly-colored background trend tends toward pastels. (I was actually going for more of an orange with the color you're calling "cream", but I suspect that if I pushed it a little more toward orange it would become harder to read the text.)

Healy wrote:Hey, I just wanted to let you know I got a "HTTP Error 503 Service is Unavailable" error when clicking on the links for individual audiobooks. I don't know why it's doing that, though.


OS/browser/version? I'm not having that issue in Firefox or Chrome; I admit I haven't done my due diligence in IE yet (or borrowed an iOS device to try Safari).

Rico wrote:I think it might be a good idea to have more detail about your client sites.


Yeah, that's a good idea. I'm trying to strike the balance between tl;dr and nothing-there-but-a-link; I'm erring a little too closely to the latter at the moment. It bears repeating that this is very much the first version of the site that was presentable enough to put up live; the main reason I published it in this state instead of waiting until it's finished is that, well, here's an archive.org snapshot of what it looked like yesterday. I needed something that looked like it had been built in the last two years.

Rico wrote:I mean, we all know those sites look kind of dated and tacky because the companies that make those products requested that, but they do look dated and tacky, so putting further emphasis on the backend and tech components might help you out.


That's definitely what I was going for with all the library shop talk, but I think a description of the product and client might help too.

I'm not sure if adding that I built, say, the first two sites while at GoDaddy would make me look better or worse. (I mean, it's in the fine print already, but nobody reads that.)

Rico wrote:Depending on what sort of business you're hoping to solicit, simple fake template sites might work better than real-life client examples.


That's also on the agenda, yeah. I've talked to a couple of guys who said a lot of people are looking for people who can do WordPress templates right now, and obviously I'm not going to link to my personal blog from a professional site so I'm figuring on getting some mockups done. After I've fixed up the Contact page and added some content to the Websites page.

I've built a fuck of a lot of websites but unfortunately pretty much all of them were either for GoDaddy, for Titan, or over two years ago. (And most of my work at Titan was wiped out right before I left; our #1 client pulled out, and our #2 client had all their sites replaced with generic rectangles.) The four I've selected are the best four. (If I were to add a fifth, it would be either globaljetpartners.com or pacificrimaviationgroup.com -- but not both, for presumably obvious reasons -- let me know your thoughts. There's also northvalleyhomeservices.com, which is minimalist as fuck but has aged better than a lot of my other older sites as a result. (Links are wrapped through an anonymizer because I don't really need this site showing up in my freelance clients' referral logs.))

But yeah, mockups are a fine idea and definitely on the agenda. I'm even toying with the idea of letting users choose between multiple different themes for the thadde.us site itself. Like color swatches.

Rico wrote:I guess the overall point is that a non-tech person is probably going to look at your page before it gets passed to the tech person, so make it prettier and where it's not make it obvious why it's not?


Well, the latter part's a fine line to walk (you don't want to actually SAY anything resembling "I know this site sucks; the client made me", but "Herbal supplement site" might convey the same thing without making me look like I'M incompetent) but I think you've got the right idea. Graphic design's not my strong suit but I know I need some screenshots and such in there.

Mothra wrote:I agree with Rico. My first impression on seeing this without reading anything was "oh did a spam page pop up? (hunts around for 'skip ad' text)"

I guess just making it more obvious that these are contained somehow and not advertisements.


You're talking about the main page? Yeah, I guess I can see that. I think Mongrel's got the right idea of changing the color to something that meshes better with the rest of the site.

Would changing the header help? Like, instead of just "Websites" make it say something like "Websites I've Built" or "Websites by Thad" or suchlike?

User avatar
Mongrel
Posts: 9040
Joined: Mon Jan 20, 2014 6:28 pm
Location: Canadumb

Re: Hey, I built a website.

Postby Mongrel » Wed Feb 18, 2015 2:07 pm

I think that something could be done with the format, but I'm not 100% sure what. For sure you need to more clearly separate your own website from the sample sites you've done. The tabs are a nice design, but integrate those other websites with your own too much.

FAKE EDIT: I Was typing a bunch of stuff and then I realized what the problem is!

Your layout for the sample websites mirrors the layout of your own site. You have four horizontal buttons to navigate your site and there are four sample websites also arranged horizontally.

You need to change the sample websites into a more conventional vertical list. Preview image on the left, and on the right a large font with the site or business name, and smaller description text below. Don't be afraid to add maybe one other sentence of text, or make it more organized. And the way you link to those websites needs to be changed entirely, since the current version sounds a bit like you're making a paid product placement. Be up front about their address! So the text on the right might read something like:

Pure Green Coffee
new-you-diet.com ------------------ Designed 2012


PHP-based ecommerce site featuring CSS3 gradients and rotations, jQuery, and Bootstrap.
[Add maybe one more sentence of description here - you want to keep it brief as you've done,
but you need a minimum amount of descriptive text to balance the title and to avoid looking
barren - maybe something more qualitative?].


The date puts things in reference. I would also list the sites in reverse chronological order, with the newest site at the top of the list.

I think if you do all of those things, you will be able to retain the tab colour for each website, though you might want to frame the vertical tab list in something, to separate it from the site background (try it with and without and see how it looks). The cream tab for "websites" on the home page still needs to be changed though, since it confuses your site for the MD site. Also, on the home page, I would also not directly integrate the website logos with your own layout the way you have, but I'm not 100% on how to change that without making your 'websites' home tab look barren.

EDIT: Also, there may be a graphical design issue in how the tabs you've chosen have a rounded, sloped profile, while the rest of your site uses hard right angles. You may want to pick one theme or the other and stick to it.
Image

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Wed Feb 18, 2015 2:43 pm

I'm not sure I want to break continuity by putting horizontal tabs on some pages and vertical on others, and vertical tabs would probably be a problem on the mobile version of the site. (It's possible to make them vertical on the full version and horizontal on the mobile, but I think that's probably overkill.)

I considered using accordions instead of tabs on the Websites and Audiobooks pages, but I think too much variation in the UI is liable to reduce clarity, not increase it.

Now, I AM planning on probably putting a screenshot (or two or three) on the lefthand side of each panel (or probably across the top in the mobile version). I think that will help break up the monotony a bit and bring in some of the clarity you're suggesting.

I don't know that putting "THIS IS OLD" in giant letters, front and center on the site descriptions, is the best idea. But I could make it a little more prominent than the fine-print copyright at the bottom of the section. Maybe stick it in there as the second sentence -- "PHP-based ecommerce site featuring CSS3 gradients and rotations, jQuery, and Bootstrap. Site design by Titan Media Group, 2012, with modular enhancements added by me in 2014," something like that -- though of course if I blame somebody else for the crummy design I run the risk of creating the impression that I didn't really build the site myself.

The last two sites are definitely weaker than the first two -- that's why they're the last two.

Putting the links to the sites in the headers isn't necessarily a bad idea, but I think it works better on some than others. "Pure Green Coffee / new-you-diet.com" looks okay, but the other three ("MD Motivational Drink / mdmotivationaldrink.com", "Swim'It/myswimit.com", "Garcinia Plus / garcinplus.com") feel a little repetetive. (And a header that's twice as high means a header with twice as much negative space, but the panels are already mostly negative space anyway -- at least, at desktop resolution. They should look better once I add the screenshots.)

Another thing I could do is put another header right above the tabs to establish that these are sites I've built, but I've already got an h1 that says "Websites by Thad Boyd", and creating an h2 that says the same thing feels stupid and redundant. (And probably bad for SEO, if I'm going to worry about SEO.)

Then again, as it stands I'm sure people are about as likely to read that introductory text as they are to read the introductory text on a Mad Magazine movie parody.

I think the best solution is to build more and better websites, like Rico said. Though if you think any of the alternates I mentioned above look like they'd be better examples than the Titan sites, let me know and I'll consider swapping one or both of the Titan sites out for them.

User avatar
Mongrel
Posts: 9040
Joined: Mon Jan 20, 2014 6:28 pm
Location: Canadumb

Re: Hey, I built a website.

Postby Mongrel » Wed Feb 18, 2015 2:59 pm

I am suggesting that you very deliberately do want to break continuity in order to very clearly separate the sample websites from your own site. If vertical tabs don't work for you then something else might be the answer, but a a small tweak won't be clear enough - there needs to be a significant and very visible difference. A direction change is one way to do this without adding clutter.

I don't know how hard it would be for you to recode it, but maybe if it's just an hour or two's work, just do it up and we can all see what it looks like?
Image

User avatar
Rico
Posts: 465
Joined: Tue Jan 21, 2014 2:29 am

Re: Hey, I built a website.

Postby Rico » Wed Feb 18, 2015 4:25 pm

Thad wrote:Yeah, red might be better; I think there's too much gray on the site already. (orange, all my sites. The tagline on my blog used to be "Now with more gray!" Brad actually mentioned this in the speech he gave when he performed my wedding. It's funny the things you remember.)

(I do use gray for a couple of tabs on the site, but it's a tertiary color.)

The trouble with red is that it's pretty easy for it to turn into kind of a garish pink. The whole div-with-a-lightly-colored background trend tends toward pastels. (I was actually going for more of an orange with the color you're calling "cream", but I suspect that if I pushed it a little more toward orange it would become harder to read the text.)

I wouldn't worry that much about gray in general. Again, it comes down to what sort of clients you're trying to solicit, but at least for ecommerce all the major players go pretty clean. Mostly white, with charcoal/black in the header, sometimes a bolder color (pink, yellow) for a "call to action." You could use screenshot thumbnails with some bold white overlay text and end up with your portfolio site looking like MoMA or Fab or something (also, those 3-5 slideshow promo banners are everyone's current big thing), for a modern look.

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Wed Feb 18, 2015 4:45 pm

Rico wrote:(also, those 3-5 slideshow promo banners are everyone's current big thing)


Which is part of why I haven't done it -- it's such a cliche. I don't think it speaks highly of a designer's skill; I think it says "I don't have any ideas of my own, but I sure can do the same thing every other web designer has been doing since 2012."

If I wanted to jump on a bandwagon I'd probably leapfrog that one and move ahead to smooth scrolling or giant background videos (or both, like on the Google Hangouts site) or whatever the new thing is now, rather than the new thing from a few years ago.

User avatar
Mongrel
Posts: 9040
Joined: Mon Jan 20, 2014 6:28 pm
Location: Canadumb

Re: Hey, I built a website.

Postby Mongrel » Wed Feb 18, 2015 5:41 pm

If you're capable of doing that and you genuinely want your site to impress, that really sounds like that's exactly what you ought to do.
Image

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Wed Feb 18, 2015 6:40 pm

Well, the biggest barrier is media. I can't do a video without a video, and smooth scrolling only works if you've got background images. I could fuck around with stock footage or photos, but I think that would cheapen the look of the site, not improve it.

Smooth scrolling IS a lot more to my taste than tabs/accordions/any other sort of content-hiding fuckery (as a user, there is nothing more irritating to me than hitting Ctrl-F, typing a search term, being momentarily baffled by the visual feedback of a searchbar that says a match has been found without any highlight appearing in the viewport, and then having to hover or click every fucking nook and cranny looking for the hit), but it also flies in the face of years of conventional wisdom that you don't want to overwhelm a user with too much content or scrolling.

User avatar
Rico
Posts: 465
Joined: Tue Jan 21, 2014 2:29 am

Re: Hey, I built a website.

Postby Rico » Wed Feb 18, 2015 9:27 pm

I don't like smooth scrolling for larger websites where you can legitimately get lost 400 items down and there's no good back navigation, or if it doesn't save your place for minor hiccups, but it is pretty elegant in smaller sites. Again, I'm just going on the assumption that the first person to click on your portfolio won't be a tech person but will make the decision on whether or not to pass it onto the tech person.

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Thu Feb 19, 2015 3:26 pm

Yeah, and that's definitely true. But as much as anything I've put the site up because I'm tired of people asking me for examples of sites I've built even though they're right there on my resume; now I can stick "www.thadde.us" up at the top where it'll be more noticeable.

I'll give the interviewers from yesterday one thing: not only did they actually look at the sites on my resume, they had printouts of them sitting in front of them.

User avatar
Rico
Posts: 465
Joined: Tue Jan 21, 2014 2:29 am

Re: Hey, I built a website.

Postby Rico » Thu Feb 19, 2015 5:21 pm

That is sadly tremendously impressive.

User avatar
Healy
Posts: 358
Joined: Fri Jan 24, 2014 10:53 am
Location: Bro-ing it up in the Arctic

Re: Hey, I built a website.

Postby Healy » Thu Feb 19, 2015 7:58 pm

Thad wrote:
Healy wrote:Hey, I just wanted to let you know I got a "HTTP Error 503 Service is Unavailable" error when clicking on the links for individual audiobooks. I don't know why it's doing that, though.


OS/browser/version? I'm not having that issue in Firefox or Chrome; I admit I haven't done my due diligence in IE yet (or borrowed an iOS device to try Safari).

Uh, Vista/Firefox/35.01. I have no idea what's up if you've already checked Firefox.

EDIT: Wait, I checked again and now they're working! Now I'm really confused.
Image

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Fri Feb 20, 2015 12:52 am

Yeah, Firefox is my primary browser (albeit the Linux and Android versions).

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Wed Apr 01, 2015 7:16 pm

Added screenshots for the first two websites. Thinking I'll probably remove one of the other two sites and replace it with the test site I built for that job application the other week.

Seem to have cocked up the formatting on the Contact page in the update. Still need to fix the Contact page to use the new version of Recaptcha anyway; maybe I should get on that next.

User avatar
Thad
Posts: 5638
Joined: Tue Jan 21, 2014 10:05 am
Location: 1611 Uranus Avenue
Contact:

Re: Hey, I built a website.

Postby Thad » Tue Apr 07, 2015 1:40 pm

So remember that test site I built last month? The one where there were liberties taken in the?

In the interest of making lemonade, I replaced all the graphics with stock images from freeimages.com and put it up as a demo site. (I probably had more fun with it than I should have, but it's not like anyone actually reads the text anyway.)

I'm planning on taking the original test site down at some point, but until then you can compare the two of them side-by-side to see what I changed when I filed the serial numbers off.

I'm still planning on tweaking a couple things (like the navbar; I think I'll have the Home link take you back to my Websites page, and the About link pull up a modal explaining that this is a test site). Then I'll take a couple screencaps and link it from my portfolio.

Thinking of significantly redesigning the site and ditching the jQuery/tab stuff. But probably not today.

Who is online

Users browsing this forum: No registered users and 1 guest