Application Icon

[dridk]

We need an icon for FastQt. A based template for all labsquare application would be awesome.
@it-s If you do the job, please join idea, mokup here.
@ikit you can do it too .

Following some idea.. If you can mix both picture.

Currently, I have a stupid ugly bird ...

[maxulysse]

Silly idea, as I was just passing by ;-)

And I just noticed it looks a lot like the MultiQC logo...

[dridk]

It's the a try ! All ideas are welcome!

[dridk]

DnaStar is a commercial company and can be a model for Labsquare. Having the same layout model for all labsquare application icon would be awesome.
Check application icon from DNA Star to see what I mean : DNA STAR softwares list

[dridk]

@ajmos Thanks you for your reply ! LabQt doesn't exist. It's Labquare community and FasQt application.

Labsquare

Labsquare is a community of developers who want to develop opensource gui and native software for genomics.
Genomic is a new science that is interested in data comming from DNA sequencing. Watch this short video to understand "what is genomics" .
Actually many genomics tools are Free and opensource supported by a strong opensource philosophy. But most of them are only intended for expert without Graphics user interface. Only commercial company are doing "nice" User interface.
Labsquare team would like to fill the void by doing several genomics application for non expert user like biologist and medics.
For now, we are doing Native and cross platform application using Qt/C++ technology.
Actualy the logo of Labsquare is the following one :
https://avatars3.githubusercontent.com/u/2106259?v=3&s=200
But you can update it as you want. The logo displays a square with two "L" character like "L" from Labsquare.

FastQt

FastQt is the first application released by labsquare. This tools analyzes files ( *.fastq extension) comming from a DNA sequencer ( video example ). The file contains many sequences of DNA with qualities scores telling if sequences are good or bad. See wikipedia for more information.
After getting Fastq files from a DNA sequencer, biologist must analyse them to verify the quality. FastQt is a C++/Qt clone of FastQC, a Java application. Both of them, takes Fastq files as input and produces several plots and statistics to describe dna sequences and qualities. The advantage of fastQt compared to FastQC is that it is faster powered by Qt/C++. And ofcourse it's nicer.
FastQt is a tool among other tools that we want to create. Having same theme styles for all applications would be awesome. ( Like Excel, Word, Power point keep same design) . Next applications that we are working on are listed bellow :

Application comming soon

• BigBrowser :
  A native genom browser, to explore genom data. Look the Ensembl genom browser for example.
  Actually, we have doing this : https://www.youtube.com/watch?v=Y7ouuS8Ooo0
  Logo Idea : an eye with two curve of DNA for eye outline.

• CuteVariant :
  A filter for genomics variation. For example If I sequence your DNA, I will get a file which contains all your DNA variation. CuteVariant filters variations and tells you if the variation do nothing or is responsible for a disease .... or a power (X-men ). You can try this really cute web application with a data set demo : http://gene.iobio.io/
  Logo idea: DNA nucleotid (A,C,G,T) which fall inside a filter.

In Brief

We need an application logo for FastQt. Because this application has already been released as 0.1.
This tool analyze DNA sequencing output with several plot .
Keywords for logo are : DNA, Sequencing, qualities,genomics, genetics, biology, analysis, plot, statistics,fastq,dna sequence

Commercial company example

• https://www.dnastar.com/t-products-dnastar-lasergene-molecular-biology.aspx
• http://goldenhelix.com/

[dridk]

