w w w. b j o r n l a u . c o m
Bjørn Lau Jørgensen © 2016
SVENDEPRØVEN
introduction
welcome to my final exam In many ways this is a milestone and the culmination of almost 4 years of education and learning as a graphic designer. A lot has happened since I started this journey, both personally and professionally, and I hope you will enjoy my final publication as a student. On the following 26 pages you will find some of my finest projects during this period, but keep in mind, this is also just the beginning.
02 路 introduction
navigation
table of contents The structure of the danish"svendepr酶ve" which means "final exam", is split into 4 core competencies. In each competency there is one project that shows the most important skills in that competency. All projects are real world projects that I have made.
typography
graphic design
image editing
workflow
04
10
16
22
toc 路 03
typography Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.
04 路 typography
the project
CODEX 2014 Codex comes form the latin word caudex which means book. At Creative Company this is also the name of their employee handbook that is given to all employees every year. Codex holds the latest practical information, and explains the company visions and spirit.
typhography 路 05
target group - my dear colleagues The target group is all of Creative Companys employees. There are almost 200 people working in the company all the way from warehouse workers to people sitting in the office or driving salesmen. In other words this is a very diverse target group, although they all have one thing in common, they work in Creative Company. CODEX is considered a vital and important part of the HR work in the organization. One of the important goals with the book is to expand the understanding about the company spirit and visions, namely one
vision referred to as "The Dream Factory". But The Codex also holds a lot of practical information, like contact information, organizational charts and holidays. At the same time codex is a look back at the past year, with a lot of stories from employees and pictures from social events. This is very important and might be one of the biggest motivators for an employee to actually read in the book.
will you be my typeface? Myriad Pro Light + Italic Myriad Pro Regular Myriad Pro Semibold + Italic Myriad Pro Bold Felt Tip Roman Regular
06 路 typography
Creativ Company's main font is Myriad Pro, which I was required to use. This might sound like a limitation, but I actually think Myriad Pro fits perfect in this book. It's a Sans Serif font and I think it gives the book a very modern and serious touch. In great contrast I used Felt Tip (an also very used font by CC) to play around and make the reading more dynamic and playful.
paper cover size spiral method
280 g / 120 g coated matt plexiglass A5 landscape black 15 mm CMYK / digital printing
how do I look in this spiral?
As something new compared to the previous versions I decided to make the codex in landscape format instead of a normal boring book format. I loved the new possibilities this gave me and went with an A5 size to keep the price down. This new format gave me the possibilities to make a 3 column design and decided to make the text left justify for a more clean an ethical look. I knew that this book would probably be used a lot by employees in
all sorts of situations, so I thought a spiral back was a good and cheap solution that would make it easy to handle the book laying on a table. My only problem with the spiral back was the look. It seemed clumsy and not very inspiring so I designed an inner margin with some of our latest product artwork. The idea was to sort of hide the spiral by making it almost a part of the design. At last a matt plexiglass was added to make the book more durable and exclusive.
typography · 07
what about the technical stuff? oh boy. I am not going to dig very deep into how you actually use this technique, but I am going to explain what it is, and why it is important. InDesign is packed with advanced features, but I’ll stick with t he ones that I think are the most important and characteristic for this project. First, we have the Justification tab in our paragraph style. This is very important when you have large blocks of text, and especially when the text is set to Left Justify as it is in this case. Left Justify can be aesthetic
and clean in a beautiful way, but it can also give the graphic designer some real challenges like floods in the text and unwanted hyphenation. Justification is here to help you with that, combined with the hyphenation tab and H&J violation. The unwanted hyphenation can be controlled in the hyphenation tab by setting up rules that prevent the most common unwanted things like widows and orphans. Floods and textflow are handled by Justification.
Justification controls how text is balanced in columns and what rules they follow. By changing the percentages in Minimum, Desired and Maximum you change how tolerant InDesign is when trying to make everything fit nicely in the columns. If you turn on H&J violation you will be able to see where InDesign is forced to break the rules and how much. This will appear as a yellow tint on the text.
You might need to make multiple paragraph styles with different Justification settings that force the text to wrap differently. And that leads us to paragraph styles, because they are just as important. Paragraph styles is used to easily ensure the same typography is applied all over the document, and even in multiple documents combined with the book function. It is also possible to nest styles and combine it with charac-
08 · typography
ter styles and even object styles. In advanced cases this can style very complex things with a single click. Next we have the baseline grid to ensure our text is always aligned, and our margins to keep the correct spacing around the edges. At last we have master pages to apply pagination, sections, etc. to all pages.
gutter 5 mm
inside 22 mm. outside 21 mm. top / bottom 20 mm.
typograhy my friend, tell me about yourself Typography is beautiful in a way that science can’t capture. So what is great typography? This question has many answers; and opinions, and it’s sometimes really hard to tell why something looks great, and something doesn’t. However there are some basic rules that you might rely on. I am very aware of the fact that the Graphic Designer I am today, is heavily influenced by the good old typographer that where back then. Typography used to be a hand craft and a good one. This still shines
BASELINE GRID 11 pt. starting at top margin + 2,4 mm.
thought in modern days of computers. There is just a slight problem because the computer dos a huge amount of work for us these days, so we might not even know all about the good old hand craft that is behind everything we take for granted today. 1. However, here is some of the basic terms that you might not think too deep about in your everyday life as a graphic designer. first line left indent
true leading 2 pt. leading 11 pt.
to be honest this illustration is just to prove that I know this stuff exists, and also a great way to find it again, because I don’t really use this stuff very much in my daily work, but it’s go od to know t h a t it’s there. 1. 2. kerning
tracking
1. 2. 3.
ascender
ear
ascender line midline 3.
x-height
baseline
em-space (1 geviert) en-space (1/2 geviert) thin-space (1/4 geviert)
descender line descender
counter
serifs
stem
the end result; is everyone happy? The project was extremely successful and made precedence about the company’s codex books which still today (2016) follow the same style, and it might continue to do that in many years to come.
typography · 09
graphic design Graphic design is the process of visual communication, and problem solving through the correct use of typography, space, shape and colour.
10 路 graphic design
the project
Getting Better 2015 A yearly back to base event that brings all of the international bosses to Creativ Company's headquarters to discuss the latest strategies and future product development and marketing. But also to ensure that everyone still feels the company culture.
graphic design 路 11
the international target group The target group is all of Creativ Company's international bosses, and a lot their employees. In other words, men and women from 8 different countries all the way from Norway to Spain, young and old. They all have different cultures and background, but one thing they all have in common is the Creative Company spirit.
great responsibility needs a great strategy Although Getting Better has been held several years, this is the first time that it had it’s own graphical identity which for me makes it a very interesting project because it gave me the possibility to make a fresh start. Also this is an in-house standalone event which means I was really allowed to push the limits of their normal graphic identity without fearing too much about loosing recognition for their customers. Their Human Research chief gave me 100% free hands to develop and design a new style and provided me with a 5000 dkk maximum to spend on all the materials that I could imagine and recommend. You can read more about what I decided on the following pages.
12 · graphic design
light and fresh, yet expressive 1990’s and Microsoft Paint might be one of the things that pops up in your head when you hear about a colourful rainbow gradient... or maybe a crazy roller coaster in a fun park. Perhaps a poster about gay rights or human diversity comes to you. All of the above can be associated with the rainbow colours, and now for someone Getting Better 2015.
den in this event style, but if you take a closer look you will see that the main colours is cyan, magenta and yellow, which are the 3 colours that Creative Company’s iconic logo shapes are coloured along with the motto, 3 colours, 3 shapes, 1000 ways. So at the same time this is also a new way of expressing their identity.
Actually Creativ Company takes a huge part in social responsibility and caring about diversity, and some might argue that working there is a bit like sitting in a roller coaster. But that is not entirely why I choose it. Actually the diversity reference is some of my underlying thoughts hid-
One of my personal goals was to make it clean, light and fresh, but how do you make something light and clean, draw attention and b ecome fresh? One way is to colour it, and here comes the rainbow with all its symbolic.
graphic design · 13
it doesn’t matter if you’re black or white I came up with 2 different versions of the concept, one with a black background and one with a white background. I was in great conflict which version I liked the most so I showed both versions to the HR chief and she liked both so much that we decided to use both versions in combination. It turned out to be a good decision later on, because it gave us a lot more freedom when choosing the different products that should be labelled with the design concept. As an example we could never have used black pens, if the style was only white etc. At the same time it gave everything a great contrast.
why these icons? The iconic square, circle and triangle as mentioned before is a huge part of Creative Company's identity so it was obvious to me that I had to use these shapes somehow. I chose to use them in a new form by almost spraying them out on this large banner with the beautiful colours going through them. This again holds symbolic as "Getting Better Together" is in the middle of all the icons, showing that we are united and many.
72 27 0 0 CMYK
0 100 43 0 CMYK
14 · graphic design
0 30 94 0 CMYK
GB15 written in ultra light It was also my idea to use this shortened name GB15 instead of Getting Better 2015, because it allowed a much more simple way of communicating and I think it gives a more serious and grown feeling. I choose Helvetice Neue LT Std 25 Ultra Light as the main font because of its modern look and its clearness. I think it fits perfect with my vision of making it light and fresh.
why the app shape? 2015 was a big year for Creativ Company! One of the breakthroughs was a brand new webshop that had been in the making for a long time. So I figured out that this tech symbol would fit perfect for this event, that had a lot to do with the new webshop. At the same time it helped the modern and light style I wanted to make.
the end result and products The design ended up on 2 banners, a lot of pens, a key-hanger with personal access cards, in a magazine about the event, and also in a video recap. Everyone was very impressed and happy about the final results including myself. All the products were delivered in time and with no errors so all in all it was a huge success.
graphic design 路 15
image editing Image editing encompasses the processes of altering images, whether they are digital photographs, traditional photochemical photographs, or illustrations.
36 1 2 路 workflow
the project
Jewellery on model
DIAMANTSMYKKER
Taking good jewellery shots on a Prisgaranti model is so incredibly challenging – Danmarks billigste – 14 kt. guld because making the model and the jewellery look right at the same time is nearly impossible. So faking jewellery on a shot is much easier and gives a much better result if you master the right technique.
Fra kr.
1.795,-
14 kt. diamantsmykke med 0,05 ct.
workflow · 17
photoshop, my good old fellow! I must admit one of my absolute favourite applications in the Adobe Suite is good old Photoshop. The development might hang a bit compared to some new players like Sketch but it has a rock solid base and I love it. This case is centred around Photoshop, but as explained in the typography case I can’t explain all the stuff that I know in one single case, so I’ll stick with the relevant stuff for this project, and touch a few others but not in great detail.
18 · image editing
RAW and colour settings Before we even start creating anything, we need to ensure our original files are in our desired colour space, and that we edit as much as we can in the RAW converter, so we don’t loose colour data.
Sadly this photo is not in a RAW format, so editing the photo with the RAW converter can not save any colour data, but you can still use it if you want to.
In this case the model image is a stock photo with an embedded colour profile that probably comes from the camera the photo was taken with. But before we start editing I will like always recommend to convert the photo to Adobe RGB 1998 to ensure the same starting point on all images. It’s a common workflow to use Adobe RGB 1998 because this profile ensures a correct white balance if all channels are set equal in the high blacks the middle greys and the bright white. This gives us a nice way to easily adjust the white balance correctly.
Now that our image is converted to Adobe RGB 1998 (using a perceptual conversion to save the best colour gradients, which is highly important in skin tones, rather than using the relative colorimetric conversion that would just preserve the actual colours), we can begin our editing of the model. My experience is that most good stock models are already very well edited, and there might not be much work to do other than sparking the contrast a bit. However, I am going to show you how to do it anyway, and also how to check if it's necessary.
white balance and skin tones As mentioned above we have to ensure that the white balance is correct. But what dos that mean? Basically that the white is actually white... and that grey is grey, and black is black. 95% of the times I just look at the image to see if there is a problem. I simply just ask myself, dos this look right? But there is also a way to check it in numbers if in doubt, and you also need to know how to do that in order to fix the images that you might actually think are wrong. So let’s get into this. The white balance can be checked and fixed in a couple of ways.
light caucasian
caucasian
dark caucasian
asian
light black
dark black
3 15 16 0 CMYK
6 27 32 0 CMYK
17 50 58 0 CMYK
8 30 48 0 CMYK
21 53 69 0 CMYK
46 67 77 0 CMYK
image editing · 19
The easy way is to open the image in the RAW converter and use the white balance tool. All you have to do is simply click on a white spot with the tool and it will adjust the white balance accordingly. This works on 99% of the images that I have worked with. But there is also a manual way, and that is also a similar technique you need to use in order to fix skin tones. To manually fix a wrong white balance you simply put an info point with the eyedropper in the black, the grey and the white. Now you are able to see what channels that holds
it will be fun, they said Next step is to remove the background. Well, no problem! But wait.. white hair on a white background? Yes my friend no worries, Photoshop has introduced our saviour in CS5. It's called Refine edge! Now we simply walk around the edges with Pen Tool just like normal, and then convert our path to a selection and click on the magic button refine edge. Oh wait, first invert your selection, in my experience this gives a lot better result using this magic wizard stuff. Now all we have to do is find a good size brush, not to small not too large, and then just move along the fluffy hair edges. Afterwards you have a ton of different options to adjust on, but in most cases you don't have to touch any of these, just select layer mask and hit okay. Tada' if you are lucky the result it pretty good, and if not try again or simply clean the errors with a normal brush in the layer-mask.颅
20 路 image editing
too much colour. Remember, all channels have to hold equally much colour. So now all you have to do is use e.g. levels to adjust the image until all 3 info points are even in all RGB channels. The same way you place an info point on the skin to see what values it holds. The standard skin tones are measured in CMYK, so we switch to CMYK in the info panel. Now you are able to see if your tone is close to some of the corresponding skin tones you want. The most important here is not the exact numbers, but the distribution between them.
ready to dress up! Our model is ready to get the jewellery on. And now it's time to find our own camera, in my case Canon EOS 6D and start shooting the images in the right angel. It is crucial to have the same angel on the photos in order to have a good result. I've done this by placing the jewellery in the combination I want on a paper role. One image for each finger in the right angel. There is a lot more to this, but I am not going to cover it in great detail, but I can tell you it's not easy getting those diamonds look shiny! This time we have RAW images, which is great! All the lighting is the same, so I simply start recording an action when I open the first image, i adjust it using the RAW converter to my preferred colour and brightness and save it as a PSD file. Afterwards I batch all of the files so that they are ready for our beautiful model to wear them.
final light, shadow and spark Now it's time to remove the background on the jewellery just by using Pen Tool. Then placing the jewellery on the right fingers and resize them in the correct aspect. After the jewellery is placed accordingly by masking and tweaking, it's time to adjust the colours and lights once again to ensure it looks 100% realistic.
layer. This time darkening and masking to get a more natural shadow on the rings them self. Now I add shadows beneath the rings by using a simple drop shadow. Sometimes I have to release the drop shadow using "create layers function" from the layer panel, in order to mask on the specific shadow.
This is the crucial part that makes everything look real. I do this by using adjustment layers with levels, and in that way adjust each individual set of rings. After all the colouring and brightness is adjusted accordingly to the model, I start to add shadows with another levels adjustments
As a final touch I add custom starts made in Adobe Illustrator to give the diamonds a little extra spark.
image editing 路 21
workflow A workflow consists of an orchestrated and repeatable pattern of business activity enabled by the systematic organization of resources into processes that transform materials, provide services, or process information.
32 路 workflow 2
the project
Jan Jørgensen webshop Jan Jørgensen is a high end jewellery brand founded in Denmark. Every single jewellery in the collection is designed and produced by hand in Denmark. The goal with the project was to finally make an online flagship store to be proud of. www.janjorgensensmykker.dk
workflow · 23
this is serious business, I am not kidding This is one of the biggest, if not the biggest project that I have ever worked with. This project has demanded me to really think the workflows very carefully in order to succeed. It has gone all the way from idea to design, to re evaluating and coding both front and backend. It has involved not only the webshop but the entire branding and internal workflow of the company. This was a truly complex matter and has
been in the making for almost 2 years. The main goal was essentially to redesign the main webshop of the Jan J酶rgensen Jewellery brand. This has been attempted several times by different web agencies but without luck. The exclusive design and style in the company has never been truly transferred to the webshop. So the big goal was to finally make a true online flagship store that could carry the brand with manner.
concept dev.
UI design
UX dev.
frontend coding
backend coding
what is the core value?
how dos it look?
how dos it feel?
make the feeling and design become real
make the shop work
This is a very simplified version of the workflow that this project is build upon. Starting by defining what the flagship store is all about, to designing, coding, and ending by releasing the new version. I am so lucky to be the son of the founder so I already had a pretty solid understanding of the vision now that I am basically raised in it. That is also why I might succeed now that everyone else has failed.
24 路 workflow
UI & UX cleanup
finnishing up and tweaking
After we had the vision and idea ready, we went on designing for months trying to find the perfect design that would fit. After endless hours we finally decided a version build on a 45 degree grid system that we had also developed. Afterwards we started implementing the design in code and ensured that the user experience was just as good as the design itself. So the UX dev. and frontend part is very much connected. But let's have a look in more detail.
enough about visions, let's get technical In this project there are several workflows, and a lot of them are connected and tangled in each other. On the page before I talked a little bit about the overall workflow for this project, but beneath it all there is also a lot of technical workflows that we need to understand and follow as both graphic designers and coders. First we need to consider where this is going to be used in order to take the right choices on making the design. This is obviously for the web and as we know bitmaps still rule the web, although we see more and more vector like SVG and CSS3 based graphics. But our design was very complex and heavily graphic based so there is no way of escaping the bitmaps. With that in mind I started off in Photoshop on a 960 template as usual. But not a normal 960 template, I doubled the size to 1920px to make all my graphical elements ready to high resolution displays like the retina displays found in most iOS devices and MacBooks. Remember this is a high end jewellery brand that is supposed to be considered state of the art. This of cause requires everything to be sharp and clear, also the bitmap graphics.
Now let's talk a bit about responsive design. When we designed every颅 thing Google had not yet announced their new algorithm that favours mobile friendly designs, and considering the huge amount of extra work needed in order to make the site responsive we decided to ditch it. After all we believed that very few people would buy expensive jewellery for thousands on their mobile phone, so we decided to focus on the desktop and tablets. The target group is simply not there yet. However this might not be the very best decision looking backwards, especially after Google decided to change the picture. But back to the bitmaps! I've used one big PSD in order to see everything together, that said if I started today I would have used the new artboard function recently introduced in Photoshop CC 2015. Now, the design process in Photoshop is an entire workflow in itself, all the way from organizing and naming the layers, to using non destructive editing and smart objects, to finally slicing and saving the graphic elements and make them ready to use in our HTML. But that is simply too much for this book. Now, let's get coding! workflow 路 25
code is beautiful Let's take a deep breath! I always feel very excited in the very moment I am about to start coding something entirely new. It might sound a bit crazy, but knowing that this empty text file has endless possibilities is just an amazing feeling and I love it. But let's get to it. This was actually not a task that I was supposed to do originally, but it turned out that the guy working in the agency that was supposed to implement this brand new design quit just before we had everything ready. He was also their lead engineer in the technology that powered the system behind the webshop, so the agency had to stop all new development for all customers until a new engineer was found. But it's not easy to find software engineers, so with an unknown deadline we discussed the possibility about me doing all the frontend-coding, and then when a new engineer was hopefully on board he could connect my code with the backend. In that way we where able continue the project with less delay, so we did. The best way to do this was to start from scratch and I simply started building everything with HTML/CSS/JS and PHP, knowing that everything had to be code refracted in XLS to be compatible with their CMS later on.
26 · workflow
During this coding process I used GIT to manage version control, and pushed everything to GitHub to keep my code accessible and easy to cooperate with later on. I talked to GIT using the UNIX bash shell. Regarding the frontend technology, I’ve used HTML5 along with all its tags to ensure better search engine optimization (SEO). CSS3 is used as much as it's compilable with most common browsers. I always prefer CSS before JS which is also good practice, but some JS was necessary in the top menu, and in a script that I wrote to show if the live chat is online or offline. PHP was only used to simple includes. Everything is of cause well tested across a variety of devices and webbrowsers to ensure a good quality everywhere.
var result = "approved"; After the frontend code was ready I actually tried to implement it with the backend myself, but there was simply too many black boxes, limited access and no documentation at all, so I had to pass it to the new engineer who implemented the rest of the code with the XLS templates which is today running with the CMS. The implementation process was quite hard because of the system complexity. To give one example some of the prices in the webshop is dynamically changing every minute, checking for the current stock price on gold. This gold price that is also combined with the regular price is at the same time without VAT because of it's raw value making itself a currency. Now think of this in a jewellery that comes in a variety of different variants with different surfaces, diamonds, materials and qualities. All of the variants have images of that specific variant including a 360 degree image, and a dynamically changing description. So a bunch of things could go wrong in this process, and it did! But in the end everything was fixed, and the vision of the flagship store was finally achieved thanks to great patience and endless hours of hard work.
workflow 路 27
Bjørn Lau Jørgensen © 2016
s t a y h u n g r y. s t a y f o o l i s h .