[IPFire Artwork] PSD from new Homepage

Maurice Gesswein zerpixelung at gmail.com
Mon Mar 27 23:25:12 CEST 2017


Hey Sven!

You were invited :) At some screens I added comments. Make sure to read
them and feel free to create your own if there are open questions.

At the "PL - Icons" screen you can download the icons as SVG. The 2 big
background images as well as the IPFire Tux can be downloaded from here:
https://www.dropbox.com/sh/1j3p4f3igjxk2u8/AADDwHKvFIOtOC92EyYR8DJja/Website/Export?dl=0
I'm aware that the filesize of Tux is a bit high. But we need him bigger
for Hi-Res/Retina Screens. When I throw him though compressor.io I get
pixelated flames as output :(

At the Styleguide tab you can grap all the used colors. Perhaps it doesn't
make sense to put the rbga colors inside the global color palette. I had to
name them because these are single colors for Zeplin.

As discussed earlier - I used a 24px gap for the grid for every viewport. I
didn't touch anything else. Within the shared Dropbox folder you find PNGs
of all 5 key-viewports with the grid as an overlay.

Let me know if you have any concerns or questions.


--

@Michael

What should I do next? Bring the Captive Portal into Zeplin or the already
designed Feature page of the IPFire Website?

--

@All

All designs which are located in the Zeplin project are also available here
as PNGs:
https://www.dropbox.com/sh/1j3p4f3igjxk2u8/AAAmebh2c1ay1t-z4UKrsWBAa?dl=0


Best,
Maurice

On Mon, Mar 27, 2017 at 7:31 AM, Sven <sven.hoehn at posteo.de> wrote:

> Hi,
>
> my zeplin.io email is: sven.hoehn at ipfire.org
>
> We can try the SVG tinting method.
>
> I installed Adium X, but never see somebody online, so I don’t know if it
> works.
>
> On 26 Mar 2017, at 22:06, Maurice Gesswein <zerpixelung at gmail.com> wrote:
>
> Hi all,
>
> I'm going to release the first website screens and parts of the pattern
> lib at Zeplin. Everyone who wants to access the project need a free Zeplin
> account which I can invite. Sorry for the inconvenience. Additionally I can
> share PNGs of each screen. But you won't able to read comments which are
> written within the Zeplin project.
>
>    1. Create a free account at www.zeplin.io
>    2. Let me know the email address of your account to invite you to the
>    project
>
> --
>
> @Sven
>
> Do you have experience with tinting SVG images?
> https://css-tricks.com/cascading-svg-fill-color/
>
> Would this method work for you? If so we need all icons in only one color
> (black).
>
> PS: Did you already tried out a Jabber client for MacOS?
>
> On Sat, Mar 25, 2017 at 11:00 AM, Michael Tremer <
> michael.tremer at ipfire.org> wrote:
>
>> Hi,
>>
>> On Fri, 2017-03-24 at 18:01 +0100, Maurice Gesswein wrote:
>> > At this stage it doesn't make sense to share the uncompleted stuff.
>> > It would cause a lot of questions which will not appear when I
>> > provide the complete set of viewports. You already know the final
>> > designs. I didn't change anything. Please give me the time to provide
>> > a professional handover to Sven. Otherwise it will become messy,
>> > believe me ;) I'm sorry that it takes some time. I'll publish the
>> > designs asap via Zeplin.
>>
>> I didn't intend to put any pressure on at all. I just care about
>> everyone being happy and not getting stuck :)
>>
>> > I'll prepare the captive portal designs as well.
>>
>> Okay!
>>
>> > Regarding Slack:
>> > Valid points against it. I agree. Jabber should do the trick as well.
>> > Not that comfortable but fine for me.
>> >
>> > Best,
>> > Maurice
>>
>> -Michael
>>
>> >
>> > Am 24.03.2017 2:29 nachm. schrieb "Daniel Weismüller" <daniel.weismue
>> > ller at ipfire.org>:
>> > > Hi
>> > > Here are some infos about our jabber server.
>> > > http://planet.ipfire.org/post/opening-the-ipfire-jabber-server
>> > > or look here
>> > > http://wiki.ipfire.org/en/community/talk.ipfire.org/start
>> > > Weekdays I'm on there and mostly Michael, too.
>> > > -
>> > > Daniel
>> > > Am 24.03.2017 um 13:18 schrieb Sven:
>> > > > Hello,
>> > > > there are Open-Source Alternatives to Slack for example: https://
>> > > > about.mattermost.com
>> > > > I have nothing against this mailing list but when you have a
>> > > > longer conversation I think that it becomes a little bit hard to
>> > > > read, and for a conversation over the phone we don’t have enough
>> > > > to discuss (at the moment) :-D
>> > > > But IM with Jabber is fine for me.
>> > > >
>> > > > Greetings,
>> > > > Sven
>> > > >
>> > > > > Am 24.03.2017 um 12:57 schrieb Michael Tremer <michael.tremer at i
>> > > > > pfire.org>:
>> > > > >
>> > > > > Hi,
>> > > > >
>> > > > > On Wed, 2017-03-22 at 18:53 +0100, Maurice Gesswein wrote:
>> > > > > > I've copied the current Homepage design from Photoshop to
>> > > > > > Sketch to
>> > > > > > speed up in the future. Same with the styleguide/pattern
>> > > > > > library.
>> > > > >
>> > > > > Cool. Can we access that in some way? The Dropbox thing has
>> > > > > vanished,
>> > > > > too and I had someone working on the Captive Portal which we
>> > > > > don't have
>> > > > > a copy of.
>> > > > >
>> > > > > > Next step is to design the key viewports for the homepage.
>> > > > > > Already
>> > > > > > started with that. I'm pretty busy in the evenings with
>> > > > > > private stuff
>> > > > > > like home improvements and annoying things which needs to be
>> > > > > > done.
>> > > > > >
>> > > > > > Furthermore I had the idea to create a Slack channel for a
>> > > > > > more
>> > > > > > comfortable collaboration with Sven. Discuss and share stuff
>> > > > > > very
>> > > > > > easily and fast. I have very good experience with that tool
>> > > > > > during
>> > > > > > the last ~2 years.
>> > > > > >
>> > > > > > What do you think Michael, would you sign up and create a
>> > > > > > IPFire
>> > > > > > Slack channel? The free basic version is totally enough.
>> > > > >
>> > > > > I am very much against Slack. There are two main reasons:
>> > > > >
>> > > > > a) It is proprietary. We cannot rely on this being free for
>> > > > > forever and
>> > > > > I do not want to force anyone to sign up for something in order
>> > > > > to
>> > > > > communicate with people.
>> > > > >
>> > > > > b) We cannot archive it. The big advantage of a mailing list is
>> > > > > that we
>> > > > > have an archive of all messages that everyone can access from
>> > > > > everywhere.
>> > > > >
>> > > > > That's why I would like to keep the main conversation on this
>> > > > > list if
>> > > > > possible. For some work it makes more sense to do some instant
>> > > > > messaging or use a phone.
>> > > > >
>> > > > > For that we do have our own Jabber server and a SIP VoIP server
>> > > > > that
>> > > > > you can even call from your landline (this might be quite handy
>> > > > > since
>> > > > > you two are in different countries):
>> > > > >
>> > > > >  http://wiki.ipfire.org/en/community/talk.ipfire.org/start
>> > > > >
>> > > > > I hope this makes up for Slack. But if you have any other
>> > > > > reasons I
>> > > > > forgot to convince me, feel free to do so :)
>> > > > >
>> > > > > Best,
>> > > > > -Michael
>> > > > >
>> > > > > > Best,
>> > > > > > Maurice
>> > > > > >
>> > > > > > Am 22.03.2017 6:24 nachm. schrieb "Michael Tremer" <michael.t
>> > > > > > remer at ip
>> > > > > > fire.org>:
>> > > > > > > Hello guys,
>> > > > > > >
>> > > > > > > just wanted to check in on you and see how things are going
>> > > > > > > since
>> > > > > > > it has gone a
>> > > > > > > little bit quiet here.
>> > > > > > >
>> > > > > > > I am traveling over the next days again, but in case there
>> > > > > > > is
>> > > > > > > anything I can
>> > > > > > > help out with, please send me an email.
>> > > > > > >
>> > > > > > > Best,
>> > > > > > > -Michael
>> > > > > > >
>> > > > > > > On Wed, 2017-03-15 at 14:44 +0100, Sven wrote:
>> > > > > > > > Hey Maurice,
>> > > > > > > > no problem.
>> > > > > > > > I will do it with the variables: https://getbootstrap.com
>> > > > > > > > /css/#gr
>> > > > > > >  id-less so we
>> > > > > > > > have complete control.
>> > > > > > > >
>> > > > > > > > Greetings,
>> > > > > > > > Sven
>> > > > > > > >
>> > > > > > > >
>> > > > > > > > > On 15 Mar 2017, at 14:37, Maurice Gesswein <zerpixelung
>> > > > > > > > > @gmail.c
>> > > > > > >  om> wrote:
>> > > > > > > > > Hey Sven,
>> > > > > > > > >
>> > > > > > > > > do you think we can do a tiny customization at
>> > > > > > > > > Bootstrap 4's
>> > > > > > >  column grid
>> > > > > > > > > system? Just 24px gutter width instead of 30px? I found
>> > > > > > > > > a short
>> > > > > > >  guide for
>> > > > > > > > > that. Seems pretty easy.
>> > > > > > > > >
>> > > > > > > > > http://arnique.net/web-design/58/a-quick-guide-to-chang
>> > > > > > > > > ing-boot
>> > > > > > >  straps-gutter
>> > > > > > > > > -width/
>> > > > > > > > >
>> > > > > > > > > From my point of view it looks like you just need to
>> > > > > > > > > change
>> > > > > > >  this:
>> > > > > > > > > > .col-xs-1, .col-sm-1, .col-md-1 ...{more columns} {
>> > > > > > > > > >   padding-right: 15px;
>> > > > > > > > > >   padding-left: 15px;
>> > > > > > > > > > }
>> > > > > > > > > > .row {
>> > > > > > > > > >   margin-right: -15px;
>> > > > > > > > > >   margin-left: -15px;
>> > > > > > > > > > }
>> > > > > > > > >
>> > > > > > > > > to this:
>> > > > > > > > >
>> > > > > > > > > > .col-xs-1, .col-sm-1, .col-md-1 ...{more columns} {
>> > > > > > > > > >   padding-right: 12px;
>> > > > > > > > > >   padding-left: 12px;
>> > > > > > > > > > }
>> > > > > > > > > > .row {
>> > > > > > > > > >   margin-right: -12px;
>> > > > > > > > > >   margin-left: -12px;
>> > > > > > > > > > }
>> > > > > > > > >
>> > > > > > > > > That would help me to follow consistent UI metrics.
>> > > > > > > > >
>> > > > > > > > > Best, Maurice
>> > > > > > > > >
>> > > > > > > > > On Tue, Mar 14, 2017 at 3:52 PM, Michael Tremer
>> > > > > > > > > <michael.tremer
>> > > > > > >  @ipfire.org>
>> > > > > > > > > wrote:
>> > > > > > > > > > It would be nice to keep the conversation in English
>> > > > > > > > > > since
>> > > > > > >  there are
>> > > > > > > > > > people
>> > > > > > > > > > reading our mailing lists who don't speak German.
>> > > > > > > > > >
>> > > > > > > > > > I know it might be a little bit complicated in the
>> > > > > > > > > > beginning
>> > > > > > >  but I am sure
>> > > > > > > > > > we
>> > > > > > > > > > will all get used to it :)
>> > > > > > > > > >
>> > > > > > > > > > -Michael
>> > > > > > > > > >
>> > > > > > > > > > On Tue, 2017-03-14 at 15:10 +0100, Sven wrote:
>> > > > > > > > > > > Hallo Maurice,
>> > > > > > > > > > > ich antworte einfach mal in Deutsch. Englisch kann
>> > > > > > > > > > > ich gut
>> > > > > > >  lesen und
>> > > > > > > > > > verstehen
>> > > > > > > > > > > aber schreibe es nicht so gern.
>> > > > > > > > > > >
>> > > > > > > > > > > Im Moment baut die Seite ja auf Bootstrap auf, wird
>> > > > > > > > > > > das
>> > > > > > >  nicht
>> > > > > > > > > > überflüssig wenn
>> > > > > > > > > > > du sowohl Grid als auch Pattern Library aufbaust?
>> > > > > > > > > > > In wie weit wir die Pattern Library über alle
>> > > > > > > > > > > Projekte
>> > > > > > >  teilen sollten
>> > > > > > > > > > wir
>> > > > > > > > > > > sehen wenn die Webseite steht, da die im Moment
>> > > > > > > > > > > Priorität
>> > > > > > >  hat.
>> > > > > > > > > > > Freu mich auf die Zusammenarbeit.
>> > > > > > > > > > >
>> > > > > > > > > > > Grüße,
>> > > > > > > > > > > Sven
>> > > > > > > > > > >
>> > > > > > > > > > > > On 14 Mar 2017, at 14:25, Maurice Gesswein <zerpi
>> > > > > > > > > > > > xelung at g
>> > > > > > >  mail.com>
>> > > > > > > > > > wrote:
>> > > > > > > > > > > > Don't worry about the delay :)
>> > > > > > > > > > > >
>> > > > > > > > > > > > As far as I can remember I didn't created
>> > > > > > > > > > > > responsive
>> > > > > > >  versions of the
>> > > > > > > > > > IPFire
>> > > > > > > > > > > > Website. It makes sense that these are at least
>> > > > > > > > > > > > almost
>> > > > > > >  done before
>> > > > > > > > > > Sven
>> > > > > > > > > > > > starts with coding. I don't want that Sven has to
>> > > > > > > > > > > > guess
>> > > > > > >  the font
>> > > > > > > > > > sizes,
>> > > > > > > > > > > > paddings, margins, line-height and so on. That's
>> > > > > > > > > > > > not his
>> > > > > > >  job :) So
>> > > > > > > > > > please
>> > > > > > > > > > > > stay tuned for a proper handover. I'm sure that
>> > > > > > > > > > > > will help
>> > > > > > >  Sven a lot.
>> > > > > > > > > > > > @Sven
>> > > > > > > > > > > > Hey Sven, nice to meet you :)
>> > > > > > > > > > > >
>> > > > > > > > > > > > I just want to give some information beforehand.
>> > > > > > > > > > > > You may
>> > > > > > >  already know
>> > > > > > > > > > that
>> > > > > > > > > > > > but I just want to get sure that we are both on
>> > > > > > > > > > > > the same
>> > > > > > >  level.
>> > > > > > > > > > > > My designs and layouts are based on a 8x8px grid
>> > > > > > > > > > > > (4x4px
>> > > > > > >  fallback) and
>> > > > > > > > > > are
>> > > > > > > > > > > > Atomic Design driven. Touch Targets are at least
>> > > > > > > > > > > > 48x48px.
>> > > > > > >  In some edge
>> > > > > > > > > > cases
>> > > > > > > > > > > > there might be less. Means that you will never
>> > > > > > > > > > > > see a
>> > > > > > >  "margin: 50px"
>> > > > > > > > > > because
>> > > > > > > > > > > > 50 is not dividable by 8 or 4. I would very
>> > > > > > > > > > > > appreciate if
>> > > > > > >  you could
>> > > > > > > > > > consider
>> > > > > > > > > > > > that within your code. That method provides a
>> > > > > > > > > > > > great
>> > > > > > >  support to follow
>> > > > > > > > > > a
>> > > > > > > > > > > > consistent line. I'm pretty sure that I'll
>> > > > > > > > > > > > provide all
>> > > > > > >  designs via
>> > > > > > > > > > > > zeplin.io. From that tool you will get (almost)
>> > > > > > > > > > > > every
>> > > > > > >  information you
>> > > > > > > > > > need.
>> > > > > > > > > > > > Margins, paddings, colors, font size, etc.
>> > > > > > > > > > > >
>> > > > > > > > > > > > Also I'm a big fan of Pattern Libraries. At least
>> > > > > > > > > > > > when it
>> > > > > > >  comes to the
>> > > > > > > > > > > > IPFire WUI there will be a lot of pattern usage
>> > > > > > > > > > > > to save
>> > > > > > >  time on your
>> > > > > > > > > > side.
>> > > > > > > > > > > > My strong guess is that it would make sense to
>> > > > > > > > > > > > have
>> > > > > > >  different Pattern
>> > > > > > > > > > > > Libraries for the Website/FireInfo and WUI. But
>> > > > > > > > > > > > that is
>> > > > > > >  totally up to
>> > > > > > > > > > you
>> > > > > > > > > > > > how to deal with that :) I think you already saw
>> > > > > > > > > > > > the
>> > > > > > >  first designs for
>> > > > > > > > > > the
>> > > > > > > > > > > > WUI?
>> > > > > > > > > > > >
>> > > > > > > > > > > > Hope that doesn't sound like an arrogant
>> > > > > > > > > > > > Designer.
>> > > > > > >  Believe me that one
>> > > > > > > > > > of my
>> > > > > > > > > > > > most important goals is to make the DEVs life as
>> > > > > > >  comfortable as
>> > > > > > > > > > possible by
>> > > > > > > > > > > > providing well prepared handovers. My experience
>> > > > > > > > > > > > with
>> > > > > > >  that is that we
>> > > > > > > > > > will
>> > > > > > > > > > > > get a great output and a professional looking
>> > > > > > > > > > > > UI/Website.
>> > > > > > > > > > > >
>> > > > > > > > > > > >
>> > > > > > > > > > > > Please let me know if you have any questions or
>> > > > > > > > > > > > concerns.
>> > > > > > > > > > > >
>> > > > > > > > > > > > Best, M
>> > > > > > > > > > > >
>> > > > > > > > > > > > On Tue, Mar 14, 2017 at 1:02 PM, Michael Tremer
>> > > > > > > > > > > > <michael.
>> > > > > > >  tremer at ipfire
>> > > > > > > > > > .org>
>> > > > > > > > > > > > wrote:
>> > > > > > > > > > > > > Hello Maurice,
>> > > > > > > > > > > > >
>> > > > > > > > > > > > > thank you for getting back in touch.
>> > > > > > > > > > > > >
>> > > > > > > > > > > > > On Tue, 2017-03-14 at 12:58 +0100, Maurice
>> > > > > > > > > > > > > Gesswein
>> > > > > > >  wrote:
>> > > > > > > > > > > > > > Hi Sven and rest of the gang,
>> > > > > > > > > > > > > >
>> > > > > > > > > > > > > > I nearly thought that the project has died.
>> > > > > > > > > > > > > > I'm glad
>> > > > > > >  to see that
>> > > > > > > > > > this is
>> > > > > > > > > > > > > not
>> > > > > > > > > > > > > > the case. Since it's very long time ago I
>> > > > > > > > > > > > > > have to
>> > > > > > >  check the old
>> > > > > > > > > > PSD
>> > > > > > > > > > > > > files
>> > > > > > > > > > > > > > within the next days and make sure that you
>> > > > > > > > > > > > > > get a
>> > > > > > >  good handover.
>> > > > > > > > > > > > > I can only apologise that everything took so
>> > > > > > > > > > > > > long. I
>> > > > > > >  would have
>> > > > > > > > > > liked to
>> > > > > > > > > > > > > see
>> > > > > > > > > > > > > this realised quicker but time just didn't
>> > > > > > > > > > > > > allow me to
>> > > > > > >  work on it.
>> > > > > > > > > > Luckily
>> > > > > > > > > > > > > Sven
>> > > > > > > > > > > > > is now on board to help out and together we
>> > > > > > > > > > > > > will get
>> > > > > > >  this done now!
>> > > > > > > > > > > > > > Perhaps I'll handover the designs via
>> > > > > > > > > > > > > > zeplin.io. I've
>> > > > > > >  made very
>> > > > > > > > > > good
>> > > > > > > > > > > > > > experience with that tool during last year.
>> > > > > > > > > > > > > > Please
>> > > > > > >  give me some
>> > > > > > > > > > days for
>> > > > > > > > > > > > > > preparing since I'm very busy right now.
>> > > > > > > > > > > > >
>> > > > > > > > > > > > > So where have we stopped? As far as I can see
>> > > > > > > > > > > > > the
>> > > > > > >  designs for the
>> > > > > > > > > > index
>> > > > > > > > > > > > > and
>> > > > > > > > > > > > > features page are done. Is there anything I
>> > > > > > > > > > > > > forgot?
>> > > > > > > > > > > > >
>> > > > > > > > > > > > > I think what Sven mainly needs is the
>> > > > > > > > > > > > > background images
>> > > > > > >  that you
>> > > > > > > > > > used and
>> > > > > > > > > > > > > so on.
>> > > > > > > > > > > > > I am quite sure this doesn't need to be PSD in
>> > > > > > >  particular.
>> > > > > > > > > > > > > If required we can have a conference call with
>> > > > > > >  everyone, but I am
>> > > > > > > > > > not sure
>> > > > > > > > > > > > > if
>> > > > > > > > > > > > > there are any big questions that we cannot
>> > > > > > > > > > > > > discuss on
>> > > > > > >  the list.
>> > > > > > > > > > > > > Best,
>> > > > > > > > > > > > > -Michael
>> > > > > > > > > > > > >
>> > > > > > > > > > > > > > Thanks and best regards,
>> > > > > > > > > > > > > > Maurice
>> > > > > > > > > > > > > >
>> > > > > > > > > > > > > > On Tue, Mar 14, 2017 at 12:03 PM, Michael
>> > > > > > > > > > > > > > Tremer <mic
>> > > > > > >  hael.tremer at i
>> > > > > > > > > > pfire.
>> > > > > > > > > > > > > org>
>> > > > > > > > > > > > > > wrote:
>> > > > > > > > > > > > > > > Hi,
>> > > > > > > > > > > > > > >
>> > > > > > > > > > > > > > > to send emails to the list, you just need
>> > > > > > > > > > > > > > > to email
>> > > > > > >  to
>> > > > > > > > > > > > > > >   ipfire-artwork at lists.ipfire.org
>> > > > > > > > > > > > > > >
>> > > > > > > > > > > > > > >
>> > > > > > > > > > > > > > > I copied Maurice to your request and we
>> > > > > > > > > > > > > > > will wait
>> > > > > > >  until he
>> > > > > > > > > > replies.
>> > > > > > > > > > > > > > > Best,
>> > > > > > > > > > > > > > > -Michael
>> > > > > > > > > > > > > > >
>> > > > > > > > > > > > > > > On Mon, 2017-03-13 at 19:51 +0100, Sven
>> > > > > > > > > > > > > > > wrote:
>> > > > > > > > > > > > > > > > Hi Maurice,
>> > > > > > > > > > > > > > > > can you please send me the PSD files from
>> > > > > > > > > > > > > > > > the new
>> > > > > > >  layout
>> > > > > > > > > > (Homepage
>> > > > > > > > > > > > > and
>> > > > > > > > > > > > > > > > Featurepage)?
>> > > > > > > > > > > > > > > >
>> > > > > > > > > > > > > > > > Thanks,
>> > > > > > > > > > > > > > > > Sven
>> > > > > > > > > > > > > >
>> > > > > > > > > > > > >
>> > > > > > > > > > > >
>> > > > > > > > > > >
>> > > > > > > > > >
>> > > > > > > > >
>> > > > > > > >
>> > >
>> > >
>>
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20170327/b3b1ca75/attachment-0001.html>


More information about the IPFire-Artwork mailing list