@ajmos See genomics workflow ! Each icons can be a software ( source: https://omictools.com/)

FastQt is a quality control application

[dridk]

From Omics tools, Fastqc would have this category icons :

CuteVariant this one :

BigBrowser this one

[dridk]

I don't care actually... Everything is better than the actual bird icon !
But don't make it abstract too much, like a black rectangle :D

[dridk]

I have an idea ! Keep the same shape for all labsquare apps ! For example, the following smooth polygon shape designed by @it-s

[dridk]

or the following color styles background with simple motif on it . Made by @it-s

[dridk]

The idea of making everything with square is a good idea.

[dridk]

Just a try ...

[natir]

The usage of 4 color is very great, all bioinformaticien see one day graphe like this
.
In reality it's an old representation (new sequencer technology use 3 or 2 color some technology 1 or no color) but we stay use this 4 color.

The logo isn't too abstract, but the fastqt logo in my mean is for an aligner, not for quality control.

Big Thanks for your work.

[natir]

Sorry @ajmos I am not clear.
In bioinformatique we use matrice to compare/align sequence and if sequence is very similar we can see a diagonal in the matrice it's an example

Whoa the update is very very good !!!!!!

[natir]

I Like the variant logo because for detect a variant we need make a multiple alignment and find position where isn't match and a representation of multi-alignement look like the logo. The logo look like too a bottleneck and the many objectif of CuteVariant is filtering data.

Very very good job thanks.

[dridk]

Too simple and abstract from my point of view. I would prefere some curve, gradient and shadow.
Or maybe keep the main shape, and add an Icon background as I show before.
So Actually, for this issue, we just need the FastQt icon. Other application are not finished, so we can wait.

[ikit]

My contribution to the reflexion. All logos done with the "chevrons", the base of the main logo. And flat color style like for office suite, one color by tool.

[ikit]

@ajmos : sure ^^. For bigBrowser, it's like an eye, the symbolic of the eye for bigbrother have been already explained by @dridk. For FastQt, it's look like a graphic, as fastqt produce it to show the quality of the fastq file. And for CuteVariant, it's a "filter", little square are variants that are filtered to keep only variant of interest.

[Aluriak]

Just my grain of salt: the external square of BigBrowser logo should expose dna material shape. In last proposition, we have the Big Brother, but not the DNA.
Another way to put DNA shape in this logo is to draw one in the middle square.

Follows a draft (!) of my proposition.

[pburdette]

@dridk Hey I do a lot of open source design and I'm a full time web designer. Attached you will find a few explorations. I'm digging the DNA one I cranked out this morning. Thoughts?

[pburdette]

Didnt realize your brand name is like this "FastQt". Attached is better example

[dridk]

Thanks ! That's a good start.
The problem is that the logo need to fit into a square (ex: I mean 64x64 size). You may try to use labsquare blue background and put one of your motif into it :

[dridk]

Yes Qt is an abreviation for "Cute". So It's FastQt . (pronnonced FastCute)

[pburdette]

hmm. Might mess with that layout but we can make it happen.

What about this @dridk

[dridk]

here is a template suggestion as svg
labsquare-template.svg.zip

[dridk]

@beardedpayton your logo becomes better. But your dna curve doesn't respect same width.
I think fastqt should have something with statistics. For exemple boxplot or something else.
That's because the main goal of the app is to produce this plot :

[dridk]

@beardedpayton You can check the website that I try to build :
http://labsquare.org/test/landing_labsquare.html
You may want to use this texture that I like prety much : http://dridk.labsquare.org/images/splash.svg

[pburdette]

Okay I can make it happen.. @dridk

[pburdette]

@dridk

Okay so I wouldn't use that poly fill for any type of icon or logo. They are awesome pieces for sections in sites or print material. But when you start to resize them for a logo/icon they can be way too dense on the eyes. A little too much if you ask me.

That being said, we want this icon/logo to be simple and clean correct? We want it to work from 64x64px and up?

How do you feel about this (I like this direction the best so far)

[pburdette]

@ajmos no reason tied to the brand. The box plot can have tons, 7 felt right for the icon. Needed more than 3-5 bars to show we are talking some sort of statistics here.

[dridk]

@beardedpayton I like this one ! The motif is simple and good !
Maybe remove serif in font.
For the background template, I would like some shadow as I suggest. Could you try to use mine template, and propose different color ?

[dridk]

@ajmos maybe by removing some bare and make them bigger ?

[pburdette]

@ajmos thats becuase it's not designed at 64px x 64px yet. Thats at 800px x 600px. I'm getting feedback not shipping a final product yet.

[pburdette]

@ajmos and you just used a screenshot of trying to test my logo. Not a vector export from illustrator. SO of course it would do that lol

[pburdette]

@dridk okay sounds good on the font. I can explore some better suited sans-serif.

We can add the shadow on the logo in illustrator or you can do it with CSS in the browser. What do you prefer ?

And if you were wondering what @ajmos was talking about. He is trying t test a screenshot not the actual logo lol

[pburdette]

@ajmos I don't think you understand what you are doing. You are grabbing a screenshot off my desktop from my snipping tool. There is no way you would have access to a vector.

[dridk]

@beardedpayton generally, I have a complete svg with all feature. So I can easily change if it's necessary

[pburdette]

@dridk give me a moment and I will attach what you need here with the shadow and futura bold font.

[dridk]

Get inspired by this icon for the template layout, which give it more relief with shadow and light

[dridk]

Maybe using same color and light with your motif ? Just some suggestion.. I change my mind every time.

svg icon is avaible there : https://github.com/cgaebel/gluon/blob/bd3e2cd96d3a7af66d4114f88705458a9a623ae3/creator/icons/gluon-creator-256.svg

[pburdette]

@dridk I'll provide you with app icon and one you can use on the web. The app icon is at 64x64.. Designed exactly for that (when you get that small, you have to design icons around that).

Probably sometime this week. So contact me if you have any questions about current direction.

[dridk]

ok thanks! Let's see ! If you can provide vectorial data, it would be greate too.

[pburdette]

@dridk what's your email? How would you like to receive the finished files?

[dridk]

You can join a zip file attached to this conversion . Or upload it using https://transfer.sh/( OR https://framadrop.org/) and paste the link here.

[pburdette]

@dridk zip file is attached. You will find a 64x64 version of the icon, web version, svg and illustrator file

FastQt.zip

[dridk]

@beardedpayton Thanks you very much. So, it's not perfect but it's better than the actual one.
I will try to make some improvement. Shadow, border and color adjustement. And propose to the team.

@ajmos No offense, But I can reproduce all your design in less than 5 min too. ( @ajmos and @beardedpayton too). You are only using primitive shape, without curves, light or shadow. Probably because you are following the trending of flat design, which is a bad things from my point of view.
I was working with a Professional designer from Linux/KDE. And logo was really good.
I suggest you to get inspired by the designer Nuno_Pinheiro and see what he did : http://pinheiro-kde.blogspot.fr/

Well, this is an opensource project. So I would like to thanks both of you for your help and the time you give us.

[pburdette]

@dridk @ajmos

Flat design isn't a bad thing. It's based on your taste for your brand. Some of the worlds most successful logos are simple, clean and flat. A logo could take 10 mins once you find the right variation, but it probably could take 2 weeks to get to that point.

When it's all said and done it's what works best for your project or brand. It could be made in paint, but if it's successful it works.

Being able to reproduce a design in 5 minutes means nothing. Take Nike for example, I can reproduce their logo and many others in 5 minutes or less. But how iconic is that to their brand? It's huge. It's about the process, coming up with a logo that works for your brand. Not how quick it is to make it. Designers go through tons of variations on an AI art board until something feels right.

Keep that in mind.

[dridk]

@beardedpayton I was just aswering @ajmos who said he can do your logo in few minutes too. I removed the post because he published a huge picture inside.
I agree with you. I just make a distinction between a "logo" and an "application icon".
For exemple Dropbox "logo" is a the simple box in a flat design.
An "application icon" can be something like this . http://nantesstnazaire.cci.fr/sites/default/files/mediatheque/po/dropbox.png

[dridk]

@ajmos ok, so I am sorry for that! I misunderstood it. ( my bad english probably).

[dridk]

So, I will close this issue this week except if somebody from the team disagree or if there is another suggestion.
Then we will use @beardedpayton icon and give him the bounty.

[pburdette]

@dridk Sounds good! Let me know if you have any questions or if I can help with anything.

[dridk]

@beardedpayton you didn't ask for the prime.
https://www.bountysource.com/issues/42015876-application-icon

[Erioldoesdesign]

Can I close the associated open source design job request with this please? https://opensourcedesign.net/jobs/jobs/2017-02-17-graphic-designer-for-genomics-application-logo

[dridk]

yes