(when I say all that is me.)
Introduction: Web guideline
It is really important to know how to use your tool in a right way. For a web designer, Sketch is one of the most important applications that we use in our daily life. Although it may be simple to pick up by Illustrator users, the structure of web design is fundamentally different from graphic design leads to the differs of architects we should build at our first step. A web guideline is essential for a website. This is not only a beginning of design flow but relates to the maintenance after a website has built. Without a clear web guideline, administrators have no clue of what rules to follow up with the content updating. In another perspective, a web guideline is a communication board between designers and front-end developers.
The plug-in of sketch “Brand.ai” helps web designers to produce web guideline easily. By using one of the sketch enormous feature “symbols”, plus like “text styles”, “colour styles” , designers now can simply click one button to add elements into a cloud library in Brand.ai, organise them into a web guideline.
For the further using of Brand.ai, can learn more about how it works at **this link**.
Experimenting: The practical using
While building the guideline system, I found that this can really be a good help for a cooperating project. We used to have problems of updating symbols between multiple designers within the same project. During the **TSRC project, we only used [Invision](https://www.invisionapp.com/) sync files as our tool to share and cooperate file. However, mess happens when someone is opening one file while another does the same, or if someone mistakenly overwrites a modified file. So many situations happened took us so much time to fix and redo our works. Brand.ai can manage the same symbol within a cloud library, if any of a designer made a change, we don’t have to copy the whole file to replace it now. Notwithstanding, we have to start a good habit of click the update button whenever we are going to start a new editing.
I tried another application which is similar to Brand.ai called [Lingo](https://www.lingoapp.com/)**. Nevertheless, the purpose of Lingo is aim to graphic design working process. Lingo can sync the elements of a design project as well or to say, the UX experience even more friendly than Brand.ai, it, still, cannot generate a web design guideline which is why I didn’t use it. This application may be really useful for producing graphic design/ design mood board/infographic or other case.
Conclusion: Tips for producing a better sketch file
1. Using symbols
Using the nesting symbol function not only diminish a lot of unnecessary progress but also helping to modify even cleverer. To know the advantages and feature of how to use nesting symbols and override panel, by reading **this article. ( Here is the [Translating Chinese Version Link](https://goo.gl/Whsyaq) )
Why your symbols didn’t show up in the option at the override panel? Try set their art-board size into exactly the same height and weight. The order of layers sometimes influence as well, try to reorder your symbols in a correct order.*
2. Naming
As much as how developers emphasise the art of naming, web designers should have a good naming system as well. There’s two suggest naming method according to my experience:
a. Naming follows after the Sketch settings:
Sketch has a useful feature of naming which can help you to organise your symbols. As long as your symbol name including a “/” mark within it , it’ll automatically generate a group dropdown for your symbol. Can check **this link** for the example.
b. Naming for the developing purpose:
Because front-end developers are those who is going to execute the design piece, it is really important for them to understand your file. At **Tenten, our front-end developers have a coordination of using [BEM naming system](http://getbem.com/naming/)**, plus this project doesn’t have heavy data, I decided to go this way.
3. Versions Organisation
Version control is one of the most significant features in Brand.ai. We all know how disappointing it is after few weeks of discussions and emails and the client just decided to go back to the initial version. I haven’t tried this function within this project, yet, I believe this is going to be a huge help in the future project.
After trying out, experimenting new plug-in, learn how to use sketch right ( although I’m still a novice user), it really helps me work faster while producing sketch files. Also the Web guideline generating and naming learning shorten the communication between designers and developers. Hopefully we can experience more conveniences in the future, become a professional file making web designer.
—
*20/Nov/2017 update:
*Brand.ai has now officially acquired by Invision, see the Invision Article for more information.)*