This post is about a task I did for university. This was part of a visual design module and the objective for this task was to experiment with the Adobe Xd software, by using a selection of images to create a layout design. We had a 4×4 modular grid to help structure our designs.
I wanted to tell a story through my design, and so I chose a theme. The theme is about the different stages in our lives. There were numerous images to choose from but I decided to go with images that contained people. By doing this, I could vividly display the different stages of life.
Above: Modular Grid (4×4)
Once I selected the images, the next decision was to figure out how I was going to express the theme. Should it be in chronological order? Should it be sporadic? I decided to go with chronological order, which meant starting from the beginning of life to the end of a person’s life.
Above: Images that I selected.
The first thing I did was to create a 200px by 200px square and place it in the first grid area in the top right hand corner. Then I placed an image of the baby on top of it by copying it and then using the “paste appearance” option. This is a great feature which permits the user to paste an image to fit in a shape. I effectively repeated the same step for the other sections of the grid layout.
So, I effectively created a series of images from life to death. From youth to old age. I also wanted to add images that expressed certain emotions and feelings such as joy and great pleasure which can be seen in the image of a man and his guitar. Fear which can be seen in the image in the bottom left hand corner. I like the second to last image in particular. They are reaching towards the end of their lives, but instead of worrying or having fear, you can see a sense of joy and happiness as they look back to what they managed to do in their lives. Together, they have reached the end.
Above: Two layout designs. For the second layout design, I added coloured squares and placed them on top of the images. The colours go from warm temperatures to cold. This is another way of communicating changes or growth.
This post is about a challenge I did from a course on LinkedIn Learning. I am learning Photoshop, which is a powerful software that allows the user to manipulate images. In this challenge, I had to combine textures with a photo using blend modes and layer masks.
Above: LinkedIn Learning
Above: Screenshots of Original Images in separate layers.
Above: Screenshots of edited images. The first thing I did was change the Book_texture layer into a different blend mode. I changed the mode from Normal to Screen. This created a slightly transparent look, where the woman in the image was visible. Next, I made the Book_texture layer into a layer mask by clicking on the rectangle icon with the circle in the middle at the bottom of the layer panel. Then, I used the brush tool to remove parts of the texture. I wanted to reveal more of the woman’s face, hair and overall appearance. I used black paint to remove elements of the image and this created a focal point.
After this, I worked on the Paper_texture layer by changing the mode from Normal to the Linear Burn mode. I liked this as it created a sort of vintage look. I made the layer into a layer mask and removed parts of the image with the paint tool. This time, I lowered the opacity of the brush tool so that the colour was grey and not black. I wanted to do this so that when I used the brush tool to remove parts of the image, it would be subtle. I created a brighter effect around the woman by doing this.
Above: Final Outcome
Conclusion
It was great to learn about blend modes and layer masks. It was also great to put it into practice. I look forward to learning more things in Photoshop.
This post is about a challenge I did from a course on LinkedIn Learning. I am learning Photoshop, which is a powerful software that allows the user to manipulate images. In this challenge, I had to manipulate an image using a variety of selection tools.
Above: LinkedIn Learning.
Above: Original Image
Image 1
Image 2
Above: Screenshots of edits in Photoshop and the final outcomes for Image 1 and Image 2. To create the 2 images, I used the Object Selection Tool to select elements. The Object Selection Tool can be used to automatically select something. You can click on a subject or drag a shape around the subject to select it. Firstly, I used this tool to select the hat. Then I created an adjustment layer and selected a solid colour. I chose the #1779bd (blue colour). I wanted a different feel to the original image, and chose a colder and calmer colour than the original colour for the hat. To make the hat visible, I changed the layer mode to Multiply. I repeated these steps for the lips.
I used the unity design principle to match the hat and lips by using the same colour. To make the elements further standout, I changed the background colour to a warmer colour. I did this by choosing Select in the top menu, and then Subject. This automatically selected the portrait image and then I inversed the selection by choosing Select – Inverse. I used another adjustment layer to change the Hue to a warmer colour. For Image 2, I used the Hue adjustment layer to change the skin tone to purple. The colour purple can be associated with something mysterious so I thought it was a good colour to communicate this message.
Image 3
Above: Screenshots of edits in Photoshop and the final outcome for Image 3. I used the Quick Selection Tool to select the hat. The Quick Selection Tool is great for quickly selecting larger areas of an image. This can be done by dragging around the area you want to be selected. It is located in the toolbar right beside the Object Selection Tool via the drop down menu. Once the hat was selected, I created an adjustment layer. Adjustment layers are great because you can modify an image without damaging the original image underneath the adjustment layer. I chose the Solid Color of #ff0bb2 (pink) and changed the layer mode from Normal to Color, so that the hat is visible through the layer.
For the lips, I used the Object Selection Tool and then repeated the same steps as I did for the hat. The background was created via a Gradient adjustment layer and I used a Radial Gradient effect combining the colours #92bfd9 (light blue) and #0a8bd5 (medium blue). The cold blue background has contrast with the vibrant pink elements and the bright portrait. I really like this image because it is aesthetically pleasing and the contrasting elements work well together.
Funnily enough, during the process of this creation I had various thoughts running through my mind. Some of the thoughts were things like musicals, candy, Charlie and the Chocolate Factory, Mary Poppins and even Katy Perry’s California Girls. Perhaps it is because of the vibrant colours associated with them. After the first image, I wanted to design something more eye catching and a “feast for the eyes”. The colours pink and blue were the first colours to come to mind.
Image 4
Above: Screenshots of edits in Photoshop and the final outcome for Image 4. I wanted to do something a little different for the final image. I wanted to add extra elements to the original composition. The first thing I did was cut out the hat element and duplicate it a few times to create a repetition effect. I did this by using the Quick Selection Tool to select the hat and then I duplicated the selection unto a seperate layer using the keyboard shortcut: Ctrl + j on a windows computer. Then, I scaled the hat down to a smaller size and used the free transform tool (Ctrl + t) to rotate it slightly upwards. I wanted to match the colour of the hat with the colour of the lips so I used an adjustment layer and changed the hue to a similar colour to the lips. I also decreased the opacity for the hue from 100% to 90% to make it less intensive. I repeated the same steps for the other hats and rotated each hat slightly more clockwise and slightly increased the scale. This created a rhythm and a motion effect. I also repeated these same steps for the lips. Instead of clockwise, the lips were rotated anti-clockwise. This created contrast in terms of rotation compared to the hat elements, but also unity was formed because of the repetition, alignment and colour.
I used a Radial Gradient effect to create the background. I combined the two colours #ffffff (white) and #a96cdc (purple) to create a sense of mystery, and also to create a spotlight effect for the main subject. I created a #34144f (dark purple) Solid Color adjustment layer for the hat, and changed the layer mode from Normal to Hue. This allows the viewer to see through the layer. This also creates unity with the background but contrast because of the foreground (hat) texture.
To finish, I completed the design with a slightly daring question: “Do you like what you see?” This can refer to the design or the portrait. I thought the question perfectly matched the tone of the design. I chose the colour red to form unity, and I chose the font Century Gothic (Bold) because it reminds me of elegance and fashion which I feel matches the portrait.
During the process for Image 4, songs such as Santa Baby, Big Spender and films such as Who Framed Roger Rabbit came to mind. I guess it is because of the nature of the songs being slightly daring and the character Jessica Rabbits also fitting this description.
Conclusion
I enjoyed learning about the selection tools in Photoshop. I had the opportunity to experiment with the different tools and create interesting designs. The selection tools in Photoshop are really powerful and I was surprised how easy they were to learn. There are numerous ways to select elements in Photoshop so it was great to learn how to use them. This will certainly help me with my future projects in Photoshop.
This post is about Photoshop. I’m taking a course on LinkedIn Learning about how to use Photoshop.
Above: LinkedIn Learning is a resource for online courses. This is the tutorial I watched.
Above: This is the original image
Above: First edited image. I followed the tutorial and changed the position of the title “Jazz” and the circle shape from the right side of the design to the left. Next, I flipped the dancers by using the Flip Horizontal technique in the Edit menu. Lastly, I changed the colour of the lady’s dress to match the colour of the circle. I used the selection tool and then the brush tool to do this.
Above: Second edited image. I decided to play around a little bit. I kept the position of the dancers from the original image. For the foreground, I decided to change the colour for the title and the lady’s dress to purple. This creates unity. Purple was the first colour that came to mind when I thought of jazz. I also did some research and discovered that purple is associated with the word “creativity”, which is a good word for the music genre jazz. I used black and white to create contrast and dynamism. The grey colour for the circle is a mixture between white and black.
Above: Third edited image. I wanted to make a vibrant image. I used the repetition principle to create multiple circles and “jazz” titles above them. The repetition also created unity and the upward trajectory of the circles creates movement. They are also different sizes. In contrast, the bottom half of the design is full of energy via the colours, patterns and dancers. I used a special brush to create curvy lines. The line element can be used to create paths. It can be like taking a point or dot for a walk. So I had fun creating interesting patterns with the brush. I changed the scale and opacity for different effects. I used the orange colour to create energy. Similar to the circles in the top half of the design, I wanted to create movement via the curvy lines. Although the two halves are different, unity is created with the orange colour. The jacket and dress of the dancers are coloured blue to create contrast with the warm background colours. This allows the dancers to stand out.
To see other designs, feel free to check out my portfolio.
This post is about a UI (User Interface) design I created for a TV app.
The project was generated using the design brief generator. The brief description is as follows:
I am Karen, I am looking for a UI designer. I need a design of a TV app.
Although the description is very short, it gave me the opportunity to practice my design skills.
The first thing I did was browse through my phone and look for TV and streaming apps I had installed. I found four apps: Netflix, Amazon Prime, BBC iPlayer and ITVX. The next step was to analyse the UI designs and decide which screen I wanted to design. I decided to choose the home/main screen that a user sees when the app is opened, then I sketched the four apps I found on my phone and took some notes.
Sketches of current TV UI apps
When I was analysing the different TV apps, I started to notice some similarities and differences. For instance, all four apps had a dark background and light foreground which helped create contrast and make elements standout. Three out of the four apps had a bottom menu to allow the user to navigate to other parts of the app. The logo and profile/account icons were placed at the top. Some of the differences were the size of the images, content information and visual elements such as buttons with only two of the apps having an image slider. What I found really interesting is that all of the apps used a main image that connected with the user. The main image has a character looking at the user; this is inviting and creates an instant emotional connection with the viewer.
Analysis of UI designs
“Good artists copy. Great artists steal.“, I remember reading this quote from somewhere, and what I got from it is that nothing is really original. We find inspiration from what we see around us and what has already been done. So redesigning is a great way to practice design skills. I took screenshots of the UI designs and imported them into Adobe Xd, and copied the designs. This was a great thing to do because it made me think about the elements that are placed on the UI. I started to see certain patterns and icons being used. It made me think of principles such as alignment and repetition.
By the way, if you know where the quote is from, feel free to leave a comment on this post!
The original UI’s are on the left, and the redesigns are on the right. I found images that were already downloaded on my computer and used for other design practices. I created titles to match the images and make it look like movie posters. It was fun experimenting with the typography, layout and images.
After these exercises, it was time for me to come up with ideas for my own TV UI app design. I started off by making a list of things I wanted to include such as: a main image, bottom menu and simple, easy to understand icons. Following the list, I created a few thumbnail sketches.
Then it was time to get practical, I opened up Adobe Xd and used the sketches to guide me. I did not choose a colour whlist sketching but I decided to choose the colour purple. Purple can represent royalty or luxury and I wanted the viewer to feel like they were in a creative soothing and perhaps calm environment. I chose dark purple to cover the majority of the background and a lighter shade of purple to cause a division for different sections.
Image of my UI design
At the top left-hand corner I placed the logo. This is considered a standard for TV UI app designs. To make the logo standout, I made sure to choose colours different from the majority of the design. I chose warm and energetic colours like yellow and orange with the sans-serif font Montserrat. In fact, all of the fonts in the design are sans-serif. The body text is Arial and the title texts are Impact for the main image and Montserrat for the smaller images. I chose to have 3 icons in the top right-hand corner because I could not get the balance right to have 5 icons for the bottom menu. It was too crowded for the size I wanted the icons to be for the bottom menu, therefore it was best to position 4 at the bottom and 3 at the top. I chose the search function to be placed at the top as that is one of the main functions the user looks for, and I also used YouTube as an inspiration for the icon’s position. The connect and profile icons are also there. I chose bright colours to create contrast between the icons and the background.
For the main image, I wanted a striking image that immediately caught the attention of the viewer. I also wanted an image that had a character or human being looking directly at the user to create an instant connection. I chose the image taken by the photographer David Kuko. I chose the Impact font to do what it says on the tin, and chose the title “Speak Clearly” to enchance the image and overall design. The description allows the user to know more about the content.
The button is directly below the image and uses the rectangle shape with rounded corners. I took inspiration from the ITVX app for the button. It really made me want to press it. I also used contrast to create greater visibility and made it 50% the width of the screen. The words “WATCH NOW” are simple, effective and urgent. The placement of the button is also important as I realised it made sense to make it closer to the bottom than the top in order to make it more comfortable for the user to press the button. Having to reach for a big button nearer the top of the screen could cause a little frustration.
The bottom section comprises some smaller images that represent more content. Again, I tried to choose images that look like film posters but are also captivating. The titles are both light and dark and relate to the other colours in each image. To emphasise the section I made the word “New” standout with yellow, and highlighted the “Home” icon in the same colour. The rest of the bottom menu options are in white. This helps the user understand where they are in the app. The images formed at the bottom were from Andrea Piacquadio, Yuri Manei and Spencer Davis. All of the images were taken from the website pexels. I downloaded a plugin in Adobe Xd to implement the icons.
Conclusion
This was a great experience. I was a little nervous at the start because I did not know how I was going to create the UI. But it really helped to analyse real life apps and then gain inspiration from them. More to follow.
This post is about a graphic design I created for an architecture company.
I used a design brief generator to find a project to work on. The brief description is as follows:
I am Tillie, the creator of Sion. I’m looking for someone that can design something for my architectural firm. I would like a simple flyer for an event. We primarily use the colour blue #42cfff.
Although the description is very short and, is not a real life creative brief, it gave me the opportunity to continue working on the principles of design.
The first step was to note down my thoughts. Any thought that came to mind was noted down immediately. and this helped me generate ideas which you can see below.
The next step was to do some research and look at architecture flyers. I searched online for different types of architecture flyers and this gave me inspiration and ideas of how to design a layout for a flyer and also what details to implement. After this, I sketched out a few ideas in the form of thumbnails which you can see in the images above. I tried to incorporate the principles of design for each idea.
You can see the final design above. One of the words I noted down during the first step was cold colours and the other was buildings. So I made sure to incorporate the blue colour the client requested in some of the elements such as the text and logo design. I also chose a picture from pexels which had buildings. I thought that the image was really interesting and I liked the perspective it gave to the viewer. The logo design was created in Illustrator and is a combination of different size rectangles replicating the shape of a building. The black slanted thick lines were used for an added dimension and I chose a font style which was light and thin.
I placed the logo at the top in the centre because that is where the poster image provides a focal point. The contrast design principle was used to seperate the logo, text and icons through the use of colour i.e. light and dark colours. The placement of the text at the bottom also allows the logo and buildings to stand out further and instantly grabs the viewer’s attention. The principle of unity was used to create a strong relationship between the logo and the company information in the slanted box in the bottom right of the design. This was used by having the same colour. The text is wrapped around the rectangle to divide the information; one was the address and information about the schedule, the other was the purpose of the event. They are all linked by using the same font which I wanted to represent corporate modern architecture, straight clean lines in sans-serif form. The rectangle is slanted to make it interesting and also to replicate a building shape. The slightly transparent effect adds more dimension.
The largest word in the design is “Event” and this is to emphasis to the viewer what the flyer is about (perhaps I could have also emphasised the words “Architecture Industry” for specificity). I placed additional information about the company including the website underneath the event title and the social icons underneath the company information. Both sets of additional information are the smallest in terms of scale indicating to the viewer the lower level of importance compared to the other elements.
Conclusion
I created graphic designs responding to the creative brief for an architecture firm. It took a while to get going but I really enjoyed the journey. I also like creating these posts about my designs because it allows me to go through my thought processes and analyse the works.
To see other designs, feel free to check out my portfolio.
This post is about a graphic design I created for a pizza company.
I used a design brief generator to find a project to work on. The brief description is as follows:
We are a new business in the Houston, Texas area called “The Finest Houston Pizzas”. We need a simple flyer for an event.
Although the description is very short and, is not a real life creative brief, it gave me the opportunity to continue working on the principles of design.
The first step was to do some research and look at pizza flyers. I searched online for different types of pizza flyers and I also managed to look at several printed pizza flyers that I had received by post. This gave me inspiration and ideas of how to design a layout for a flyer and also what details to implement.
The next step was to sketch. I sketched out several design ideas as thumbnails and I took notes. The main aim was to keep the design simple and input the necessary elements.
Once the design was chosen, I had to figure out how I was going to make it come to life. I decided to use Photoshop as the software because of its’ variety compared to Illustrator. It is a great tool for designing posters and combining photos and graphic elements. You can see the designs below.
The Design
Because of the limited amount of information from the creative brief, I inputted some pseudo information. I came up with an address in Houston and created the flyer for a Launch party for the company’s business. Inspired from my research, I collected free stock images from sites like pexels that were related to pizza. There is a saying that “a picture is worth a 1000 words” which means it is often easier to show something with a picture than to describe it in words. This is especially important in graphic design as there is often not much time to communicate a message to an audience. This is why I decided to choose real photos as the main image rather than illustrations. The image of the pizza in the foreground and the table as the background sends an enticing message and also communicates an invitation to eat. The text enhances the meaning with event information.
For the first design on the left, I put the image at the bottom and I used the Gestalt closure principle which means I gave the viewer enough information to communicate that it is a pizza on a table, and it is as if they are sitting down on a chair with the pizza. It was important for the pizza image to stand out, so I got a background image which was blurred. The blurred image indicates an active busy environment (like a hall) where the event would be taking place.
I used contrast and solid colours for the company logo in the top left. In fact, I did not really create a logo but for the sake of the design, I simply put down the title of the company and surrounded it in the square element. I used a playful fun font to match the theme of an outdoor or fun daytime event. I also made sure that the colours matched the colours of a typical pizza (yellow and red for cheese and tomato). The unity principle was used to combine the image and the logo by using the same colours and the emphasis and contrast principles were used by placing the elements at the top and bottom, and making them stand out with solid bright colours.
The rest of the text were in neutral colours black and white because the level of importance was less than the logo and image. For the white text on the right, I used the circle elements as a background and coloured it black to make it legible. The circle was also used as the shape is similar to the pizza and this creates unity. The circle with the date information is more important than the one below it hence it is slightly bigger. Finally, for the text on the left I related the Launch Party information with the text on the right by using the same neutral colour: black. I used the line element to divide the title information and the rest of the event information and this made it stand out. All information text also had the same font style. The social media text is linked to the logo by using the same text colour and is aligned on top of the table, keeping the pizza image fully visible. The second design is exactly the same except I tried placing the pizza in the bottom right corner to make it dynamic. This creates a slightly different viewing experience. There’s a sense of motion and continuity on the right-hand side of the design, with the circle elements.
Conclusion
I created graphic designs responding to the creative brief for a pizza company. It was a great exercise and I got to put my design theory knowledge into practice, and experiment with design tools. It has been a great experience and I look forward to creating more posts about my designs.
To see other designs, feel free to check out my portfolio.
Michael's Monde 