[ART] Website mockup

[ART] Website mockup

[Luis Felipe López Acevedo]

Hi,

Here is a mockup for the website:

http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png

And some variants with white and yellow headers:

http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png

http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png

As always, feedback is very welcome.

P.S.: rigelk, the "Overview" section is supposed to behave like those
one-page sites we talked about, and it takes potential users by the hand
to show them the main advantages of using GuixSD (freedom, things for
the average Jane, things for devs, things for sysadmins, etc.)


-- 
Luis Felipe López Acevedo
http://sirgazil.bitbucket.org/

Re: [ART] Website mockup

[Taylan Ulrich Bayırlı/Kammer]

Luis Felipe López Acevedo <felipe.lopez@openmailbox.org> writes:

> Hi,
>
> Here is a mockup for the website:
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png
>
> And some variants with white and yellow headers:
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png
>
> As always, feedback is very welcome.

Great!  I like it how friendly the page is.  My only beef is that I
dislike "plastic" looks, but that might be just my personal preference.
Would have preferred a more "professional" look to give a hint of the
technical superiority of the system. ;-)

I think I like the yellow header most.

Taylan

Re: [ART] Website mockup

[Amirouche Boubekki]

[-- Attachment #1: Type: text/plain, Size: 3128 bytes --]

,

Luis Felipe López Acevedo <felipe.lopez@openmailbox.org> writes:

> Hi,
>
> Here is a mockup for the website:
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png

The black header looks strange because the rest of the page is very light.

>
> And some variants with white and yellow headers:
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png

I prefer that one because the logo looks better & header contrast is better.
It doesn't look strange with the next part, which has a strong color.

> http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png

- less constrast
- logo is good but I'm not sure it will work the same over a white
background

Here my first few impressions:

About the part just below the header :

- in the text, emphase done in black seems "bizarre" to me
- the monitor looks good, maybe the screen has too much shadow
- the banner is good & convincing

- the button are too dark and the text shadow shifts too far
- the color of the button goes with the background found in the monitor,
what happens when the background change?
- I'm not sure about the button color (complementary color).
- Maybe a button like http://clojurescriptone.com/ might work better
(without the font and smaller)
- I think that only the download button (with last version number
somewhere) is required. Overview is already visible in screenshot section &
header.
- I'm not sure the wave separator is the best thing. That's what makes it
more "casual".

In the screenshot section, maybe a link to "overview" is required.

There is no blog link in the header
There is no about link in footer. I'm not sure an about page is required,
since the frontpage can do that job.

There is no mention of guix package manager.

Maybe doing a mockup including a FSF campaign banner, to avoid akward
design in this situations.

The overall looks very good. It's looks unique & modern. The page is not
too large & the font size not too small. Very good job. Among all the
above, it's really the complementary color that looks odd. It has its
strength, but it seem old fashioned to me.




On Mon Feb 16 2015 at 10:14:17 AM Taylan Ulrich Bayırlı/Kammer <
taylanbayirli@gmail.com> wrote:

> Luis Felipe López Acevedo <felipe.lopez@openmailbox.org> writes:
>
> > Hi,
> >
> > Here is a mockup for the website:
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png
> >
> > And some variants with white and yellow headers:
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-
> yellow-header.png
> >
> > As always, feedback is very welcome.
>
> Great!  I like it how friendly the page is.  My only beef is that I
> dislike "plastic" looks, but that might be just my personal preference.
> Would have preferred a more "professional" look to give a hint of the
> technical superiority of the system. ;-)
>
> I think I like the yellow header most.
>
> Taylan
>
>

[-- Attachment #2: Type: text/html, Size: 7869 bytes --]

Re: [ART] Website mockup

[Luis Felipe López Acevedo]

El lun, 16-02-2015 a las 11:09 +0000, Amirouche Boubekki escribió:
> , 
> 
> 
> Luis Felipe López Acevedo <felipe.lopez@openmailbox.org> writes:
> 
> > Hi,
> >
> > Here is a mockup for the website:
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png
> 
> 
> The black header looks strange because the rest of the page is very
> light.
> 

I understand what you mean :)


> >
> > And some variants with white and yellow headers:
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png
> 
> I prefer that one because the logo looks better & header contrast is
> better.
> It doesn't look strange with the next part, which has a strong color.
> 

Me too.


> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png
> 
> 
> - less constrast
> - logo is good but I'm not sure it will work the same over a white
> background

The header background is supposed to stay yellow in this version, if you
go to another page, for example. It is just that it matches the current
background color of the section below it.


> Here my first few impressions:
> 
> 
> About the part just below the header :
> 
> 
> - in the text, emphase done in black seems "bizarre" to me
> - the monitor looks good, maybe the screen has too much shadow


