6 Replies - 667 Views - Last Post: 28 September 2018 - 12:03 AM

#1 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 352
  • Joined: 25-August 13

A Couple Layout Mockups

Posted 09 September 2018 - 05:50 PM

Hey there! I've got a couple example mockups for my website, SURF. The icon was created for me by a fantastic UK designer, and the primary colors rest in blue and green (occasionally). Montserrat is our primary font for headings and such, with most general type being Roboto, and occasional usage of Sansation as an accent. Regardless, here's a couple splash-mockups; nothing for other content yet.

Posted Image

Posted Image

What do you guys think? Any ideas? Any inspiration I can look at?

Cheers! :D

Is This A Good Question/Topic? 0
  • +

Replies To: A Couple Layout Mockups

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15262
  • View blog
  • Posts: 61,152
  • Joined: 12-June 08

Re: A Couple Layout Mockups

Posted 10 September 2018 - 06:55 AM

Not a fan of the wording, but ok.

On face - with no idea on the wording for the rest of the page - I am a fan of the bottom one. The top would be ok if the image/header bit was smaller and there was relevant information.
Was This Post Helpful? 0
  • +
  • -

#3 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 352
  • Joined: 25-August 13

Re: A Couple Layout Mockups

Posted 10 September 2018 - 07:29 AM

Wording? You mean the tag line things? That's all just placeholder haha. As for relevant information, what would you find relevant? The intent is to have the big header image as a Splash image for anything super-featured, underneath will show a carousel of our projects, and under that will be another carousel of about 5 or 6 latest blog posts. This will be followed by a call to action I. Image for contribution, whether that's jobs or GitHub is yet undecided. Underneath thaaat will just be a footer with copyright, social media links and a small site map.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15262
  • View blog
  • Posts: 61,152
  • Joined: 12-June 08

Re: A Couple Layout Mockups

Posted 10 September 2018 - 07:56 AM

The big left side bar makes me expect more information up front. Being the center mass would contain information on the page, about, etc.

Examples:

https://www.jeffbull...gn-examples.png
https://bootstrapzer...gbBBP1MZZAM.jpg
Was This Post Helpful? 0
  • +
  • -

#5 ge∅   User is offline

  • D.I.C Lover

Reputation: 195
  • View blog
  • Posts: 1,194
  • Joined: 21-November 13

Re: A Couple Layout Mockups

Posted 17 September 2018 - 09:55 AM

Hi,

Your gradients and backgrounds don't work well with your typography choices. If you go for a bold flat look overlaid on an image, which in itself is adapted to the topic, it wasn't a bad idea, you can't at the same time use fancy little gradients and cancel the see-through effect by adding backgrounds (or in this case use some overlay/multiply mode, it can give a nice effect) : it is not the same visual vocabulary, it's as if you had schizophrenia. You can use brackets for example to figure the button, or you can use a colour background but leave the text transparent so that the image can show through it (if it is readable of course). The line spacing of the text isn't great either. I understand what you want to do but I think it would work better with a slightly taller font face (it makes the text appear squished, which is not what you want). I prefer the second option as well for its greater consistency.

Good luck with your projects.

This post has been edited by ge∅: 17 September 2018 - 09:59 AM

Was This Post Helpful? 0
  • +
  • -

#6 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 352
  • Joined: 25-August 13

Re: A Couple Layout Mockups

Posted 17 September 2018 - 10:47 AM

Here's another rendition! Did some modifications to the idea and went with a little more professional concept. Thoughts?

Posted Image
Was This Post Helpful? 0
  • +
  • -

#7 Lemur   User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1453
  • View blog
  • Posts: 3,633
  • Joined: 28-November 09

Re: A Couple Layout Mockups

Posted 28 September 2018 - 12:03 AM

The gradients are too harsh and tend to detract from other items on the site. Subtlety is key in color choices, and Adobe Kuler is an excellent resource to get ideas from.

The green in the corner catches attention a bit too much, remember the point of a background is to stay in the background, and bring attention to the elements in the foreground.

Menu wise I would consider toning down the font boldness.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1