Bestand wählen
Merken

Ember Between Design and Development

Zitierlink des Filmsegments
Embed Code

Automatisierte Medienanalyse

Beta
Erkannte Entitäten
Sprachtranskript
the and the hello hi everyone nice to be
here and I hope you can you may find I've just a normal microphone because I forgot about pockets yeah so some yeah why can't I talk about Amber between design and development the my name is lisa and I'm in user interface designer and my passion is like which through the sand in general but also love to bring to life my designs with HTML and CSS this is Francesca he's my coworker and our task developer and you really last red clean and efficient coat but even morning this he loves to create which uses really can and want to use so usually we're from Austria from the lovely city of broke but currently we are on an extended business trip in America to get to know our customers and to conduct and user research so we working for company crops served it is there's a relatively small company which is best based in Austria segmenta and we create all choose tools for coffee traders and farmers but especially coffee roasters the so and just recently we launched a new and the this product which is called crops are happy it is an online coffee trading platform and also and I'm tuning platform and is still the limit of and we're also recently redoing our whole inventory management system for coffee and with Amber so am why are we holding this talk today we are now working together
all was 3 years old on my tuple Amber at and we've just come to realize how important it is that you have a good cooperation between the after opposing groups of designers and developers we have learned that you can save so much time on existing project projects but also new projects when you have like a really good calibration and documentation so we wanna show you today why calibration is so important why designers should be able to code and why developers should be able to understand the sign how documentation can you help within your collaboration process and which documentation we use in our Amber apps which is a code documentation and living spider at and a component that hi so 1st of all wife collaboration so important think about the engineering of a car so max design so my speak about the followers to take up it's nice and green and is very happy with at the same time the and develops types which are perfect for off-road she also put a lot of work into it and use equally had out but when the time comes and they put those parts together it doesn't work it so both did a good job on their own but it just didn't have the same understanding of the new car the didn't collaborate well so how can we apply this own industry many companies have had a workflow like
this for a long time so the designer creates a shop and design let's see site design book is the answer to the developer who then implemented with HTML CSS and JavaScript and many companies have been quite successful with this approach so why should you care to mix it up well in reality the work doesn't stop here so there will be the time when the designer needs to do a few changes to the side so they might create a 2nd photoshop 5 site design final and it to the developer who has to go through the file find changes and implement them in code but then there will be another round of changes and the mother another and another and changes In the end everyone with a lot of time because the design had to go through the developer for Evelyn change and everyone will be unhappy so this might have been a bit exaggerated but I'm pretty sure many of you have experienced something close to this before the so let's imagine a better workflow and this better workflow wants to start out with the design of creating a static design for partial but then the designer also writes the basic HTML completes and to the assessment and all of this so to develop I will then I'm implements the static H 2 metal plates were appended boss talking about and MO and writes a javascript logic for and when the time comes and they have to do some of actions they can work on it together so it's really just a static design that is the sole responsibility of the designer and JavaScript that quote that is the sole responsibility of the developer everything as shared on iterations emitting cold the designer and I can do especially smaller changes on their own robot ordering to develop those everyone is happy so of course we know that this kind of workflow requires designers make myself and to rat balloting meaningful H 2 and C is that's and but we think that this is really important because when you're able to red valid and meaningful HTML and CSS is designer it is not that easily possible that you created a sign which is really hard or impossible to implement so i'm regarding Emirates we of course also proposed to the design is able to write and part templates and yes and no when you start to code is designer you sometimes feel not that confident about it but on but in reality when you have a basic understanding of HTML learning handlebars is not that hard I don't say that you have to create components by yourself a rolaids it's great when you can do it but to start out for designer it's just like you have to go into it and just tried to don't mess things up there to develop a ready made work so when you going here and as a sign want change something in the spelling of info message I just have to know where to put an additional class I just have to know that that I put additional class not within its expression or another example where you see this unordered list and with the each to their list elements that generated so as I assigned just have to know when a when a change something I just read within each so I don't breaks so the most important thing about it is don't try to be afraid just write out and believe me the developer is really happy to have the alt when you don't know something so I know sometimes in some project it's it's not possible that designer can also like to the whole HTML sees as code what have adverse template but still it is really important to design specifications are really clear so let's just take a simple example this is think about I designers and yes include myself sometimes complain about you know the developers they're not able to implement this might assign in a way I wanted it to be but have you ever thought about that designers do not delivered to the science and the way air developer can we work with it so that's it about what you get is static focus as developer and you will just implement it that way but has also thought about what happens in between those 2 states so it would be a good beginning if the design and this so when say something like you know the bottom should have a transition between all those states us and application of course is an anemic applications it would be even better if to design and so when say something like you know the patterns that have an and transition in the background how the color and box without trend standard transition time which is 0 . 3 seconds and then he's and in autumn such and it would be the best if you could just hand over DS-SS as Ford so as long as we are not able to read minds it is really important to design is that it the size mystifications in a way that the developer can work with I so why we do believe that designers can be expected to know a bit about HTML and CSS we shouldn't forget the flip side of this we also strongly believe that we develop post can be expected to care about the assigned to analyze it beyond the obvious and to care about its execution so cost I don't expect developers to become the designers I know that I would never actually design and application and but at the same time that we can do better than we often do so when we receiver design from the designer don't just we could try to recreate it 1 to 1 after so thus the design actually make any sense and is it consistent to other pages are components you implemented before so chances are that is added to the conscious decision in deviating from another component I'm before but maybe they just overlooked something that happens we're all human beings so we talked to the designer in my experience no designer for were so far and has had a problem of explaining their choices to me if I talk to them in a constructive and nice way so don't go to the design and say this looks really bad doesn't work at all try to give a concrete example of what the problem is and maybe even a possible solution for the problem the another thing I want to areas that many developers don't care that much about CSS but see if this is not a trivial so I don't know how many of you felt something like this when writing s I know that I have felt like this a lot of times so this is not a trivial but to assess quality is important so there many developers would spend hours trying to optimize the child class but 2 would be quick to just throw a couple of inland sites on about because we're not it works but it doesn't really work when the time comes and you have to make changes to the i and a time will come then this will be very hard to maintain so don't use and styles and use some kind of consistent naming scheme for this users so for this purpose in all projects you spend which is short for block and modifier I want to go into this in detail you don't need to use then you can use another naming convention you can come up with your own naming convention it doesn't really matter just have a naming convention that everyone in year 2 1 what to actually using it the last thing I want to mention that is that the data model does not equal the user interface so we develop post should not you have an application in a way that makes sense to us
we should application in a way that it makes sense to the user and just because we might use terms like items in that coat that doesn't mean that we should also use these terms in the user interface so now as we have complained enough about science and developers we wanna talk about how all documentation can help you to establish an integrated workflow and the shared vocabulary so why should you do why should you care about documentation of all the 1st thing is it's all about consistency once users know what a specific UI 11 thousand unification they expect to see new item and to do the exact same thing over and over again and if they and doesn't do that to users gets frustrated and that's that so now the thing is you get really have faster and it's easier to do cross-browser testing because when you have like as I gather a component that you can just use the gat and in any browser on any device and test the island you don't have to go from page to page test everything the and when you have something like and centralized 40 documentation everyone can go to end and you have a fossil workflow Chris mentioned it yesterday in his talk about living style that's and he said that it's really easy that to get new developers on new designers and to have them on boarding and that's that's really true so everyone in your team gets faster you know might think updated all sounds very good but how can I do some kind of and documentation in my company so the most important thing you should remember from this talk is when you do documentation and yes you should do it I you should do it always like integrated in your project what does that mean it means you communication should be always 100 per cent in sync with the code so that you don't stop doing it but that's the embassy 0 I'm this is related to please so the 1st piece of documentation we use this complementation so I'm guessing are hoping that most all of you in some kind of code documentation in the project so what we want to act there is that we also feel it's very helpful to have a stand-alone human readable code documentation all tired of your source codes comment so for this purpose we use you end up which you might have heard of and basically it creates a nice documentation from job of books comments and yet so this is what this looks like and for 1 of our projects um we're made seem for which is pretty easy to do and so on the left pane you see all the classes we have can select 1 class and then you see all the figures on the right thing it does appear somewhat familiar to you that's probably because the image as a guide books also use you up and so it works very well with and that's that's not tied at all to anybody can use it with any child with this project there is an add-on and you adopt which you can use or you can just use the stand-alone note version for this it's pretty easy to use you just add comments like this on top of your child's compliance so we just put there's a very short description of what fortified thus if its component we like to additional code snippets of Hollywood used component and then we just defining namespace which would be the object type of component services etc. and the class name and which extends from I then in the class we just document all the different things in there so would document that you with that that review and the type we want document methods with that matter you can specify parameters for metals and return values and I'm actions really document and with that event which is nice because events can also take some parameters and they show up nicely in different sections in a generative documentation so the really nice thing about this is that it's not only useful for developers but can also be used by designers the so for example if a designer and is working for and the bottom plate so they can use this documentation to find out which properties are available on a model or a group of components to actually use in the template and why most developed by designers will probably not you are comfortable diving into the that source code to find out which properties are available going to this documentation and looking up there is pretty straight fall so let's talk about the living standard in Christian to talk about the living staggered yesterday we use it a little bit different from for us living Baghdad is a documentation of ours and the as classes how they will look like and how you can use them so basically it's called living because it is ordered generated from our x and z is s and C is as a less depends would you use so why are we liked doing living staggered at all as mentioned before consistency is really important and you only realize how important consistency is if you look at inconsistent examples so when I started with redesigning 1 of our old applications I sort out with so called you i inventory that means you go into in england out it into an existing application look for a specific you lament and make just screens of and every time you see the guy lament which does the exact same thing to just make an honest region so that's what I found when look just for a normal button with the same act on it so as you can see we have a lot of different buttons spellings here but like behind that every 1 of those buttons does exactly the same thing I want to see how this happens because a lot of people are working on the same project as we about the ships that so I'm in the next step I do when I create a new application or readers an existing 1 I create just the design should so basically is an alt line in which to stand erect shingles it includes like a kind mean and the basic UI elements and can domotics but is really simple and then take she then go to the developer and to the project owner and talk about it and they give us some feedback on it I iterate over it and then the next step is that directly implement all those you basic UI elements in our lives that so how do we do that we use in our Amber projects and broccoli living staggered we use that on because it is especially made for possess and we use so as the as as an art projects and then we make some basic configurations there for example like yum hot is that it should look like on hold a cold formatting within is that it should be and and then I can just start create themselves partials and corresponding marked on files with the same name and then I can serve our living sided with the embarazzar and every time when we change something 1 of our market on valves on 1 of our sons partials filled it's reloaded so we make sure decided so basically Amber make sure that our site is always date then you can just start so when everything is set up I create my 1st as is as partial which is usually something like button as and I put all the means used as in I always then style just a plain tech as well because you should he be the easiest as simple as possible but also add on another class like don't button when the 1 who have like lead to look like about and also put all other modifier class standard for example unbuttoned secondary which just change the color of the when I'm finished with that
I just add a corresponding marked and fowl which is called underscore pattern indeed
which has just on all the HTML markup in it and some description if you want to be and then everything gets reloaded automatically built and the conceived is some like to see all the elements and HTML markup and you can just go and then copy and paste so this is how our fire structure in general look like we have this core folder where we put all our cost house in which means those the things which we which we change from project to project like variables or always be morally out and then we have only a lot of files and modules the also since we've learned use from project to project and they're very similar so like for example lecture as basic box styling surcharge spellings or whatever they just depend on some variables that we change the variables from project and then we also use like the and we put also some of our status directly in our component folders so we can use the gamma components from 1 project to another and another thing we realized how while we have a lot of Amber projects I'm all with this is how it actually despite looks like so when it is rendered and you can see we also build it in an hour that we added on and navigation so you can jump from 1 part to another you can see which color variables we use how you can use input forms how will look like and the cooling is still like really do real environment so you can just write out hover over them like get a feeling how hard it will look like the real at so end
as we work on this ever and the projects and we found out that all some of our inventory projects have the things dialing so we decided to make a shared on this she added on contains all our general spelling information and then all our other and a project just users and on so how do we do that in a workflow we just sat
there is developing at on to return true in our and on the next test and then to create a local copy of our at on in our and the project and run this project with serve so every time when we change something in our head on so use as also our project or other and the project to work on it gets reloaded which is like really helpful during development so the final piece of documentation we use is the component I would that somewhere in between the living style guide and the court argumentation so Chris In this talk yesterday about living side guide what you call things like style guide is what we call a component that basically sort shows and components in action how they look like but it can be used so it's aimed that anyone that works with 10 plates so in our case both designers and developers and and as such as important to not becomes to take the when describing stuff and so it's on a really important what a component doesn't not how it does something this is what this looks like in our project and so this would be the section perform elements for example we have pursued bucking component time and we can see I hope you can see under its list of active nodes with a type initial description that you can use for this component than you actually see the component and the courts book which shows how you can use to component so right now we don't use any special tools for this and this is basically a role in and but with a component in and the description but we might switch to Amber freestyle after chris talk yesterday it was really impressive and nice I so the way we did it now is that we created a very simple components component that doesn't do anything fancier announcing it does this make sure that we have a somewhat unified they all fall component died so we put a lot of those in our component guide throughout and flow of basically every 1 of our components each 1 soul on top you would justify another component is named then we would define all the attributes that this component can take and with the name and the type of a description but then and this is actually the most important part would include the life component so you might think that you could just go ahead and copy paste HTML foot off the component from somewhere in that and put it in here but that is not a very good idea because it will get updated and when you change something in your component so really try to include your actual component in here and if you're having trouble doing this that's probably a sign that the components are too tightly coupled to something else which is something you should avoid anyhow so actually building a component i'd like this is also a good way to find out if you and beta components in reusable and encapsulated way and then finally we have a code block so which is basically the same as today will block just very escape the hand component so it's not render it and then we had some syntax highlighting to it some smaller projects we
basically at around or a collection of France just enough that would put this component guide In this works were well and it's pretty easy to do however it has the disadvantage this will also be served with your at if you deploy which is something you might not want so this is something you need to handle in this case so what we do is only locked in administrators which is of basically you can access this are also once we deployed I fault bigger projects Luther mentioned before we have a couple of internal and that onstage use and where we have all lost styling but also all all reusable components that we use in multiple X so basically most of our components are in 7 multiple adults so we have a separate stand-alone documentation and that which also includes all these fonts and this documentation and there is some component I. so this is completely separate from our user-facing that's so it can never be you deployed by accident and we have set it up in a way that whenever 1 of their demands changes and we push it to get you rebuilt the documentation and put it on to our internal server so everyone in it you can look at it and it's always up which is super helpful we also put the living side that in this documentation and you dark but mutation so this is all a central helpful of documentation follow and the projects which works really well for us so if you take something out of to start it should really be try to understand your teammate teammates and this only works if you really sit together open-minded and if the developers tried to get a little bit involved in the design process and the designers tried to get involved in the development process and if we find together wave which works for everyone and the most important thing you should remember years when you do documentation and again you should do documentation keep it always 100 % % in sync with the co because when you decide to be a stand-alone documentation that trust me understand a time when you just stop doing it because you just time we just forget about it and the last point I wanna mention is always try to be better tried to read to read about the work over your workflow and in the mn and improve it so even after this talk will probably go home and um improve our workflow we have hundreds hundreds of ideas collected here so am I would love to come back to the example from the beginning just imagine if next the design of the week body would have been fit together with and in the beginning and if they would have sketched out a framework in which the card should work the just let's say a 13 the outcome would have been a completely different power it would have been a perfect thank you and be so the question was how much time we spend on keeping it up-to-date Steiger the learning so it's not too bad if you start doing it from the beginning that's probably pretty hard if you try to take it on later both mentioned we basically 1 start coding in this diagram and then we do changes in the sky that and then we look at all the look there more something like this so we always do all the trees in this diagram 1st more or less and so that's not really an issue for us I so it's like X can give a quick example like last week 1 of our developers asked me he he needed an input with and dynamic labeled because we just had an input where you can put like a dollar sign or something but not like it will work and he said he would need 1 with the dynamic labels so and what we did which is like improve the existing 1 in our style that and then like he use this 1 for all other things so we always want to have like the 1 perfect the I component in which is really do it right in hours that so in its not much work I Ch the the the the the the and and I can just they can select a 1st step I come from the client side so I before work just like freelancer and that a lot of time projects and I'm I have to say like I switched over to like creating a design she 1st and just like in the many right now in this that the soul not always with Emma of course but I did before just like stand-alone stagger with K is as for example and downstream was really cool because some sometimes when you're like signer and you discuss about things which are like not that important like the color of the green all like something a positioning of something which is not an important and we start out with design cheap and then like directly implemented within this died that there is no such discussion about like how exactly you put things you can really focus on improving your UI elements so I actually think it works pretty good in an agency agency West well although the thing I want to add here is that this will be something like this would probably it will be worth it a year from now basically so when a different article and comes back and wants to do some changes and maybe there and you develop who will work on this project haven't worked on it before so they have basically no idea what you do it now and if they something like a style guide the can go there and work from there if they don't have something like this it's basically do whatever think best time this is something you can really help with when you style guide it's just can't say as designer in general when you want to be a user interface designer you have to be able to code is it's not a limitation it's like an extension of his skills few says the example I gave in the beginning and when I make a user interface I really have to think about animations and transitions and not only like this that it but so I think you all have to learn code check the it a lot of and
Videokonferenz
Task
Videospiel
Datenmanagement
Benutzeroberfläche
Maschinencode
Physikalisches System
Biprodukt
Maßerweiterung
Softwareentwickler
HMS <Fertigung>
Systemplattform
Bit
Prozess <Physik>
Element <Mathematik>
Gruppenkeim
Iteration
Kartesische Koordinaten
Aggregatzustand
Element <Mathematik>
Information
Homepage
Arithmetischer Ausdruck
Prozess <Informatik>
Vorzeichen <Mathematik>
Maschinencode
Minimum
Mustersprache
Kontrollstruktur
Auswahlaxiom
Umwandlungsenthalpie
App <Programm>
Softwareentwickler
Kategorie <Mathematik>
Template
Güte der Anpassung
Nummerung
Partielle Differentiation
p-Block
Widerspruchsfreiheit
Entscheidungstheorie
Kollaboration <Informatik>
Datenstruktur
Twitter <Softwareplattform>
Benutzerschnittstellenverwaltungssystem
Projektive Ebene
Information
p-Block
Message-Passing
Aggregatzustand
Standardabweichung
Maschinencode
Web Site
Quader
Klasse <Mathematik>
Gruppenoperation
Mathematisierung
n-Tupel
Unrundheit
Homepage
Hydrostatik
Message-Passing
Datentyp
Endogene Variable
Zusammenhängender Graph
Softwareentwickler
Cross-site scripting
Fehlermeldung
Kollaboration <Informatik>
Zusammenhängender Graph
Benutzeroberfläche
Programmdokumentation
Green-Funktion
Zwei
Datenmodell
Mailing-Liste
Elektronische Publikation
Fokalpunkt
Roboter
Rückkopplung
Flächeninhalt
Mereologie
Randelemente-Methode
Kantenfärbung
Browser
Versionsverwaltung
Gruppenkeim
Partielle Differentiation
Kartesische Koordinaten
Element <Mathematik>
Synchronisierung
Homepage
Komponente <Software>
Deskriptive Statistik
Softwaretest
Prozess <Informatik>
Maschinencode
Elektronischer Programmführer
Figurierte Zahl
Gerade
Cliquenweite
Softwaretest
Addition
Parametersystem
Namensraum
Synchronisierung
Elektronischer Programmführer
Kategorie <Mathematik>
Template
Element <Gruppentheorie>
Partielle Differentiation
Quellcode
Widerspruchsfreiheit
Ereignishorizont
Arithmetisches Mittel
Dienst <Informatik>
Dateiformat
Projektive Ebene
Garbentheorie
Cloud Computing
Standardabweichung
Telekommunikation
Rückkopplung
Maschinencode
Komplementarität
Web Site
Subtraktion
Gruppenoperation
Klasse <Mathematik>
Term
Informationsmodellierung
Datentyp
Zusammenhängender Graph
Softwareentwickler
Konfigurationsraum
Bildgebendes Verfahren
Widerspruchsfreiheit
Cross-site scripting
Benutzeroberfläche
Programmdokumentation
Vererbungshierarchie
Konfigurationsraum
Browser
Datenmodell
Indexberechnung
Objektklasse
Elektronische Publikation
Objekt <Kategorie>
Kantenfärbung
Quader
Elektronischer Programmführer
Beschreibungssprache
Partielle Differentiation
Element <Mathematik>
Elektronische Publikation
Ein-Ausgabe
Deskriptive Statistik
Bildschirmmaske
Variable
Datenstruktur
Mustersprache
Mereologie
Zusammenhängender Graph
Speicherabzug
Projektive Ebene
Kantenfärbung
Datenstruktur
Gammafunktion
Programmierumgebung
Maschinencode
Gruppenoperation
Geheimnisprinzip
Element <Mathematik>
Information
Komponente <Software>
Deskriptive Statistik
Knotenmenge
Vorzeichen <Mathematik>
Korrelation
Datentyp
Zusammenhängender Graph
Elektronischer Programmführer
Softwareentwickler
Schreib-Lese-Kopf
Attributierte Grammatik
Softwaretest
Videospiel
Parametersystem
Datentyp
Elektronischer Programmführer
Betafunktion
Elektronischer Datenaustausch
Gemeinsamer Speicher
Mailing-Liste
p-Block
Datenfluss
Quick-Sort
Funktion <Mathematik>
Verschlingung
Mereologie
Projektive Ebene
Garbentheorie
Information
Maschinencode
Bit
Punkt
Multiplikationsoperator
Prozess <Physik>
Ortsoperator
Wellenlehre
Mathematisierung
Gruppenoperation
Gebäude <Mathematik>
Element <Mathematik>
Synchronisierung
Framework <Informatik>
Netzwerktopologie
Client
Font
Vorzeichen <Mathematik>
Autorisierung
Inverser Limes
Zusammenhängender Graph
Elektronischer Programmführer
Softwareentwickler
Maßerweiterung
Leistung <Physik>
Benutzeroberfläche
Synchronisierung
Systemverwaltung
Ein-Ausgabe
Chipkarte
Diagramm
Rechter Winkel
Server
Projektive Ebene
Kantenfärbung

Metadaten

Formale Metadaten

Titel Ember Between Design and Development
Serientitel Ember Conf 2016
Autor Gringl, Lisa
Novy, Francesco
Lizenz CC-Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben.
DOI 10.5446/34697
Herausgeber Confreaks, LLC
Erscheinungsjahr 2016
Sprache Englisch

Inhaltliche Metadaten

Fachgebiet Informatik
Abstract The bigger a project gets, the more important communication and consistency across the whole team becomes. In order to achieve this, it is critical to establish an integrated workflow with all team members. In this talk, a designer and a developer who worked together on various Ember projects will present an effective way of handling these challenges. Three levels of documentation will be presented: A living styleguide for designers, a component guide for designers & developers and a JavaScript documentation for developers.

Ähnliche Filme

Loading...
Feedback