eli5: I did a lot of cool stuff for the EFTG - more than they wanted but less than they need.
Repo: https://github.com/scr53005/eftg-steem/pull/7
I was personally invited to take on this task:
Which is why I spent a little more time and energy than is probably appropriate for a mere logo and mockup; the logo was not just made available in the usual formats formats. I provided:
As a UX designer, I know that a static mockup is only half the story, so I built a complete interface using Quasar / Vue.js. Although it is not "fully wired up," it does show some perspectives into the ways in which Quasar and its components can be used to rapidly achieve parity with business-logic. I go into some detail about this below. To do my due diligence, I also built and signed a Cordova app (Android) and Electron binary (MacOS). More about this below.
ICON:
LOGO:
The underlying concept of the logo is to riff off of the idea of the stars and their alignment along a circle as seen in the EU flag. Here are some stages in the design process:
Here you can see the alignment check of the stars in the logotype.
I built many versions of the icon. Most notably, the dastardly .icns and .ico image collection filetypes that are needed for electron.
It is also available as three sizes of favicon (in png format) here:
https://github.com/nothingismagick/eftg-steem/tree/master/quasar/src/statics/icons
Finally, I have also provided SVG versions of the icon as well as an eps of the design board.
The artboard (constructed with Affinity Designer) and the glyphs master file are available here:
https://github.com/nothingismagick/eftg-steem/tree/master/art/artboards
The logo is based on the Monserrat font and the Bold weight. A modified version of the font has been included in the /art/fonts folder, with which the logo can be created in normal document editors and other applications that enables the user to choose and use fonts. Here you can see a screenshot from LibreOffice:
The black logo is exactly what is displayed when the user types "EFTG" in LibreOffice on Mac after installing the Logo font.
I copied the individual glyphs from Affinity Designer and simply pasted them into the glyph sheet for the respective letters in Glyphs Mini, resized to match the original letters and exported them. Here is the letter G:
I used the beta version of my node module quasar-icon-factory to construct the derivative icons.
All design work was undertaken with Affinity Designer and font modifications were made with Glyphs Mini. Open documents are available in /art/artboards.
Quasar uses stylus for CSS preprocessing, so all of the colours have been defined in variables. These are quite easy to change out, should modifications be desired. As you can see, I chose a cream type colour for the background (an old painter's trick to use an off-white so that pure white - if used - has a chance to really "pop"). I maintained a slightly muted colour scheme.
The general font recommended for multilingual application with all web-properties and applications is noto sans, a SIL-OFL licensed font. The reason for that is that it is one of the only fonts available today that has absolute coverage for all glyphs in the target languages. Three font weights have been chosen, and they have been made available in /art/fonts.
Pretty much everything is interactive because I used real components, and as 
I also added a few things that were not in the Balsamiq wireframe, including a working translation engine with language switcher, a stubbed "login" type overlay and a global search to run full-text search across all available (or filtered) data-sources.
This is why I put a great deal of effort into the user interaction. I did not spend 5 days building the extremely complex logic of multi-faceted fuzzy search or full-text search of the pdfs - just as I did not bother to build a backend login system or GraphQL database interface (which is exactly what this project needs). I imagine that with a decent flow description or flowchart, this would be relatively easily and quickly resolved. However, that is a benefit of working with Quasar: you just get stuff done right, now.
Altogether I think that I spent about 16-20 hours on the Quasar app, and about three of those hours was spent on building the translation engine and strings. (Yes it's in English, French (sorry), and German.) Were this a "real" development contract, I would have spent much more time writing clean code, double-checking the translations, isolating components, writing documentation and testing. Nevertheless, it can serve as a great jumping off point for a further development.
Notes:
Please feel free to visit the current state of the live version of the UI here: https://spa-mat-tixnxfbhjb.now.sh/
For the most part, I used stock Quasar components and the interaction patterns as provided by Quasar. The only exception is vue-pdf, with which I encountered a few problems because of the way the component designer used the "window" global - which is not available on SSR - so instead of rebuilding the component, I reverted to the SPA form of Quasar. This is something that would need to be addressed for SSR-PWA type delivery.
This also proved to be the problem with the PDF rendering in Cordova and Electron, so there is great value in fixing that component - or building a Quasar native version.
In order to be absolutely thorough, I also built an Electron App for MacOS and a Cordova app for Android. Neither of them are optimised (especially with regard to PDF rendering), but they both install and run correctly. This was to prove a point: Vue.js and Quasar are mature technologies that run circles around Angular and React. How much time did it take to make these two versions of the project? Less than it took to upload the finished artefacts from my lame uplink. SRSLY.
Here are the direct download links to those files from the Github Release page:
Thanks to 
All art assets are CC-BY-ND, the Logo-Font is SIL and the Code is MIT.
2018 © Daniel Thompson-Yvetot
