Redesign Portfolio page

[ashfurrow]

Redesign Portfolio page

[ashfurrow]

It would be pretty amazing to have this in there somehow: https://twitter.com/KarlOscarWeber/status/542274006628302848

[ashfurrow]

[ashfurrow]

OK, I've got something rough done. The vertical margins aren't quite consistent, but you get the idea. Still needs a thorough proofread, probably when I'm putting in a browser.

I've broken it down into four main sections:

• Software
• Community
• Education
• Photography

Things I like about this:

• I like the story it tells and how it tells it
• It's unique
• It's within my abilities to build

Things I think could be better:

• It feels cluttered (more whitespace might help)
• The relative sizes of the screenshots in the Software section seem really large
• The section banners are the only full-bleed containers in a page body (otherwise it is only the page header's image, so it's not quite consistent with the rest of the site)
• The C-41 item image is an icon, while all the others are pictures of devices running software. But this project is about the code and not the visuals of the app. Maybe a picture of a MacBook browsing the code on GitHub? Or running the app in a similar?

I'd love any thoughts. /cc @orta

[orta]

• Education header icons, and the clickable social icons are very similar in colour and shape. Perhaps make the education headers 33% opacity?
• The arrow + copy on the header photos is cool, could try having the dot in a consistent point and having the angle that it leaves from rotate 90' each time. Right now there's 3 different angles and one the same.
• In general it is quite wordy. Can you think of ways to reduce this? Not that you should apply the same constraints as I do but I internally don't allow more than 3 sentences "per thing". Remember that you have things like you 5 years as an iOS dev which tells some of this story better.
• The C41 does stick out, perhaps it could go in education? Or maybe C-41 and Krush don't even need to be there? Historical amnesia is essential in a portfolio ;)
• The App screenshots could only show the black alpha + title when hovered? Letting the app's design speak for themselves. A lot of them are recognisable in style.
• Section images parallax? allows for bigger photos ( I wrote my own, better/faster ones probably exist now )
• Are you checking your mobile analytics? should it have a design beforehand rather than a see how it ends up
• Section photos should have a larger top margin than their bottom margin, double, maybe even 3 or 4 times as large. Would definitely fix the cramped-ness.

[orta]

( /cc @katarinabatina if you have a second, Ash's working on a redesign of his portfolio page, some pointers would be cool )

[ashfurrow]

Educational headers – good idea. I don't find the arrows too distracting at the browser level – you'll never see two at once. I cut out some apps, rewrote the community section, speaking section, and workshop section. I like the hover idea. Added the suggested whitespace and it looks way better, thanks.

I'm not strictly designing a mobile version first, but I'm thinking of how the page will work for each element. Two-collumns would become just one on mobile, for example. I definitely want to get it right on mobile since it looks terribad on iPhones right now.

The header images already have a lot going on I feel. Dunno about parallax. I've got the headers done all responsive-y and stuff at http://staging.ashfurrow.com/portfolio/ if you want to see what I have in mind.

Currently pushed to staging.

[ashfurrow]

You know what, @orta? I was thinking about your suggestion of rotating the callout arrows each time by 90º and I quite like it.

[MengTo]

Hey Ash,

First, this is very impressive coming from someone who's so fluent at programming! Great structure, readability, contrast and visuals. You'd be surprised at how many designers fail at such simple things. Here are my suggestions:

1. The Portfolio cover image needs more "oomph". Seems like an afterthought and doesn't convey clearly what the page is about. Hard to recognize.

2. The icons need colors and should be smaller. Takes away too much attention. The gray is too sterile.

3. Your text needs a little bit more structure: H1, H2, Blockquote, maybe some colors for links.

Cheers!
Meng

[ashfurrow]

@MengTo Thanks for the kind words and constructive feedback! I'll work on those.

[katarinabatina]

Hi @ashfurrow

A few thoughts:

1. I think the portfolio banner is unnecessary unless you've got a killer product shot. Calling the title "portfolio" seems a bit underwhelming. I feel like you should have your name and then a tagline instaead, Ash Furrow –– iOS Developer and Swift Enthusiast (just an example!).
2. The dual column structure is a nice way to break up the content but I find it hard to scan. To keep the structure I say you put all the visual assets to the left, text on the right, with headers above see below. That way, the images could be a little larger and would not require you to put the title across the device.
   
3. I feel similarly about your accolades/accomplishments section with the addition that I think you should totally show the visual assets if you have them instead of icons. See below
   
4. Most of the images you have are quite dark, feel free to send them over I would be happy to brighten up a bit for you!
5. Right aligned paragraphs are a bit of a "type crime" and photography is the only place where you use it, I would just left align the title and paragraph.
   
6. The node detail on your photos is a nice touch but perhaps unnecessary although that's a personal choice.

Such a great body of work you have! Ultimately it's your work so take my feedback with a grain of salt and do with it what you like, cheers!

[ashfurrow]

Thanks a lot for the thoughtful feedback @katarinabatina – I'm going to experiment with suggestions from you, @MengTo, @orta, and some others.