Finalise & Reflect

Reflect

Through this term, I was able to access various parts of digital design. Through several projects, I have made a plan, realized the plan myself and produced the final board. Although, sometimes it was hard because it was different from the original plan.

Through the first project, I learned the importance of brand identity and target. What is more important than the external beauty of the product is to consider the tendency of the target. In the process of making this final board, I researched various package designs, and the process helped me finish this work.

Through the second project, I realized the importance of the plan. In this work, I felt directly that systematic planning helped to make the work easier. I think the reason why this project was not successful, even though it was completed, was because it was not well kept of project plan. As a result, the idea of the first project was good, but it didn't work out well in the end.

Finally, Web site production was the most difficult but meaningful project of this term. The website production was made through a site called WIX, which I was the first time to use it. I did not have much experience making websites.  Indeed, I was clumsy at first. However, there were many factors on the WIX site that helped make it easier to build a website. Nevertheless, in order to be shown on the website in the configuration that I want, I have repeatedly modified and checked.

Website - Mobile View and adjustments

Mobile View

These days, more and more people  use many websites easily . For example, they access websites through their phones or tablets. Therefore, it is also important to consider users accessing the website on a mobile basis.

I checked the mobile version when the website was made to some extent. The WIX website automatically produces a mobile version similar to the PC version. This point is very useful and brings some problems at the same time.

.

First, I changed the location of the mobile version of the text box. In the PC version, the text is properly placed on the background image, but not in the mobile version.

Second, I changed the size of some images of mobile versions. Since the mobile has a smaller screen than the PC , sometimes the screen composition was not convenient due to the size of the big picture.

As I learned from the previous study, UI and UX research, I tried to produce two versions.

Website - Feed back (google form)

Feedback

Link (google form) : https://forms.gle/6XVAhTPjqajmPUMn9

Through the previous UI UX Research, I learned that the response to a user's website was important. I added a feedback menu to listen to the opinions of the users who accessed the homepage.I have created a feedback form on Google Forms. 

Questions

1. How did you like the look of the hom page?
- Poor
- Okay
- Good
- Excellent
2. Can you easily go to another page??
- Poor
- Okay
- Good
- Excellent
3. How is this website like as a portfolio?
- Poor
- Okay
- Good
- Excellent
4. What do you think of the Contact page?
- Poor
- Okay
- Good
- Excellent
5. What do you think of the About page?
- Poor
- Okay
- Good
- Excellent
6. Do the buttons on the website respond correctly?
- Poor
- Okay
- Good
- Excellent
7. Please let me know if there is anything else you want on the website. 
- (Short answer text...)

Feedback

Google Form was one of the forms that made it easy to ask users' opinions and responses. I was also able to check my website in the process of producing these questions. I tried to develop the website further with feedback from users.

Website - UI UX Research

UI & UX

Source : Media Reflections: Past, Present, Future 

UI - User Interface Design

 ‘transference of a product’s development, research, content and layout into an attractive, guiding and responsive experience for users.’ (Careerfoundry: 2018).  

- Visual Design

- Colours

- Graphic Designer

- Layouts

- Typography

According to LEEN. K (2019), user interface design is a broad design term. It may be about shapes and displays that allow users to interact on websites. For example, the above can be explained by the UI functions.

UX - User Experience Design

‘User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.’ (Careerfoundry: 2018) 

- Interaction Design

- Wireframes and prototypes

- Information architect

- User research

- Scenarios

I studied in my class and researched about UI and UX for making my own website. I learned from this study that it is more important to make a website considering UI and UX than beauty. Before this research, I thought high-quality websites were well decorated. However, I learned from this research that UI and UX are needed in harmony to improve a website completeness.

Why Usability Test?

- uncover problems in the design
- Discover opportunities to improve the design
- Learn about users behavior and preferences

Before the usability test, my website had some problems. First, there were many buttons on the home page that users did not use. Indeed, it seems that the page movement was not natural. Second, I need to design a mobile version of the website with more consideration. It is true that many people nowadays search websites through their mobile phones. Through this research, I realized that when I work, I have to consider the mobile version. Although not yet perfect, I was able to work more delicately through usability test and above the research.


----------------------------------

References

Careerfoundry (2018) The Difference Between UI and UX Design - A Layman’s Guide [Online] Available from: https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/ (Accessed 24.05.20)

LEEN. K (2019) The Psychology of UI and UX [Online] Available from: https://medium.com/media-reflections-past-present-future/the-psychology-of-ui-and-ux-ca34c674fb88(Accessed 24.05.20)

Website - Process 2

Website concept 

This space will be a portfolio website that introduces my works. My field of study is digital design, and I want to show on the website that I can digitize any drawing, just like my previous project. Indeed, I would like to show you the digitized version of the hand-picture illustration through the website.The work of my previous project was to digitize children's graffiti and then produce stationery sets.

I tried to organize the website layout to suit my concept.

First, I reorganized the big framework of the website. I chose the website template below because I thought it would show my work well. However, while I am able to show my work well, I thought my role as a website was insufficient. This is because the website only shows works on the main screen.

For this reason, I increased the composition of the website's main screen to compensate for these shortcomings.

First, when user visited the website, I wanted to let users know the concept of my work at a glance as soon as they visited the website. Therefore, I changed the first image to be seen from several works to one large image. This space tries to show my latest work, or express my website by putting in the most core image. 