I like those two things though :)


> - the banner is good & convincing
> 
> 
> - the button are too dark and the text shadow shifts too far 
> - the color of the button goes with the background found in the
> monitor, what happens when the background change?

Usually, the default background of the system changes only with major
releases, and websites tend to be updated as well for the new version,
so I guess the buttons would change accordingly.

> - I'm not sure about the button color (complementary color).
> 

But I'm with you on this one. I'm not sure either :)

> - Maybe a button like http://clojurescriptone.com/ might work better
> (without the font and smaller)
> - I think that only the download button (with last version number
> somewhere) is required. Overview is already visible in screenshot
> section & header.


I like that idea: just the download button (with version number), and
include a link to the overview in the screenshots section.


> - I'm not sure the wave separator is the best thing. That's what makes
> it more "casual".


I feel the same way.


> In the screenshot section, maybe a link to "overview" is required.
> 
> 
> There is no blog link in the header
> There is no about link in footer. I'm not sure an about page is
> required, since the frontpage can do that job.


That's confusing, isn't it? I'll fix header and footer mismatch.

As for the "About" section, I was thinking on something like what is
used in blender.org.


> There is no mention of guix package manager.

I was thinking on doing that on the "Overview" and "Packages" pages. But
I think I can try adding something in the front page as well (advanced
package manager called GNU Guix).


> Maybe doing a mockup including a FSF campaign banner, to avoid akward
> design in this situations.


I don't think I understand what you mean here.


> The overall looks very good. It's looks unique & modern. The page is
> not too large & the font size not too small. Very good job. Among all
> the above, it's really the complementary color that looks odd. It has
> its strength, but it seem old fashioned to me.
> 

Thank you very much for the great feedback, Amirouche. I'm taking note
of all these for a next mockup.

Re: [ART] Website mockup

[Amirouche Boubekki]

2015-02-16 18:23 GMT+01:00 Luis Felipe López Acevedo
<felipe.lopez@openmailbox.org>:
> El lun, 16-02-2015 a las 11:09 +0000, Amirouche Boubekki escribió:
>> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png
>>
>>
>> - less constrast
>> - logo is good but I'm not sure it will work the same over a white
>> background
>
> The header background is supposed to stay yellow in this version, if you
> go to another page, for example. It is just that it matches the current
> background color of the section below it.

Ok, I wasn't thinking about that.

What wanted to say: if the logo must appear in the frontpage or like
in this case in the header
it must be the official logo for consistency reason, so that the GSD
visual identidy is easier to remember.

I'm not sure what is the official logo, that said the one used in the
yellow header doesn't have enough contrast over a white background. I
don't know maybe it can work.



>
>
>> Here my first few impressions:
>>
>>
>> About the part just below the header :
>>
>>
>> - in the text, emphase done in black seems "bizarre" to me
>> - the monitor looks good, maybe the screen has too much shadow
>
>
> I like those two things though :)
>
>
>> - the banner is good & convincing
>>
>>
>> - the button are too dark and the text shadow shifts too far
>> - the color of the button goes with the background found in the
>> monitor, what happens when the background change?
>
> Usually, the default background of the system changes only with major
> releases, and websites tend to be updated as well for the new version,
> so I guess the buttons would change accordingly.

You are right.

>> - I'm not sure about the button color (complementary color).
>>
>
> But I'm with you on this one. I'm not sure either :)


>
>> - Maybe a button like http://clojurescriptone.com/ might work better
>> (without the font and smaller)
>> - I think that only the download button (with last version number
>> somewhere) is required. Overview is already visible in screenshot
>> section & header.
>
>
> I like that idea: just the download button (with version number), and
> include a link to the overview in the screenshots section.
>
>
>> - I'm not sure the wave separator is the best thing. That's what makes
>> it more "casual".
>
>
> I feel the same way.
>
>
>> In the screenshot section, maybe a link to "overview" is required.
>>
>>
>> There is no blog link in the header
>> There is no about link in footer. I'm not sure an about page is
>> required, since the frontpage can do that job.
>
>
> That's confusing, isn't it? I'll fix header and footer mismatch.
>
> As for the "About" section, I was thinking on something like what is
> used in blender.org.

Again, I agree.

>
>> There is no mention of guix package manager.
>
> I was thinking on doing that on the "Overview" and "Packages" pages. But
> I think I can try adding something in the front page as well (advanced
> package manager called GNU Guix).
>
>
>> Maybe doing a mockup including a FSF campaign banner, to avoid akward
>> design in this situations.
>
>
> I don't think I understand what you mean here.

I can't find an example right now. It's wikipedia that does that for
its crowdfunding campaign.

