[IPFire Artwork] Website

Maurice Gesswein zerpixelung at gmail.com
Tue Apr 11 14:58:30 CEST 2017


Regarding the icons: I would like to use the material design icon rules.
With rules I mean the guidelines to create those icons. E.g. 2px stroke
strength.
Reason: it's easy to create custom icons with these rules and the keep a
consistent look. We will need a lot of icons for the WUI.

Am 11.04.2017 2:47 nachm. schrieb "Sven" <sven.hoehn at posteo.de>:

>
> On 11. Apr 2017, at 14:43, Maurice Gesswein <zerpixelung at gmail.com> wrote:
>
> Hi all,
>
> I agree. Good job so far Sven. Thanks.
>
> I see couple of more minor bugs I would like to fix. Can we please create
> a to-do list which can be edit and tracked by all involved people? Michael,
> can you set up something?
>
>
> If Michael can add a new category for the website in the ipfire
> bugtracker, than we can add the issues there.
>
>
> At the moment I design some key viewports for the features page and the
> captive portal in parallel.
>
> Michael, if you want to implement new copies, images etc. let me know and
> I can design an additional or replacement for a section of the homepage.
>
> Best,
> Maurice
>
> Am 11.04.2017 12:26 nachm. schrieb "Michael Tremer" <
> michael.tremer at ipfire.org>:
>
>> Hi,
>>
>> so finally I took the time and had a close look at the current version of
>> the
>> website and I really really really like it so far.
>>
>> For me it mainly has some sort of soul. The old website was just blank and
>> didn't really present things very well. It just delivered the plain
>> content.
>>
>> Very well done guys.
>>
>> But this is only the start :) There is more ahead and I am really looking
>> forward to present everything to our community soon!
>>
>> ----
>>
>> What I at the moment don't get from the website when I open it is that
>> this is
>> saying "firewall" in any sense. I don't mean just the word but visually
>> stating
>> this anywhere.
>>
>> It is not a big issue for me but at least in the block below we have to
>> make
>> this clearer what IPFire actually is. This doesn't have much to do with
>> the
>> design. This is just content.
>>
>> After a general introduction the reader gets to the latest news!
>>
>> And then how to support the project and contribute (at least financially
>> here).
>>
>> Good flow.
>>
>> ----
>>
>> Overall I could not find any issues with the implementation so far.
>>
>> The mobile views look good. Most of the stuff that I do not like is
>> content. We
>> have to update this a bit.
>>
>> One thing is that the arrow at the bottom of the page that scrolls it down
>> becomes invisible when hovering over it. Maybe it should become white
>> when the
>> background changes to red?
>>
>> And in the Wishlist section there is a line that says "86% funded" over
>> the
>> headline of the crowd funding name. This is a slightly lighter grey than
>> the
>> background and practically invisible.
>>
>> The link to the "Features" page is wrong on the top view. It points to:
>> http://d
>> ev.ipfire.org/featues (an r is missing).
>>
>> ----
>>
>> Regarding code:
>>
>> The CSS seems to be quite small (I like that a lot). However, how would
>> that get
>> translated from SCSS to CSS? Could you modify the Makefile so that this
>> is done
>> automatically when ever something has changed or so? I am not even sure
>> what
>> tools are required to build the CSS. Can we document that somehwere, too?
>>
>
> Small CSS? It has 5385 lines at the moment, is not that small :-) But in
> the live version I will compress the code.
> For the CSS compilation I use a program called Codekit that complies the
> CSS every time I save the document.
> But I will look for something that can do that step on the server.
>
>
>> We need to do a spring clean then. Will we continue to use Font Awesome
>> icons or
>> the glyphicons? If not, bin them.
>
>
> Only the icons made by Maurice as svg. No Font Awesome or glyphicons.
>
> ----
>>
>> So I think we are very close to consider the frontpage done. What are the
>> next
>> steps?
>>
>> -Michael
>>
>> On Tue, 2017-04-11 at 07:09 +0200, Sven wrote:
>> > Hello,
>> > I updated the icons on the site.
>> > What else is wrong or to change?
>> >
>> >
>> > > On 9. Apr 2017, at 14:40, Maurice Gesswein <zerpixelung at gmail.com>
>> wrote:
>> > >
>> > > Sorry for the delay. I fixed the slice area for the icons. Sven,
>> please
>> > > export all of those again. All of them have now a square size. Source
>> pixel-
>> > > size is 24x24px.
>> > >
>> > > On Fri, Apr 7, 2017 at 4:40 PM, Sven <sven.hoehn at posteo.de> wrote:
>> > > > there are some strange bugs with flex and webkit. I’m not sure if
>> they
>> > > > come from Bootstrap or are real bugs in Webkit, but I think that I
>> can
>> > > > workaround them.
>> > > >
>> > > >
>> > > > > On 7. Apr 2017, at 12:01, Michael Tremer <
>> michael.tremer at ipfire.org>
>> > > > wrote:
>> > > > >
>> > > > > Hi,
>> > > > >
>> > > > > I just updated the dev site.
>> > > > >
>> > > > > I will run a job that does this automatically once an hour from
>> now on.
>> > > > >
>> > > > > Icons won't load at the moment... :(
>> > > > >
>> > > > > -Michael
>> > > > >
>> > > > > On Fri, 2017-04-07 at 08:11 +0200, Maurice Gesswein wrote:
>> > > > >>
>> > > > >>
>> > > > >> Am 06.04.2017 10:52 nachm. schrieb "Sven" <sven.hoehn at posteo.de
>> >:
>> > > > >> @Michael can you please update the files for the dev website
>> with the
>> > > > new
>> > > > >> commit?
>> > > > >>
>> > > > >> I correct a part of the errors written down by Maurice.
>> > > > >> Also edit the icons but now I have complete control with CSS but
>> the
>> > > > sizes are
>> > > > >> not right, have to check the SVG code for that. (
>> https://fvsch.com/code
>> > > > /svg-ic
>> > > > >> ons/how-to/)
>> > > > >>
>> > > > >> Seems to be that I was not clear enough, sorry. I provided the
>> icons in
>> > > > a
>> > > > >> wrong way. I'll send corrected icons at 24x24 this evening. Just
>> scale
>> > > > the
>> > > > >> existing icons to a square will not work as expected. The optical
>> > > > proportions
>> > > > >> will be lost. Feel free to compare them with the existing ones
>> and you
>> > > > will
>> > > > >> see the difference.
>> > > > >>
>> > > > >>
>> > > > >>
>> > > > >>
>> > > > >>> On 6. Apr 2017, at 15:19, Sven <sven.hoehn at posteo.de> wrote:
>> > > > >>>
>> > > > >>>
>> > > > >>>> On 6. Apr 2017, at 14:19, Michael Tremer <
>> michael.tremer at ipfire.org>
>> > > > >>>> wrote:
>> > > > >>>>
>> > > > >>>> First of all loads of thanks to you two for working on this.
>> This is
>> > > > >>>> really
>> > > > >>>> coming along looking awesome.
>> > > > >>>>
>> > > > >>>> How do we fix the "visual bugs" now?
>> > > > >>>
>> > > > >>> Good question,
>> > > > >>>
>> > > > >>>> I am not really on the same page with what should be finished
>> now and
>> > > > what
>> > > > >>>> not.
>> > > > >>>> Many pages look broken and I assume you just have not been
>> working on
>> > > > >>>> these, yet
>> > > > >>>> :)
>> > > > >>>
>> > > > >>> I didn’t look at any other page except the homepage and to me
>> it’s not
>> > > > clear
>> > > > >>> which page get a complete new layout and which page get only the
>> > > > “style-
>> > > > >>> update”.
>> > > > >>>
>> > > > >>>> And I have some smaller things that don't seem to look right in
>> > > > Firefox.
>> > > > >>>> Is this
>> > > > >>>> the right time to collect these, yet?
>> > > > >>>
>> > > > >>> Yes. But let us open a ticket on the bug tracker for the
>> webpage.
>> > > > >>> I think that some of the things that don’t look right to you
>> are the
>> > > > same
>> > > > >>> for Maurice.
>> > > > >>>
>> > > > >>> @Michael can you create the ticket? I’m not sure in which
>> category it
>> > > > goes.
>> > > > >>> Thanks.
>> > > > >>>
>> > > > >>>> -Michael
>> > > > >>>>
>> > > > >>>> On Wed, 2017-04-05 at 23:02 +0200, Maurice Gesswein wrote:
>> > > > >>>>> First output looks very promising for me. Thanks Sven!
>> > > > >>>>>
>> > > > >>>>> It seems to be that something went weird with the colors at
>> Zeplin.
>> > > > At
>> > > > >>>>> the
>> > > > >>>>> thumbnails they look good, when you open a screen they
>> doesn't. Good
>> > > > >>>>> news: Hex
>> > > > >>>>> codes are correct! :) I'll figure out what went wrong and
>> perhaps I
>> > > > >>>>> found
>> > > > >>>>> another tool like Zeplin which can be archived by Michael ;p
>> Stay
>> > > > tuned,
>> > > > >>>>> still
>> > > > >>>>> checking the feature set.
>> > > > >>>>>
>> > > > >>>>> Next thing is that Zeplin interprets the properties of e.g. a
>> font
>> > > > >>>>> correct but
>> > > > >>>>> might be unclear for others. Please use the properties ABOVE
>> the CSS
>> > > > box
>> > > > >>>>> as
>> > > > >>>>> the primary information about the selected element. Than your
>> > > > mentioned
>> > > > >>>>> opacity issue should be clear. The colors should look like
>> this:
>> > > > rgba(0,
>> > > > >>>>> 0, 0,
>> > > > >>>>> 0.6).
>> > > > >>>>>
>> > > > >>>>>
>> > > > >>>>> I found several things I would like to fix:
>> > > > >>>>> I noticed that I have to build up the Sketch file in a
>> different way
>> > > > >>>>> that
>> > > > >>>>> icons will be exported correct as 24x24px size. At the moment
>> they
>> > > > are
>> > > > >>>>> cropped. At their proper size of 24x24px it will be a lot
>> easier to
>> > > > >>>>> align
>> > > > >>>>> those vertically correct. I'll update the Icon screen asap.
>> > > > >>>>> Please recheck all opacity values. A lot of them are not
>> correct. I
>> > > > >>>>> guess
>> > > > >>>>> that's due to the CSS output of Zeplin and how I set up the
>> Sketch
>> > > > file.
>> > > > >>>>> Use
>> > > > >>>>> the values which are shown above the CSS box.
>> > > > >>>>> Please also recheck the line-heights of each font-style. Some
>> of
>> > > > them
>> > > > >>>>> has
>> > > > >>>>> strange values.
>> > > > >>>>> Font weight on buttons should be medium/600.
>> > > > >>>>> Ghost buttons doesn't have dropshadows
>> > > > >>>>> Lots of elements become smaller at <992px width. That should
>> not
>> > > > >>>>> happens.
>> > > > >>>>> It seems to be that the gaps of the grid were not set to 24px
>> > > > instead of
>> > > > >>>>> 30px.
>> > > > >>>>> Aren't they? If this would cause too much trouble, we can
>> leave it
>> > > > as it
>> > > > >>>>> is.
>> > > > >>>>> It doesn't have a bad impact.
>> > > > >>>>> "Fire" of IPFire in the top navigation is not bold/medium
>> > > > >>>>> The buttons has lots of different heights. Please set a fixed
>> height
>> > > > of
>> > > > >>>>> 36 for
>> > > > >>>>> default buttons and 48px for big buttons
>> > > > >>>>> The touch target area is missing at the default buttons (48px
>> > > > height).
>> > > > >>>>> That's
>> > > > >>>>> important to provide a good user experience at touch devices.
>> The
>> > > > >>>>> clickable
>> > > > >>>>> area must be big enough that fat finger hits it the first
>> time ;)
>> > > > >>>>> At viewport <992px the burger icon is not left aligned
>> anymore. But
>> > > > you
>> > > > >>>>> already said that you doesn't spend much time at the
>> navigation so
>> > > > far.
>> > > > >>>>> Some more minor issues... But for now it should be enough to
>> fix :)
>> > > > >>>>>
>> > > > >>>>> Do we want to set up a Trello board for all these and upcoming
>> > > > todos?
>> > > > >>>>> I'm also
>> > > > >>>>> fine by using Git issues for that.
>> > > > >>>>>
>> > > > >>>>> Best,
>> > > > >>>>> Maurice
>> > > > >>>>>
>> > > > >>>>> On Wed, Apr 5, 2017 at 8:02 PM, Sven <sven.hoehn at posteo.de>
>> wrote:
>> > > > >>>>>> and now how we proceed?
>> > > > >>>>>>
>> > > > >>>>>> Are you writing down a list with all the things to change?
>> > > > >>>>>>
>> > > > >>>>>> Do we talk so that everybody express what he thinks and what
>> to
>> > > > >>>>>> change?
>> > > > >>>>>>
>> > > > >>>>>>
>> > > > >>>>>>> On 5. Apr 2017, at 19:55, Michael Tremer <
>> michael.tremer at ipfire.or
>> > > > g>
>> > > > >>>>>> wrote:
>> > > > >>>>>>> Hi,
>> > > > >>>>>>>
>> > > > >>>>>>> it is all up on http://dev.ipfire.org
>> > > > >>>>>>>
>> > > > >>>>>>> If you want to view fireinfo, just add the "dev" to the
>> domain.
>> > > > For
>> > > > >>>>>> example:
>> > > > >>>>>>>   http://fireinfo.dev.ipfire.org
>> > > > >>>>>>>
>> > > > >>>>>>> Do the same for planet, wishlist, etc...
>> > > > >>>>>>>
>> > > > >>>>>>> -Michael
>> > > > >>>>>>>
>> > > > >>>>>>> On Wed, 2017-04-05 at 18:11 +0100, Michael Tremer wrote:
>> > > > >>>>>>>> Hi,
>> > > > >>>>>>>>
>> > > > >>>>>>>> On Tue, 2017-04-04 at 22:18 +0200, Sven wrote:
>> > > > >>>>>>>>> Hello everybody,
>> > > > >>>>>>>>> I’m thinkin’ that the coding of the home page has reached
>> a
>> > > > >>>>>>>>> point where
>> > > > >>>>>> we
>> > > > >>>>>>>>> need the site live to discuss.
>> > > > >>>>>>>>
>> > > > >>>>>>>> Great!
>> > > > >>>>>>>>
>> > > > >>>>>>>>> It’s not pixel perfect, the mobile menu is only the
>> bootstrap
>> > > > >>>>>>>>> version
>> > > > >>>>>> from
>> > > > >>>>>>>>> top
>> > > > >>>>>>>>> down and not from the left like in the mookups, the SCSS
>> code is
>> > > > >>>>>>>>> still
>> > > > >>>>>> very
>> > > > >>>>>>>>> chaotic, the image-scaling dosen’t work like expected and
>> the
>> > > > >>>>>>>>> svg
>> > > > >>>>>> scaling
>> > > > >>>>>>>>> dosen’t work at all in Safari, but it’s good enough to
>> have a
>> > > > >>>>>> conversation.
>> > > > >>>>>>>>> @Michael it is possible to include html markup between
>> these
>> > > > >>>>>>>>> brackets {{
>> > > > >>>>>>>>> _("IPFire") }} for example {{
>> _(“IP<strong>Fire</strong>") }}
>> > > > >>>>>>>>
>> > > > >>>>>>>> No. The translation function escapes all HTML.
>> > > > >>>>>>>>
>> > > > >>>>>>>>> @Maurice I have troubles with the colours, in zeplin for
>> example
>> > > > >>>>>>>>> the
>> > > > >>>>>>>>> background is $blue_grey_900 but with a opacity of 0.6
>> when I
>> > > > >>>>>>>>> put the
>> > > > >>>>>> same
>> > > > >>>>>>>>> values in my css the colour seems darker.
>> > > > >>>>>>>>> But its easier to go all of these details when you see it
>> in
>> > > > >>>>>>>>> your
>> > > > >>>>>> browser.
>> > > > >>>>>>>>> Greetings,
>> > > > >>>>>>>>> Sven
>> > > > >>>>>>>>
>> > > > >>>>>>>> -Michael
>> > > > >>
>> > > >
>> > > >
>> >
>> >
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.ipfire.org/pipermail/ipfire-artwork/attachments/20170411/21e2c865/attachment-0001.html>


More information about the IPFire-Artwork mailing list