SKYUI design case study: the secret of -Firfox Logo remodeling

#Design case study#“CaseOne:Firfox LogoThe secret: “remodeling” simplified sometimes not only subtraction, if necessary, also need to add.Different from other industries, the design community has been committed to sharing knowledge and experience, we are very proud to have such a good learning environment, we should maintain the state of knowledge, belief, desire for knowledge sharing.  #SKYUI design#


Firfox Logo 013.

Today we are going to talk about 015.TheLogoRevision,FirefoxBy this timeLogoSimplify, create a better applicability of the browser image. This article will compare the old and the new ones in a concise way.


What is new, what is old?

2009-2013yearFirefoxTheLogoIt’s an amazing work of art. As a kind of visual evolution, graphic elements more accurate would seem like a declaration: we want to create a more powerful, more innovative browser, excellent product ideas to create excellent products. I used it every day at that timeFirefoxThank you.MozillaThe concept of brand, more and more users have joinedFirefoxIn use.

FirefoxCan help me interact with customers, through the video, text, interface form, the expression of the effect is clear and beautiful.FirefoxPrinciples of using scalable vector images and color consistency. File delivery and feedback are very quick and accurate. Now,FirefoxBy reshaping themLogoTo carry out a new round of brand evolution.



049.More simple

Style simplification does not mean that the graphics are returned to the basic geometry, and then use a solid color. In fact, simplification should be adopted more coordinated colors, more appropriate proportion, more perfect details and the shape of little image correction, remove unnecessary details, strengthen the core on the details. In this simplification, it really removes a lot of detail, but also adds, in order to be compatible with today’s high resolution screen. We will make the image can be compatible with 052.(scalable vector graphics) in the form of a wide range of applications.



remodelingLogoThe first step is to remove the details, we removed such as multiply, filter, overlapping details layer mode, which can be seen in the figure1The tail.

In order to achieve the perfect effect in the scalable vector graphics, we have adopted the internal architectureSVGandCSSGradient. We in the pictureTwoThe fox back blurred shapes, and more gentle gradient. Then continue to eliminate unnecessary details. In order to make the whole picture smaller, convey a clear image.

After we remove a lot of details, we began to consider the details of what we are need to be strengthened, especially in large size, how these details are more obvious?Stephen HorlanderRe portrayedLogoinsideThreeThe land of the outline. At the same time, we removedFourHigh light, as is the whole earth tones become softer and more profound. Deepen the earth blue light at the same time,FiveOut of the fox head fur, so profound contrast relationship came out. Even if the size is different, the contrast is clear.

Finally, you may find something newLogoThe entire shoulder of the fox was stretched out, and only the arm was exposed, first of all, this passedFirefoxA more open attitude. Secondly, you look carefully, feel newLogoThe fox and the earth more closely linked, and compared between the old version of the contact elements appear jerky.

This is it.Firefox LogoThe secret of remodeling. Remember, sometimes not only simplify the subtraction, if necessary, also need to add.


Leave a Reply