Create a style guide with me [Coworking Club stream]

[Music] [Music] [Music] so [Music] [Music] so [Music] [Music] so [Music] [Music] [Music] so [Music] hello oh wait hang on why is our music not playing today okay i'm going to try change audio modes now you should be hearing some music welcome to the stream still getting used to using these new headphones oh wait did i just there yep what a messy start to the last coin club of the year um hope you're all doing well thanks for joining asaro thanks for joining the channel like joining the co-working club officially by the youtube membership lunch was honestly not extremely satisfying but um it was fuel and that's what matters at this point yeah i yeah got caught up in my morning work and was like oh shoot i gotta eat something before stream uh let me get myself sorted and while i'm doing that tell me how you are doing how's life going for you at the moment how's your tuesday so far okay closing down so this is probably going to be the last co-working club um of the year because this time next week i am going to be on a plane to new zealand which is very exciting but also very stressful um friday for me is a no work day it's a yeah we've been doing a four-day work week once a month at convertkit which has been wonderful and this friday is one of them so i will be off and not working on any sort of design stuff that i could stream instead i will be backing and like sorting my life out that sort of stuff um mohammed says what time is it here it's 8 pm there it is 2 15 here in spain sorry i slept so much feeling so tired so much that i'm feeling so tired now yeah i know that feeling i don't have any like seldom in my teeth do i think i'm good i don't think to check that before i started streaming god wow i did that thing again where i just had didn't get prepared in advance i hope that's okay with you that we just hang out while i sort the out okay right i think we are ready to go show the screen now tyrone can't so long has to work soon do i have a community platform i don't have a community platform at the moment but um the best way to support me if that's what you're wanting to do is to join the channel on youtube pay the channel membership there's also a tip jar in my description if you so feel inclined but yeah this chat is the best place for us to connect to the moment crops from the netherlands oh nice um clouds like these is going to be creating a style guide and templates as well well um yeah i can show you how i'm working on it let's put it there okay ready we're gonna share screen now hopefully that is working um this mess that i got to last time i haven't touched this a whole lot since then um what did happen is holly our graphic designer worked on redoing these illustrations in this style which i think has worked well but as i'm seeing more of them together um i'm starting to get concerned that they look too cute if that makes sense i don't want cute to be the overarching like vibe you get um and i think they are looking a little bit too cute at the moment and it's very easy to go there with this system because of all the pastels but yeah i don't quite know how to change that because this like textured background was an attempt at getting around that um i think this one is too textured though because the computer struggles with it um and then this as well was another way of getting around that but it ended up feeling a little bit too heavy-handed the the texture in these strokes so yeah i don't know basically there's more to figure out there but that's not today i just really want to get in place um what we have so far you know and let's note where we still want to work on things uh and stuff like that because i have a new designer joining the team in january right at the start of the year and i really want them to be able to start and like have it in one clear place what the heck the convocat brand is because right now um well it's like ophan just said i'm experiencing documentation debt that is definitely how i feel right now um so yeah we gotta get on to that so i'm gonna find my file because i made a style guide a while ago and someone else said earlier on that they're excited to see me work on the design system but a style guide is not a design system so i'm sorry to disappoint you but that is not what i'm working on today um i'm essentially trying to document what our brand is uh to try and like explain it yeah wow things have already changed quite a bit since i lasted this version which wasn't even that long ago i'm just trying to like get all my thoughts out on paper um and there's gonna be obviously plenty of room for when the new designer starts to have their own input on this of course things like that um oh i didn't think to check is my audio levels okay is that background music a little bit loud i forgot i changed things from the last stream no one said anything so i hope that that wasn't the case but please let me know uh i cut myself off what was i saying yeah i want him to know where we're at um just because i think it helps to have some constraints rather than coming in and it'd be like anything goes you know so that's what i'm gonna try and do today got my coffee um where shall i start i'm gonna be working in these two files so i'll bring those close together i'm gonna first review these pages that i have and think about if there's any others that i'd want to add fonts i mean the font sizing isn't really necessary as part of this document i guess i'd leave it in there colors is a big one um within colors i might even need oh i'm going to make a 20 22 page even though we're not quite there yet will we um what do you guys find good let's just copy this in see here you can see some different styles we've tried for product illustrations okay and that won't be in there organic shapes yes okay confetti would not be in though we would not have that um maybe we want to have one page that's eight oh why does it keep doing that oh and i don't want to have one about product imagery as well um i think i would talk about yeah that there uh [Music] product imagery icons can be separate kevin is flying to spain from sweden visit family nice uh the style guide still helps you get an idea of the colors and components it will help you get an idea of colors but not components it's about a it's a style guide for our brand in general not a website specifically if that makes sense so i think it'd be cool to highlight in this where our gaps are as well but let me bring in the colors for now that i'll figure it out hi brandi we have a colors file somewhere yeah here let's start on this this is something i owe to the other designers oh no nikolai a terrible presentation was it one that you were presenting or you were having to listen to either way i'm sorry okay to do my best to try and merge this color system um well you know what i don't really need to be doing that now i should focus on one thing at a time i'm thinking of time whoop oh i'm sorry to hear that didn't go as you wanted well obviously the front cover of this we should change to like match the brand and since we're trying to no longer use these shapes they should not exist on it should they let's bring in that this is where i ended up on really liking for product imagery and this one don't drop the course okay here's the thing nikolai here's a harsh truth for you you need to be able to accept feedback as a designer and just because someone isn't a designer doesn't mean they can't give you useful feedback it's definitely a learned skill and i know it's really hard to like accept um but it is important it's an important skill to learn so you can do it i believe in you oops didn't mean to type cool in caps but it is kind of how i feel you were meant to come with me let's make this background ah see this is why i need the colors already saved don't i it's probably not worth it right now um then we want a 100 i hate frames so much there we go it just makes it so hard to click on like literally anything else behind it is there any reason you went for a more pastel look for convertkit um we wanted to bring in more color and when we used the main strength brand colors like i could show you on a on a page watch page was going to be a good example of this um maybe this page so ignore the top obviously that is now in the pastel but see when we when you layer the full strength colors on top of each other it feels very bright and like we we were often feeling like we couldn't make a section a certain color because it was just so bold um and only really the blue worked and was accessible as a background color and ever since we brought in the pastels like let's go to uh this page i feel like our pages just have more of a sense of color to them even though they're pastel colors compared to like the grays that a lot of our sci was before so yeah that was a core reason is to bring in more color make it feel a little bit fresher um yeah also they just look cool and sometimes that's a valid reason you know of this is still in flux though you know like nothing is completely settled on and could change but this is where we're at for now oh and this is figma for creature work studio who asked looking cool i mean not wrong let's change out the background here i think it's going to be worth my time to put these colors into the system to be honest just because it's ending up yeah let's do it okay so i know that some of these map two colors already have here oh that's not shrinking what's inside them is it nope i don't understand how this auto layout is working do i have to shrink each thing individually if i want it to no i can use k right yeah there we go that's not quite what i wanted but it'll do okay so 100 is this kind of where it went those are kind of similar [Music] okay do i prefer figma over illustrator 100 why are you doing the style guide and figure out indesign it's definitely not print format nikolai there's no reason for us to print it and figma is where we work so it makes sense to have the style guide in the same tool that we work in okay so i'm going to to attempt to do this in a way that will not break our system for other places that it is used let's see how this goes so we're going to change the color to this and call of 50 okay so this one is currently 200 so we are going to change the name to 100 put that in there and this is basically currently 300 so we'll change this name to 200. it's really hard to yeah i don't know think about updating the system in this way without breaking what exists this is definitely new so for this one we will go add nope not there here add and we'll call it blue 300. and then we'll want to put it in order i wonder if there's if it'd be better to name these um based on can i move you up so that you sit there here like i wonder if i should put them in folders you know what i mean i don't know let's just do this for now so we don't have a 400 either technically um so let's 500 is basically currently the 600 so let's do that next uh other way around okay 600. so now i can make 500. i don't think this is going to take as long as i initially thought but where does this guy sit is this the current 700 or is it the current 800 hmm is there any convention for the numbers yeah um so elf worked out these colors based on like a mathematical system and so it's basically like this stepping through lightness um so it's sort of like an even distance of getting darker between them and then so 50 at the bottom here is called 50 instead of zero because it's not as big a step as the 100 to 200 for example i think whatever's currently 700 we want to make 800 now and that one might be one that needs some tweaking so we'll just yeah we'll do that for now oh we already had an 800 interesting okay so we'll make that 900 then and yeah i thought about doing that um asaro but for now i'll just keep the naming convention the same and then we can look through that later because this is not about setting up the system as such but i'm ending up doing this because i'm wanting to create the guidelines okay and then i'm changing the name of this and doing that and now we put in wait that was the wrong way around wasn't it yeah i wanted to do this one in there yeah there we and then go one becomes second 700. oh why can't i count nine eight seven six five four three two one fifty cool that's the blues done um same pattern should hold true for the reds but let's um confirm and make sure shall we hmm no it's definitely more like 400 that's new i don't know yeah okay we'll do that ah the hopeful song okay we're going to rename this to red 50. that's right this becomes new what is currently red wait it's or yeah it's red to 200 and it's gonna stay red 200. we're just gonna update the color of it okay red 300 will be new which one is it more like actually yeah let's just keep read 300 the same and let's update the color um now we need to start working backwards because this one is so brown but i don't think we'll use it for things other than hover states are you all working on something today as you watch or just chilling i believe yeah the darkest one is 500 so we're going to take this and make the current red 500 this and call it 600 now we make a new red 500 and less than you read 400 i swear that updating a system is more complicated than starting from scratch oh how i've ended up with two red 400s what have i done how did it let me have that well let me check i need it to be this color so i'm going to delete whichever one is not that color which is that one so this we will no that needed to become 500. okay my bad i know what i did okay and then we'll delete you and rename you cool sorted so if you're studying nikolai is gonna switch to figma nice that's so weird that they don't stop you creating um duplicates huh creating social media posts on pigment for your workplace nice sam's working on the design system for the company's scheduling software nice whoa didn't mean to do that okay green's turn oh yeah this color has changed quite a bit so this is interesting but we need to make sure yeah um okay i'm gonna start at the darker end this time so what is currently 500 needs to become 600 what is currently 400 needs to become 500 what is currently 400 doesn't exist so i mean what is currently let's make this then yep i'd always hit that green 400 yeah i find we'll publish them and then that'll be updated oh thanks brandi i agree i think more designers should stream three two one [Music] what is this currently this is three yeah we want it to stay three but that's a lot darker than the current 200 isn't it that's okay the current 100 needs to turn into 50 [Music] and then we oh my god i did it again cool now the darker shades if you like colors and i don't know this is just something that we could spend forever refining or we could just like use it put in place what we have right now and then you know see how we go from there make changes as necessary so that's the approach i'm taking what's the difference between a file in a design file i don't know what you mean do you mean a fig jam maybe is that the other type you're seeing okay let's do the same thing again because that worked out well last time i think starting with the dark colors 600 oh this one i think the 400 seems to be the new one yep and then we'll update 300 update 200. yes jacques i am enjoying the new airpods max they seem to be working good on this stream the last time they were not so well so i was a little disappointed oh nikolai what that means is um so files and drafts basically means you can't store them anywhere and i think you can't invite people in to share them either and then you can like save three officially into projects i guess that's weird i think that they yeah their pricing system they should have kept it as free as it was before oh whoops i was meant to change the name of that one as well that becomes 50. for everyone asking about the the numbers um i think it's a pretty common design system thing to have colors named in this way um but basically it's like level of color right like all of the 50 levels are the same level of brightness along the levels so it goes from lightest to darkest i think maybe it comes from tailwind or maybe tailwind just uses it but i don't know right now the dark ones so what i need to do in the style guide oops is define i just called that one 700 and forgot the yellow um i need to define what each color is used for so that comes next i forgot to put these greens in place yeah maybe it was tailwind that started this um dk jux not quite uh there's lots of different ways to experiment you could go back to my color palette stream um a couple of streams ago and watch what we're experimenting with there we were playing with the saturation amongst other things okay the grays is the one i'm most nervous about changing but let's see what happens yeah we're working in figma right now thanks for answering don't know if these grades are 100 right but that's okay oh my god i keep doing this yeah figma is the channel sponsor and that you should find a link in the description 100 right so what is currently 300 needs to become no oh i think i just did that wrong i don't think i wanted to yeah let's delete you wanted to change yeah the name of this style and you become 100 okay there we go and then 200 is the old 300 um one two three four yeah okay we'll do that then oh this one's definitely new hola hugo yeah we'll see if they do a proper fires this year what are my views on sketch um i use sketch for a while but i prefer finger that's my views okay and then 500 stays 500 just we change the oh interesting what about here i think 600 is new as well okay so that needs to become i already have a 700 okay let's do this first thing okay and then 600 is new that was breaking my brain a little bit but i think we've got in there oh thanks for asking us our i actually filmed it today it um yeah took me a while and i included your comment in it that you left in the last stream so thank you for that look out for it it'll be like on screen in the episode it'll probably come out next week we'll see depends how fast my editor can work on it bless her okay i'm going to publish these this is terrifying what remained unchanged oh wait um well that's not right what's happened here something happened with the blues i think i was working on those before i properly understood what i was doing blue 400 should have changed i'm gonna [Music] copy these and apply to them to see where i went wrong 100 200 300 400 yeah there we go that's what we went wrong let's just edit that this should be five hundred six she does do an amazing job agreed okay now it should show me what is unchanged yeah just those okay that's good i think the teamer the the orange is only used by the product team for like certain alert things and obviously white and black um black might actually be the darkest gray now but whatevs let's go publish fact the color styles are all over the place what do you mean they're all in order okay now we can [Music] i think we have the yeah so now we will review updates oh okay i have not worked on any vr or ar projects okay this is going to make my life easier in this part [Music] wait why didn't that update do i not have the oh wait am i looking in the wrong color system yeah i have the app design system turned on hmm not that one this one there we go oh that's annoying why are those colors not i don't think i like this example with a photo i don't think it's the best good question cleveland um i studied design in new zealand at massey university i have a bachelor of design with honors majoring in visual communication design but i would say that amplifying my design skills was really like working in the industry i learned so much in my first few years on the job this is still accurate for now anyway i don't know if that's needed in the style guide i think i should arrange them like this okay so this needs to change okay here is where i start to define what each color is used for what's the best way to do this i think i'll use my own font plug plug actually where's that um maybe it's better to lay it out like this actually oh i think i'm gonna have a separate page about how to use the colors so we'll have this thanks asaro you're so useful glad to have you in the co-working club yep font linkedin in the in the description if you want to buy grayscale okay so here i think i need to put examples in place [Music] so over here we had backgrounds typography do i think i should put an example maybe from the color playground where i was messing around with this trying to think what the best demo is i mean maybe this one's fine i don't know yeah corey's out today um so no cory in the chat today one day corey and i need to make a video together about that don't we ah how do i describe this actually this is pretty good and this probably still rings true but apart from we move it down and say 50 instead of 100 i'm just gonna copy this over let's make this the same font styling i've used elsewhere in this guide like that we will let him have a day off because that is healthy i'll tell him that you missed him though let's check if this works because i haven't actually tried this exact color palette on my things so far so good oh that's a bit darker than expected maybe maybe it's okay yeah it's probably okay oof what is up with the line height here i got to play this playlist yesterday in a meeting at work because um i ran the meeting and what we do in our update meetings is um for the first like 10 15 minutes everyone is sitting there together on the call reading through the update doc and leaving notes of questions and like things to discuss and we play some chill music in the meantime and so i was like my twitch streaming playlist is perfect for this what is this i wonder if this should be i think i can get rid of this and this from the example hi it's super crash nandy how do i explain this it's kind of like you always want to have hover states be one level up from what the current thing is if that makes sense do you find that creating these brand guides need ruining updates when you're on so if you just get into the website um so this is a brand guide rather than a website style guide if that makes sense so no it's more of in general the general approach to our brand but um it's been in need of an update to get aligned for a while yeah i think nikolai that's a good way to phrase it i'm not going to say blue or secondary anymore because i think now that we're in fact yeah do used for typography and ui i think something like was in the last guide so i had this where it was like main hues that's important to call out so i'm trying to figure out the best way to do that we'll just call it full color backgrounds like in this guide did oops yeah definitely frederick it's definitely still useful for the company brand um and we have like absolutely what i'm describing here is how we use the colors on our website but it's also how we use the colors in or how we should use the colors in other branded graphics just to keep consistency you know i don't know if this is the best grouping of the information like i'm feeling i should group it by color level and not by like here's what you do in light backgrounds um [Music] let's let's keep trying it i guess apparently not following a grid here and then is 600 the hover state yeah i think it is i think you need to bring in a button as an example here don't i button oh shoot this needs to be oh it already did update itself that's great that is why i went to the trouble of doing the colors in the way that i did thanks frederico yeah sorry i thought that i was using a grid but apparently i use it for this side and not this side wait hang on there's a different grid that's weird what the heck how's that happened is this page oh my god have i yep i've done something to that page how frustrating okay well let's just duplicate this page i thought that i had used a grid i was calling myself out on that i must have accidentally like i don't know grown the page when moving something there we go are we happier now yeah every other page is right it's just this one yo okay i have an idea for how to make this section look nicer what if we do this we show some examples of color in use [Music] maybe we do this and we have the image and then the explanation i think that probably looks a bit neater [Music] um i would ky i would describe a style guide as something that helps all of the designers get on the same page it's like a shared understanding of what the brand is how brand elements are used that's how i'd describe it but anyone else in the chat got a different definition you want to share yeah blueprint that's a good word for it why have i lost my cursor figna so now what do we use for our headings is it blue 900 or is it blue 800 i think it's blue 800 make this yellow oh this is looking so much grayer than i'm used to i don't know how i feel about that i guess it's okay how do you know which color to use well federico that's why i'm making the guide so that everyone can know uh what were the weird headings icons and dull text content interesting that's not such a thing that we would say here i have to put the um wait that was blue 800 and then gray 800 okay interesting into risting should it be 700 no it definitely is great 800. what does maybe we shift our system and we use gray for headings gray 900. maybe i'm so used to our headings being like a navy color though wow that's so subtle but to me it feels so different i don't know if that's coming um across in here yes thanks ramon um that has already been pointed out to me and i hear you i need i should work on that maybe this works better across all the colors though you know let's just try it let's make these ones blue i mean i still think the navy looks really nice i'm gonna stick with it for now and that can be up for debate i'm gonna actually i'm gonna start leaving a note in here on do we have yeah oh cool so this is going to be my light way of leaving notes for myself and the new designer to like work on together and also for the rest of the design team at least i've got my cursor back i don't know what happened to that um because i don't think it would pass accessibility standards to have this be like to us to do the tonal thing here unless we did it like that oh that's an interesting point you know what i think that's another decision to make cool i'm looking forward to having someone to like deeply discuss these things with i'm using the figma desktop app i don't i know it's the exact same thing i just prefer the desktop app it feels more like a proper design tool you like the navy chris i do too um sometimes you have to close figma down and start again nikolai right so now we need another page of i want to say that it's okay to have white backgrounds as well all right um oh you know what's cool is now that we [Music] have um oh sorry sorry all right gotcha uh our red didn't used to be accessible and so we weren't able to use it for secondary cta buttons but now that it is that could be a thing again you know oops let me poke around our site and see if there's any other examples um yep icons do i feel like we don't use a full strength color as a background anymore icons then we're also going to have illustrations [Music] i feel like on the marketing site we're really not going to use 700 to 900 i mean except for the blue for a heading maybe we'll see [Music] because in the app they might do a thing where they have like a color background and then use a darker button on top of it but that's just not what we're doing in the marketing site um the colors are all going to be the same as what the product team uses but they might have different slightly different rules for them depending on what works best for them how have i been going for an hour and 21 minutes and this is all i've gotten god okay let's take this as an example if we'll make that one pink [Music] can oh where was the use case though where i had here [Music] how else do we use icons um chris it's funny you say that because right now the main button throughout our app is red um and so that's what we're gonna talk about changing i don't know it's it's red because that's what our logo is right like our logo is the red color uh so it's has been treated as like the primary color but yeah it's not great to use red as a like a positive action so we're going to talk about that did that get out of cheer nice i don't know how often we're going to do this whole thing like now that i'm looking at the way i've done this with the icon and the dot it's like out of alignment with um oh system i think so that's interesting it's a good learning it's a good learning to have and let's say okay like if i did this oh like if we had an icon on a button now it'd probably just be white wouldn't it um how do i want to explain this um you yeah i think maybe wording it like this you're right sorry other um yellow is used a lot but i want to change that like i want us to use all the colors because they're all pretty i'm wondering if that red feels like a different red to i don't know i need to do some exploring of this color palette but what we've got is fan so far um let's bring in this guy i wonder what that could be close to yeah so we're going to say 50 to 600. um [Music] here's where i need to bring in the illustration levels [Music] um how am i freezing is elements in yeah like that and then we have oh on this page i think the illustration was actually yeah a bit lighter hmm interesting why did i do that what are my thoughts on vision um i still use envision prototyping to share designs a lot of the time but i've never really used a vision studio i'm gonna be honest i didn't know it was still around [Music] if this was full strength [Music] hmm what's the rule here i mean that looks fine but i kind of liked it that it was more muted [Music] if i bring this in here how you doing today oh oops i was adding a stroke do we make the rule that they should be 400 level i don't know let's see what this looks like in the new green 400. i think we're gonna go with that for now let's do that yay justin congrats how's the first day going that's exciting trying to think what are the usages of our usages is that a word of our colors i should define [Music] let me look at our homepage and think nice tackling jumping straight into the marketing website that's fun oh maybe i need some do's and don'ts with color like hey no not now i always push that accidentally um like you wouldn't mix like for example in this or maybe we can actually use that as an example [Music] i have an idea i'm gonna combine this into icons and illustrations and we're going to bring in [Music] the yellow one okay and then we're gonna do a do's and don'ts beside it [Music] [Music] i often wonder what happened to envision because they were such a like iconic company in the design world for so long you know they gave a lot back to the design community um supporting a lot of projects and things they supported my patreon for like a year paying me like i don't know a good amount per month i was very surprised but it was you know also very grateful for it to have them but i just feel like they haven't i just haven't heard anything from them lately you know like what are they up to what's in vision up to um i think i need to make this look slightly different so so i remember when my old team wanted to switch from figment vision it was a pretty dark period that's funny i think figma just ate their lunch a little bit you know especially in terms of prototyping and everything um yes i think you can do that now but i don't bother because i mean well we're still working on it but ideally we have a system in place and we don't need to like mock up the hover stage each time if that makes sense how do i okay first let me think about what i would actually want to say in this do and don't listen um do i have a little check icon nice yes that's it sorrow the interactive component um makes it possible i believe you are correct but i haven't bothered to say any of those up maybe we have to make it look similar what else do i want to say i want to make a little mini example of what not to do it's going to hurt um [Music] oh right and then let's make the background pink just to really spell it out hello where are you in my layers there we go do there we go we'll say it like that how about and then [Music] yellow make this one pink feel like i'm getting somewhere how are you all doing oh and then we could put the where's the migration one as well put the little truck guy we can error messages for a web app oh is that where your question about the um error message color came from chris because that was what you were working on have i used the new audio feature in focus i have alph and i did when we were working on the colors actually it was really fun like just nice to chill and chat in the same file um and i also showed him that the cursor chat exists now inside figma itself which is super fun do i'm gonna have to sort out these colors aren't i you were all right what else do i want to encourage people to do with our colors um oh um maybe that's how i'll explain it does that make sense to you basically meaning like you wouldn't have a green section with a yellow section directly above it you would separate it by some white in the middle first if you just heard that noise that was my cat jumping into a box sophia is done with goals for today and nice what time is it where you are sophia that you're at a point where you're done with your goals for the day also when is my meeting okay i have a meeting in half an hour don't let me forget that and focus yes still recovering from the f1 shambles i feel like i'm over it um but i want to see them make changes so that it can't happen again if you know what i mean um i think the new workflow membership rollout is really cool i i'm thinking of doing a course next year turning my talk workshop that i have around building your reputation as a designer into a course like a little mini course like a less than 100 bucks thing uh probably even like less than 70. um and i'm thinking of trying to use the webflow memberships feature for it combined with convertkit commerce i'll come back to this because i feel like um that's all i can think to add us at the moment oh my gosh sandeep i struggle too if you look at the convertkit site right now you're gonna see a lot of different design styles going on because we've been in flux this year um and i'm trying right now to put some guide rails on it so that's yeah that's the point of this work that i'm doing but i hear you i absolutely hear you [Music] okay what's the best example of this probably not that anymore [Music] have i ever used wordplay ecommerce yes i did i used to use it um to sell prints when i still had my print store and now i use it and then i used it to tell my font before convertkit commerce came out but i will switch to convertkit commerce instead of sticking with webflow ecommerce because that ecommerce hosting plan is expansive um not only you're paying for the plan fees then you're paying like the transaction fee on top of that uh so yeah it was it was just a lot um and i didn't feel like i really needed it when convertkit commerce could you know do what i needed so i switched to that it's got lower transaction fees to sell my digital product but i really liked it like i if i was gonna run an online store again like a of physical products i would um i'd probably use webflow e-commerce again just because of the design customization side of things [Music] [Music] i'm trying to figure out what i can show on this page what happened to this color corey what do you have to [Music] i don't know how i got that color [Music] oh sophia nice i'm jealous that you are almost wrapped up with your goals for the day at four o'clock i guess that's pretty normal if you don't work for a us company for me this is kind of like you know halfway maybe three quarters through my work day oh and that's the end of our playlist folks that means we've been streaming for an hour 50 minutes let's just start it again i need to add to it i think it's pretty good one though i quite enjoy it hi zeke what time is it in singapore that you just wrapped up with work so right let's just show this i feel like that explanation that i that past me wrote is good let's put this in here you ever do that when you look at something that you did a while ago and you're like i stand by it 11am venezuela 11 pm fusique and you just wrapped up with work that's a late work day if we had a commenter of the day i would give it to you osaro i appreciate how kind and helpful you're being to everybody in the chat and the fact that you're part of the co-working club that's just that's awesome [Music] do oh frederico not yet 4 30 but thank you for thinking of me let's add in another oops another hand-drawn element in here i'll grab it from the home page yeah these guys tips are used to manage energy in a workday coffee no um being more serious um i would say i don't know what what is your what is your struggle with managing energy maybe that would help let's start there thanks chris meeting isn't yet meeting isn't yet we're good we're good um okay i'm gonna put product imagery before illustrations oh and i want to find there's some examples i think on instagram wow shoot i have not checked in on slack i hope no one needed me for anything yeah we good every time i go to check slack i lose the chat there we go okay where is our product release thing i don't know if these are the best examples it's pretty close though oh the scented text we needs to work on that okay let me try and figure out how to explain this let me bring in these two same examples that i've been using across the board thanks zeke your doctor tried to take coffee away from you oh no have you tried drinking like matcha or something instead that's what i've heard people use as like a in between you know hey innovative designs how you doing oops okay i know what i want to write here i want to write something about um well you are not at all centered are you you're behaving very weirdly okay um here i want to say hi over there in new york shirley chris five to six hours sleep at night that does not seem like enough i feel like maybe six is my average right now too because i feel very stressed but i know i need more i started reading this book called why we sleep i think that's the name of it and i'm going to be honest and scared the hell out of me we showcase our product using real looking examples i'm gonna add in oops screenshots are often surrounded by browser ui um that's all i'll say for now i feel like that needs much more explanation but the visuals do do the job oof yes i i mean i can't imagine having a four-year-old but from what i hear kids do not sleep as much as adults in the morning you could take a nap after a double shot of espresso no okay now let's explain this we usually load a product during the talking of an installation okay i'm gonna cut off this here i want to say something about how we try to use a photograph of a creator when necessary as well so here we go we we usually let either our product or images of creators do the talking uh photos of creators i don't want to say imagery twice when it comes to imagery on a marketing site but we need an illustration to represent an abstract concept or a piece of ui this is our system oh thank you asaro are these from the new icon system i think they're from the old one did i save that somewhere yeah i put it over there okay um let's bring in the style that i used here thanks for joining sophia yeah see you next year while that's wild to say um and the reason that i i think i already said this at the start of the stream but for anyone who [Music] joined a bit later this is probably gonna be the last co-working club of the year because this time next week i'm on a flight to new zealand i would love to promise that i can stream while i'm there but i don't know how the internet or my laptop is going to be for that so yeah maybe we'll try in january but if not it's probably going to be february that is the next time we do streams which makes me a little bit sad because this is fun but that is life i might end up buying one of the new m1 macbooks while i'm in new zealand we'll see yes there will be vlogs though to um instead of streams i'm going to be vlogging every single day while i'm in the hotel quarantine we're going to try anyway which will be fun so hmm i know frederico it's really sad that's why i feel like i'm gonna break down and buy a laptop that could stream while i'm there i ran out of time to buy one here in spain with the uk keyboard and i just could not get used to a spanish one whoa did not mean caps um this level is used for large illustrations oh let's say this style have you worked for a design agent for i haven't i'm afraid i have only worked in-house yeah don't worry you're sorry i'll go in a sec i appreciate you looking out for me five more minutes let's say um it's a demo meeting with the company that i want to i'm interested in using for brand metrics so basically it's like show up and let them pitch me i have my questions already prepared um that i think explains it and this one we haven't figured out yet so i'm gonna put this note here saying what should tertiary ones look like and we'll work on getting those in i'll just quickly copy in some of the things we've talked about here um and these two and yeah we don't have a fully fleshed out tertiary yet so that's okay we could bring these down and then i can put them sort of like in the line i don't know no i think i'll do this i think i'll have l1 l2 um this is gonna need work whatever now we're reaching the end of what i can get done okay then we still have icons to go and then photography yeah those can stay in there my cat just woke up and she has her tongue poking out it's so cute okay let's do answer a few more questions before i sign off um let's switch back to camera mode to do this okay how is it being an in-house designer i love it i would always want to do it i like being able to get really deep with a brand and um yeah improve on it and iterate as well which i feel like you don't get to do as often in agency work do you recommend going independent without what without an insurer clients before i don't quite understand that question dan are you asking if i think you should go freelance without having any clients to go freelance with probably not a great idea i would try and get clients and like experiment with that process before quitting a job i'm curious how many designers are going to be using these guidelines well mainly it'll be me and the other marketing designer and also our graphic designer the contractor we work with but i think that where possible we should apply it to product stuff too like definitely the illustration levels that will be applied to product hopefully the use of backgrounds and like the way we use colors can be applied and like who knows maybe we'll get the product designers to add into this you know but yeah pretty much everyone on the team in general like but then they're most needed for the marketing designers if that makes sense yeah okay um i had better sign off because osara keeps reminding me my meeting is coming up but now i only have eight minutes so thank you for the reminder um appreciate you all being here today this has been a really fun stream and like streaming in general has been really fun for me and it seems like you're enjoying them too so we will keep them going and yeah one of the things i want to work on when i'm in my hotel quarantine next week is like visual brand for the co-working club um i saw a few people asking about the broken heart before that you see next to sarah's name um and that's sort of left over from my twitch branding but i think we need something special for the co-working club so i'm gonna work on that while i'm in my um yeah quarantine probably yeah chris it's fun to hang out um cool okay i should end it here i feel like i'm doing that thing where i'm like but i don't want to go because i'm having fun but thanks for hanging out with me um hope you have a good like christmas holiday if you celebrate good new year and um yeah i'll see you in lots of vlogs coming up soon so yeah see you then bye you

Channel: CharliMarieTV

Views: 3,279

Keywords:

Id: zgWZX011VaM

Length: 134min 32sec (8072 seconds)

Published: Tue Dec 14 2021