Secondly, I worked on the name of the website at the top of my website. Most websites have their own logo or website title at the top of the website.
Since this website is my personal portfolio, I didn't name it separately and chose the title as my name. On the other hand, I wanted to express in my handwriting font the basic elements of my name and website in accordance with my concept of 'Digitized drawing' 

Before this, user had to click on the About page to see the my information. I felt a little uncomfortable about this. So I made a button called 'learn more' with a brief description of myself on the main screen of the website so that I could go to the about page.

I was surprised that the more I made a website using a website called wix, the more various functions there were. As there are many functions, it is hard to find any function, but it is very useful to make a website easily.

Website - Research on Social media

INSTAGRAM

Instagram is one of the social media that people commonly use these days.There are some reasons fro that. Firstly, this is very easy to contact anyone. You can even access it without an Instagram account.Secondly, it is easy to communicate with each other's targets. This is because there is a direct message and comment.Indeed, Instagram is also useful for promoting and sharing my brands if it takes advantage of the tag function. Using the tag function, it's easy to find what I want, so people use it a lot when searching for information on Instagram.

These SNS are easier to access and obtain information than contact such as mail, the reason why SNS links are provided on most websites. I also connected my Instagram account to my website for this reason. 

Instagram ID: yuna_ddesign

Through this account, I want to communicate easily with my website users and make it more accessible than the website. Instagram is a strong point that it can easily share the process or behind-the-scenes stories of works through its account, so I'm trying to take advantage of this.

Website - Creating an about me page

Professional Photograph

First, I found the Professional Photograph to create the About me page.Generally, it should be taken in a campus studio, but now it's not a situation that can be done. I tried to take a picture in the natural light using my phone. However, I chose this picture. The reason why the picture is better for my about me page.

This picture is a photo that was edited after removing some letter from the back for use as my professional photograph.

About me page

Before I wrote bio on about me page, I modified the basic typeface and created a space to explain my work 'Digital of Children's scribble' on this website.

Website - Process 1

On the beginning

Before making the contact page, I studied various functions on the menu. As you can see in the picture below, there are  some icons that various functions on the left.The menu has various functions such as galleries, font sizes, and other things that can decorate websites.

As you can see in the picture below, Using the first icon, I changed the site menu to HOME, WORK, ABOUT and CONTACT.

And then, I changed the title at the top of the selected template and the copy light at the bottom.

Contact page

There were various templates for creating each page on the menu icons.It was useful because it was possible to change the location, font, color, and size.  I chose a simple form among them. If there is a color that matches my work in the final process, I will change it.

Website - Creating Website_WIX

1. Set up a Wix account

To make my website, Firstly, I created the account same as Google Account on WIX.
When I created account, I could see various templates through WIX. There are various kinds of templates such as business, portfolio, blog, designer, restaurant or food and online store.


2. Choose a Template

I chose the following website template for my project.

I chose this template because I liked the layout and navigation. As you can see from the screenshots following below, you can set various sizes of images. And when you put the mouse on the picture, the name of the picture pops up as you can see in the second screen shot..

3. Add Copyright

4. Creating a Homepage

Website - Research 1

Deutsche Reihenhaus

This website is the website of a German construction company. It is a website in a different field than my subject aera and the project. However, this website has the same target as a stationer set for children that I worked on before my project.That is why I researched this website.

My project is a stationery set for children. Therefore, I tried to research websites related to this because the targets are children and parents.

The website, The Deutsche Reihenhaus is always followed by menu icons even if you scroll down. It is very convenient because it can be moved to another page through the menu at any time. If you click on the menu, it looks like a first screen shot. Below you can see screenshots from the site The second image is the first page you see on the website.The third screenshot is a welcome post. On the Welcome page, they talk about them. This can tell their tendencies, but I think it looks like a pretty heavy amount of information because of its large font.
Indeed, the website shows a good sense of unity on each page through point colors and simple icons. These are factors make the website feel warmer.

Project - feedback

Project Title :

- Digital of children's scribble

Children enjoy painting their own paintings, scribbles on the walls of their homes, toys, and objects. Through this project, I am going to digitize it so that it can be a brand and a product. Therefore, It can show that any drawing can be digital design. This product will probably be targeted by children or their parents. In addition, various people who want to digitize their paintings and drawings can be targeted for this project. They can see their paintings become products themselves.

Feedback

- Why should the targets of this product buy the product?
- The color of the product is so diverse that the concept is hard to see.
- Consider the layout of the final board

to be changed from final board

- Why should the targets of this product buy the product?
I will tone down some of the graphics on notebook, sketchbook, etc. Through this, it provides children with an experience to draw along the line directly on the their stationary.And they have their own stationery.

- The color of the product is so diverse that the concept is hard to see.
As mentioned above, I try to tone down and reduce colour diversity. I think it can also give children who want to use the their stationary by reducing  and giving them a chance to choose and express more colours.

I will reduce the type of color in one product. And I want to show that I can produce a series of each color.

Project - Final Board

Project Title :

Digital of children's scribble

Children enjoy painting their own paintings, scribbles on the walls of their homes, toys, and objects. Through this project, I am going to digitize it so that it can be a brand and a product. Therefore, It can show that any drawing can be digital design. This product will probably be targeted by children or their parents. In addition, various people who want to digitize their paintings and drawings can be targeted for this project. They can see their paintings become products themselves. For example, tey can gift-wrap a gift on a stationery set.

process

This video is a partial recording of the process of digitizing children's scribble.

Software

1. adobe illustrator

2. adobe photoshop

3. Procreate