>
>
>> The overall looks very good. It's looks unique & modern. The page is
>> not too large & the font size not too small. Very good job. Among all
>> the above, it's really the complementary color that looks odd. It has
>> its strength, but it seem old fashioned to me.
>>
>
> Thank you very much for the great feedback, Amirouche. I'm taking note
> of all these for a next mockup.

Re: [ART] Website mockup

[Luis Felipe López Acevedo]

El lun, 16-02-2015 a las 19:11 +0100, Amirouche Boubekki escribió:
> 2015-02-16 18:23 GMT+01:00 Luis Felipe López Acevedo
> <felipe.lopez@openmailbox.org>:
> > El lun, 16-02-2015 a las 11:09 +0000, Amirouche Boubekki escribió:
> >> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png
> >>
> >>
> >> - less constrast
> >> - logo is good but I'm not sure it will work the same over a white
> >> background
> >
> > The header background is supposed to stay yellow in this version, if you
> > go to another page, for example. It is just that it matches the current
> > background color of the section below it.
> 
> Ok, I wasn't thinking about that.
> 
> What wanted to say: if the logo must appear in the frontpage or like
> in this case in the header
> it must be the official logo for consistency reason, so that the GSD
> visual identidy is easier to remember.
> 
> I'm not sure what is the official logo, that said the one used in the
> yellow header doesn't have enough contrast over a white background. I
> don't know maybe it can work.

No, I think you're right. It's important to be consistent for visual
identity. That's why I prefer the white header.

By the way, the official logo is here:

http://www.gnu.org/software/guix/graphics/

And the SVG file there shows accepted variations.

> >> Maybe doing a mockup including a FSF campaign banner, to avoid akward
> >> design in this situations.
> >
> >
> > I don't think I understand what you mean here.
> 
> I can't find an example right now. It's wikipedia that does that for
> its crowdfunding campaign.
> 

Ah, you mean that the design should adapt easily for the occasional use
of those kinds of banners?

Re: [ART] Website mockup

[Adam Pribyl]

The design is of course nice, but looks quite out of GNU style. No problem 
with that, just it is bit surprising.

The other thing is that the page design outperforms the state of the 
distribution - sorry to say that, but while page feel very user friendly, 
the distribution has a way to go...


Adam Pribyl

Re: [ART] Website mockup

[Luis Felipe López Acevedo]

El mar, 17-02-2015 a las 17:54 +0100, Adam Pribyl escribió:
> The design is of course nice, but looks quite out of GNU style. No problem 
> with that, just it is bit surprising.
> 

With GNU style you mean the colours used in gnu.org?

> The other thing is that the page design outperforms the state of the 
> distribution - sorry to say that, but while page feel very user friendly, 
> the distribution has a way to go...
> 
> 
> Adam Pribyl
> 

Thank you for the feedback, Adam. I'm taking note of your points as well
for the next mockup.

Re: [ART] Website mockup

[Adam Pribyl]

[-- Attachment #1: Type: TEXT/PLAIN, Size: 387 bytes --]

On Tue, 17 Feb 2015, Luis Felipe López Acevedo wrote:

> El mar, 17-02-2015 a las 17:54 +0100, Adam Pribyl escribió:
>> The design is of course nice, but looks quite out of GNU style. No problem
>> with that, just it is bit surprising.
>>
>
> With GNU style you mean the colours used in gnu.org?

Just gnu.org is not yet "web 2.0 like" or how it is called now..

Adam Pribyl

Re: [ART] Website mockup

[Luis Felipe López Acevedo]

El lun, 16-02-2015 a las 10:14 +0100, Taylan Ulrich Bayırlı/Kammer
escribió:
> Luis Felipe López Acevedo <felipe.lopez@openmailbox.org> writes:
> 
> > Hi,
> >
> > Here is a mockup for the website:
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png
> >
> > And some variants with white and yellow headers:
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png
> >
> > http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png
> >
> > As always, feedback is very welcome.
> 
> Great!  I like it how friendly the page is.  My only beef is that I
> dislike "plastic" looks, but that might be just my personal preference.
> Would have preferred a more "professional" look to give a hint of the
> technical superiority of the system. ;-)
> 
> I think I like the yellow header most.
> 
> Taylan

Thank you for the feedback, Tylan. I think I understand what you mean by
"plastic" and "professional". I'll take note of that for a next version
of the mockup.

Re: [ART] Website mockup

[宋文武]

Luis Felipe López Acevedo <felipe.lopez@openmailbox.org> writes:

> Hi,
>
> Here is a mockup for the website:
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-black-header.png
>
> And some variants with white and yellow headers:
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-white-header.png
>
> http://sirgazil.bitbucket.org/static/temp/img/guix/home-yellow-header.png
>
> As always, feedback is very welcome.
Look cute to me!