[Gareth Daine]

Hi Folks,

Would love your opinions on the first mockup of my new portfolio. This version is the 240px width mobile version of the home page. This website will be responsive.

 Mobile-Layout-240.png (20.07K)
Number of downloads: 73

Thanks in advance.

Gareth

[Gareth Daine]

Here is the colour pallete.

 Portfolio-Colour-Pallete.png (1.7K)
Number of downloads: 4

[Gareth Daine]

Here is the logo.

 Logo.png (5.92K)
Number of downloads: 10

[Gareth Daine]

This is the portfolio page concept.

 Mobile-Layout-240-Portfolio.png (64.95K)
Number of downloads: 44

[RobbieD90]

Surely though you would need to design the main web version first?
So you know what is needed and what isn't.

[Gareth Daine]

Hi,

No, this type of design/development approach is called mobile first. It makes a lot of sense. Check out http://www.abookapar...ts/mobile-first or do a google search to find out more.

[empek]

Unless your main website will have an accordion styled menu, like the one shown in the screenshots, you're doing it wrong. "Mobile first" is in most cases a development term, not a design term. Progressive Enhancement, versus Graceful Degradation.

The design is not bad, although I'm not a huge fan of how your palette colors bleed into one another, without much contrast. Your name gets lost on the page, and the logo gets way too much hierarchal real estate, while being hard to read (because of its' colors).

Do what you think is right regarding my feedback. Just my two cents.

Regards,
Michal

[RobbieD90]

Gareth Daine, on 22 December 2011 - 07:15 PM, said:

Hi,

No, this type of design/development approach is called mobile first. It makes a lot of sense. Check out http://www.abookapar...ts/mobile-first or do a google search to find out more.

Thanks for the link. I haven't heard of this before. Sorry for questioning you. I need to do more research before posting a reply in future.

[Gareth Daine]

@Empek,

Yes, I understand the concept of the mobile first approach. The menu at the bottom will not be an accordian style menu, simply links. They will also be there in the footer on the full web version, though they will look different. The main navigation will be hidden and replaced with the menu button which will link to the bottom of the page.

Regarding the actual design, I take your points on board. Thanks for your comments, this is what I am after.

@RobbieD90

Not a problem mate. If you hadn't have posted what you did, then you wouldn't have found out about it.

Cheers

Gareth

EDIT: Also, mobile first does apply to design as well as development. In fact, if anything it applies more to design.

[Gareth Daine]

For more info on the mobile first approach check out http://www.lukew.com/ff/entry.asp?933

[Gareth Daine]

@Empek

By the way, I really like the Inverted Chaos website.

[empek]

@Gareth, cheers! I think we decided to abandon that version (of the IC website) and are working on another one. It's a shame really.

In my opinion, when "Mobile First" becomes your first design priority, you pin yourself in a very small corner, especially if you use iOS styled big buttons, and accordion styled menus and so on. Sure you have all the focus you need to design a great mobile site, but so does a horse when he has his flaps on, and only sees what's ahead of him.

While it's good to keep the mobile website design minimal and easy to use, you will often form a disconnect from the brand and it's respective message and content. Often when you design a website, it's just a matter of reordering some elements, and changing their sizes to fit, and you've got yourself a great mobile friendly website without all the extra work.

Anyways, again, just an opinion.

Post your revisions, I'll be sure to check them out.

[Gareth Daine]

@Empek

Sure, I respect your opinion too. I just happen to disagree with you. Rather than being pinned in to a corner as you say, the mobile/content first approach, due to the restrictions of mobile (as well as the benefits) forces you to focus more on what is important to the user, in turn this importance and focus is carried through to the larger versions of your website.

May I ask, have you read the book Mobile First from A Book Apart?

[luizarios]

Talking purely about the mobile design I'd like to say I like it, its clean and objective, only problem is the writing in orange is a bit difficult to read so I'd make the font darker.

[empek]

Gareth Daine, on 23 December 2011 - 03:55 AM, said:

@Empek

Sure, I respect your opinion too. I just happen to disagree with you. Rather than being pinned in to a corner as you say, the mobile/content first approach, due to the restrictions of mobile (as well as the benefits) forces you to focus more on what is important to the user, in turn this importance and focus is carried through to the larger versions of your website.

May I ask, have you read the book Mobile First from A Book Apart?

I haven't but it's sitting on my shelf. I'll give it a read soon.

At the end of the day, it's to each his own. I happen to be conscious enough about mobile limitations to be able to design for web first, I suppose.

[porkchops]

From a UX standpoint you've hit the nail on the head for a Mobile version of a portfolio site. The important things like a link to a menu on the bottom of the page, big touch targets for the menu and a back to top link are excellent.

From a visual design standpoint, I'm not particularly fond of the color scheme. The complimentary colors are a bit jarring, maybe try picking something that's not completely opposite on the color wheel... I think the biggest offender is the blue, but the orange doesn't provide a lot of contrast when you are using white text (and anything else will looks crummy). Maybe darken the oranges or play with the hue a bit.

Really not a fan of centered text on the nav items. I think left alignment should look great.

The brown text on white doesn't have enough contrast.

I think the logo isn't very visually pleasing and is way too big.


Just some thoughts about the visual design. UX/layout wise things are pretty much good to go!


Also, kudos for starting with mobile. It forces you to consider what's important and leaving out everything else. I'm willing to bet if more people started here their desktop-size sites would be far better.

[Gareth Daine]

Thanks for the feedbackl folks. Appreciate your input on the colour pallete.

I've been playing about and changed the pallete to something more complementary. What do you think

 Mobile-Layout-240-V2.png (19.78K)
Number of downloads: 5

 Logo-V2.png (5.64K)
Number of downloads: 4

[Gareth Daine]

In fact, I am thinking more along the lines of this double-complementary palette. What do you reckon

 Portfolio-Colour-Pallete-V3.png (1.7K)
Number of downloads: 1

[Gareth Daine]

Logo using white and colours from the palette.

 Logo-V3.png (5.65K)
Number of downloads: 1

[Gareth Daine]

 Mobile-Layout-240-V3.png (19.45K)
Number of downloads: 3