How to prepare your design portfolio / Design Tutorial

hello in this design course we want to touch on several problems in creating case studies for the portfolio it is a well-known fact that designers and design studios put off this task until later and when the right moment comes new cases are prepared in a hurry another problem is related to the format how should i arrange the case design in the portfolio so that it looks presentable many designers use the behance platform to present their work but not everyone can arrange it beautifully and this greatly affects sales companies try to present all their work on the site and is desirable to develop a single template for all cases to be drawn up this masterclass is aimed on showing you our approach to case design when working on a large project you need to sketch out the structure before designing let's say the project included branding a mobile app and a landing page i start with creating wireframes that are needed to determine the order of presenting information and the order of blocks first comes the introductory part therefore i place the name of the project in the hero image at the top these elements will be the face of our case study after that it will be good to write a few explanatory lines about the project and the task you faced next up is the branding block in fact the work in our studio began precisely from this stage it can be dedicated to what was done and what you used in your work it is a known fact that designers don't like to write texts and sometimes it is difficult to come up with even one sentence but it helps you to give an overview of what you really did all this work for now i'm sketching blocks in a preview without getting into details i'll come back to this later [Music] showing video materials among static images can really brighten up the case hence why i'm using the large block containing a video presentation i will use the same approach to design all other sections of the case [Music] it is important to add a link to the real product at the bottom if there's any this is an important element of proof for a potential new client additionally you can add a customer review this is even more credible the structure is ready now so i move on to preparing the necessary bits and bobs when designing the case i use materials from a real project we worked on as you can see there are a lot of materials and my task is to come up with various combinations of design to make this case look spectacular you can write text yourself but either way i would advise to show them to a copywriter in this case i am using a previously prepared text i am outlining the grid it is better to use non-standard text as headings there was a time when we named our projects like ux ui design of mobile app or project redesigning such titles are very boring and don't reflect the point of the project at all for the cover i used one of the large illustrations with an overlaid smartphone mock-up this emphasizes that the main product is a mobile application [Music] in presenting a project not only are the images and your design very important but also your thoughts a potential client or employer looks at how you solve the tasks find solutions and what you have learned as part of this project we made various animations plus we filmed a video review of how the application works in reality if your project has no animations then take the time and make some fake animations like i said before this makes the whole case study very lively i will now add a preview and a note for the developer that there will be a video in full hd format in the branding section i will add a short headline our team was rebranding the existing logo and i would like to combine several creatives into one there is a fairly popular technique for this when various materials are layered out in the preview at an angle [Music] as a result it looks like a really large piece of work has been done plus this visualization itself adds dynamics now i want to show the rebranding in more detail as for the structure of the preview display i decided to focus on the staggered arrangement of the pictures first it will be convenient for responsiveness since the case is being prepared for the website and secondly i can use either square pictures or elongated ones [Music] in this section i show everything related to the style of the resulting brand corporate elements mock-ups illustrations and typography [Music] [Music] [Music] [Music] [Music] so i make small text inserts between the pictures but the emphasis is still on the visual part the text dilutes the strip of pictures and adds visual pauses between them [Music] looks better now that's all for the branding let's move on to the next section now i want to show fragments of work on a mobile application this stage is absolutely distinctive from branding so it would be better to add a separating title and additional text about what exactly you did on this part of work [Music] first comes the title picture then we need to select several screens to be displayed similarly to what we did at the beginning there are a lot of screens in the layout and it is hard to define which particular ones to show therefore we split the screens into separate cases and it's easier to navigate that way in fact you can pull the screen out of each case and they will all be unique that's exactly what i did to get this selection [Music] i choose the screens that i will use for the composition and transfer them separately before starting to assemble i recommend rasterizing the artboards otherwise unwanted deformations may appear when resizing there is a plug-in that allows you to rasterize the artboard in maximum quality it is called flatten selection to bitmap figma allows you to apply the last use plugin with the command option p keyboard shortcut [Music] [Music] elements from the ui design can be added to the background the case is dedicated to the sleepiest mobile app so i will add a few stars to the background before starting to show the details i make another text insert in fact there won't be much text for the whole case study but even this amount of text is sometimes difficult to write therefore practice and learn to write correctly as for the margins between the blocks i arranged an indent of 240 pixels between the semantic blocks and 400 pixels between the main sections when extra space is required this consistency gives order and neatness throughout the entire layout [Music] as you may have noticed i hardly ever use realistic device mockups some time ago it was very trendy to shove an application screen into a realistic iphone but in a case study it will look very heavy because above all the task is not to show the 3d device renders but the work done on the project but if you want to brighten up your presentation and add device mockups then i recommend using simplified versions of devices without details that take away too much attention by the way such a mock-up can be done even by yourself i have selected a minimalistic mock-up that will perfectly fit into the current design again i arrange the blocks in a checkerboard pattern another important point when designing a case study is the use of matching colors no need to try to select a unique color for each background it is very excessive and it seems that the elements are ripped out of different projects several design elements have been animated specifically for developers in this regard my task is simplified and i will use ready-made animations in some blocks but at the same time for the sake of the presentation you can take time and animate some transitions between screens [Music] [Music] [Music] [Music] as you can see i am trying to select the color of the backgrounds so that it is combined with the previews above i don't use the drop shadow effect in figma instead i use blur and adjust it as a shadow as practice shows creating a shadow in this way makes it more accurate and controlled this is not a requirement but simply our approach [Music] i add an illustration to one of the blocks to dilute the appearance of this section sometimes you can just show the icons separately these are all ui elements showing that you can make both illustrations and iconography within the same project [Music] and here i also dilute the blocks with pictures and text [Music] the final section of the case study is a landing page demo the site consists of two core pages and the rest are technical screens i'll take the home page and the statistics page we can't rasterize large layouts using our plugin so we export using the old method the next problem is that figma spoils the quality of all imported images larger than 4000 pixels for this case i use plug-in insert big image it allows loading long grids and large images as a result we get high quality layouts in p and g divided into parts but in one group [Music] [Music] [Music] [Music] [Music] [Music] thank you [Music] [Music] [Music] [Applause] [Music] [Applause] [Music] [Music] [Music] [Music] [Music] so [Music] the section about the website is done to sum up the case as i mentioned earlier it would be better to add a link to the completed project and feedback from the client the case study has been completed and now this template can be used for other projects plus in the same form you can arrange it on behance or if you have your own website then make it responsive and send it to development i can say right away that when you show this kind of presentation in your portfolio it is a huge bonus any employer will appreciate such dedication and even if your relationship with the client wasn't long the presentation you show can always be more impressive than it was at the time no one will condemn you as some kind of fraud because on the contrary you show your capabilities that you couldn't apply to that project at the time and these skills will come in handy in future projects [Music] you

Channel: Cuberto Design

Views: 430,839

Keywords: how to, portfolio, design, tutorial, cuberto, web design, learn, master class

Id: emSv9TTHZVY

Length: 25min 9sec (1509 seconds)

Published: Thu Feb 18 2021