ChantelOkparaCreativeMediaYear1: Area Of Interest-interactive

Web timeline task 20.11.23

The web was invented by Tim- Berners-lee at CERN in 1989 and opened to the public in 1991.

(1991-1994)

The early web design days

The very first website on the world wide web was created by Tim Berners-Lee who designed the website at the swiss research center, CERN.

Tim Berners_Lee also known as TimBL, is an english computer scientist best known as the inventor of the world wide web, the HTML markup language and HTTP. Creating the web was really an act of desperation, because the situation without it was very difficult when i was working at CERN later. Most of the technology involved in the web, like the hypertext, like the internet, multifont text objects, had all been designed already.

1991-1994

Yahoo
There were close to 3 thousand sites one of which was a fledgling yahoo! which originally called "Jerry and David's guide to the world wide web, started its online life as a web directory.

1998-2003

2004:

2005-2009

2010-2019

Sketches of my web timeline

I made a sketch of the original web timeline.

Planning your website 20.11.23

I have created a plan for the website for arts and crafts where I can add categories to what I will secret on the website. however, I haven't decided what I would add under the title but I will make the decision as soon as possible. I used two different colors for each page layout to make things easy so it won't be confused with the same color but different names.

Home Page

images and the main text of the topic

Art and Craft Community

what is art about and what part of art do they like the most
bring young children together to create different styles of artwork like drawing or painting
getting into small groups

Art Room

the main image of the art room
text
logo

Different Artwork

the name of each artwork
what does each means
how does it inspire you

Flowers of art and display boxes with the design on

flowers e.g. rose and poppy,
images

Personal story

personal information about how you chose art

Magazine

magazine articles
images

Links

more links

Sketch of the website design

This is my sketch of the website design where I thought of what my website would look like. I thought of ideas and sections for each category and rearranged the boxes by pushing the personal story and bringing the artwork section down. I was about to make links to make the pages linked together which will make the website very interesting and adding images alongside.

Website Critique- Task One Good Website

MTV

The aim of the website is for young people ages 16-25 and it's about American music television based in New York City launched on August 1, 1981. It is also aimed at people who like music or watch amazing love shows like "Are You the One", Ex on the Beach, and Teen Mom UK which will make them watch the series again. Also, the shows have swear words so people who are under 16 can't watch the program

There are lots of bright colors on the website page which makes the page very interesting and engaging to the audience.

The use of visual elements on the page is created with a video, text, and images because there are videos underneath the long main image above. I like the design of the website that I have chosen because the page is all put together in different categories and the way main show Teen Mom UK mainly covers the whole first section to get the audience's attention to create new viewers to search their website from other people who explore the site.

There is social media content like YouTube, Instagram, and Facebook and there is no news content but a load of dramas from most of the shows.

The website is well organized and not very busy because there are not many things on the page. I think the website is very suitable to navigate and able to let people find the site and explore more by clicking on the link. However, the website can be blocked for some reasons so you need to change the setting or use the link before it logs you out. There is a small amount of information underneath each show that provides information about the series.

Amazon Prime

My aim for the website is for older people because they use the website more often as it is not really suitable for young adults and teens. amazon launched Amazon Prime in 2007 offering an unlimited one-day delivery membership program. the subject matter is online shopping where people use the site to buy things that they want as it has everything. they do have text on the website because there is text in each category on page one for each which makes the site very organized. The information on the Amazon site is very valid and the link works for anyone new to the site. I like the way the top images show two people enjoying themselves with the TV they got from the site it also shows that they have many packages on the side of the chair.

Spotify

The aim of the website is for any age group but mostly for young people who use this platform to add their own music to their playlist and listen to their music everywhere off the internet if they have premium. The design is very inspiring and engaging because these are the albums of all the artists and even there are podcasts to listen to if you are not interested in music. The page is well organized because each album has a clear name showing what music or sound they are and you can click on anything you want on the page. I think the website is very satisfactory and it has credit on the page because the credit pages show who performed, wrote, and produced the songs.

Task two- Guidance Bad Website

The aim of the Zara website is to bring more thoughtful styles to the world, we aim to provide everyone, no matter where they are, with the inspiringly beautiful trends, and crafted fashion they deserve. the design of Zara is unvaried and unexciting where there are no bright colors or many images on the main page which doesn't make the audience that attracts to the site and makes them don't want to use the site but instead go to the store. The website is definitely not organized because the titles are missing letters and the titles are not clear how do we know where to find the page with clothes if it's not clear for the audience.

The aim of the Yahoo website is as a leader in global daily habits like emails, entertainment, news, and sports, we strive to inspire, delight, and entertain. By infusing our products with beauty and personality driven by our users, every Yahoo experience feels made to order. The text on the page doesn't look established because the paragraphs are put in different sections of the page Some of the words are big whilst others are too small which doesn't look more appealing to anyone who uses the website. There are weather reports similar to the main news channel where the reporter talks about the weather and knows the temperature to make the situation better. I don't think the website is well organized because as you can see the images are convulsed and disarranged which doesn't make the page very suitable. The color is lacking interest because the site is so white and plain that doesn't let others search the website.

The aim of the Wayfair website is the destination for all things home and a place that helps everyone, anywhere, create their feeling of home. The design is very bright and shiny which is too much for the page because people may not like how the design is presented in the layout. The uses of visual elements are photography and text because some photos are not suitable for this background color because the color is too dazzling for the page which can be disturbing for people.

Analyze two community-relevant sites

The aim of the website is to encourage children to be creative and use their imagination while also providing a fun and interactive way for them to naturally develop essential life skills. This is also aimed at any age group from children to adults which is very interesting. The design is very pretty and charming because the poppies are everywhere on the page including digital. This website inspired me to use it for the art and craft community which represents poppy and roses.

Monday 4th December 2023

UX and UI Design
User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users. UX design involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability, and function. It also takes into account the business goals and objectives of the group managing the project. UX best practices promote improving the quality of the user’s interaction with and perceptions of your product and any related services.

The user interface (UI) refers to the layout of an application: how it looks and its overall style. UI is primarily focused on the direct interaction the user has with a computer, website, or product. User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.

What is the best practice for mobile app design?

Clutter: it's a good idea to get rid of anything in a mobile UI that isn't necessary. A great tip is to strive for minimalism, but not at the peril of good quality. every added button, image, piece of content, etc, makes things that much more complicated.

Legible text: Since so much of what users do is based on content consumption to provide an experience across all types of mobile devices, make sure to choose types of faces that work well in multiple sizes and weights. Font size should be 11pt to reduce eyestrain which is clean.

Accessibility: this is probably one of the most overlooked aspects of user experience design, especially mobile UX design. Only 15% of the World's population experiences some form of disability which should be designed expertly for disabled people.

Wednesday 06/12/23

XD Experimentation

I have experimented with Adobe XD and I have found the process very difficult. This was my first time making an app. however. I will be able to get a hang of creating an app very soon.

13/12/23 Update XD experimentation

I have made an update of the XD experimentation and I was able to get a hang of the process by being able to drag the image to the middle. I use tools like text boxes, Artboards, and images of chairs for both backgrounds. I think the experimentation was a success after all because even if I was struggling and managed to do everything in the limited time. I have to add another artboard so that I could able to link the pages by using the prototype because linking the pages won't work if it does not switch to the prototype. Once I switched to prototype, I dragged the arrow from one page to another and clicked "preview".

13/12/23 Planning and Creating an app mindmap

I have created a mindmap of all the ideas for an app that really inspires me. I used this software called Miro to create the mindmap and I was able to add some app that is related to my area of investigation. Overall, I was able to research a lot of different software apps as you can see on the map, and make a decision later.

Screen recording your app using PowerPoint

I have screenshots of my XD app using PowerPoint.

Research an App

In this app of arts and crafts, they do many things like wall and wood, DIYs, Photography, food, creativity, and Fashion Art. The visual appearance is how the page is laid out with bright colors and the text size is not that bad it's very clear and bold which makes it easy for people to search for what they want on the app. I think the app was appropriate for young children aged 5-12 because there are lots of creative items that would be suitable for them to learn new things. I would be inspired to get some ideas from this app by being able to use some of the emojis and change them to my own and then change the colors to something less fascinating to the audience. I think I found some ideas from the research by being able to adapt the background and make it my own.

Plan your pages

This is my sketch of my pages where I was getting inspiration from the internet. Then I got some ideas and was able to sketch some versions of my own pages that could help me for my final one.

XD Planning- Mood board

I have created a mood board using software called Miro where I collected photos to make the board. I was able to collect photos based on arts and crafts which was very interesting to find and make the decision at the end.

15.12.23

Here is my final website link:

https://chantelo2000.wixsite.com/art-and-craft/services-4

08.01.24 Website Evaluation

To create my website, i used Wix to develop seven categories: home, art and craft community, art room, poppy story, poppy shop, magazine and contact. I used images from the image section on the right where i searched different pictures using the link. The website is looking and developing very good and creative for young children because the pages look very pretty and outstanding for parents to look at the website for their children to learn more. I created a plan on words to gather some ideas on what was added in each category to make a better website and easier to navigate. For the colour scheme , i used colour "Red" to represent the flower poppy as a symbol of arts and craft and remembrance day. the part that i have done well in developing the website is making a plan template on a word document and being able to figure out where to place each page and what to add inside of each of them. I reflect on each task during the process and looking back at the plan to know what pages i wanted to place or if i needed to change the names. the part i didn't do well was that i had to change one of the categories names from personal story to poppy story which should be titled on what i added to the page.

The website works well with the ideas because i did a written plan and knew what to select on each pages of my website. I have to arrange the images and place them to the right slides to let people know the website and able to understand the information better. I was able to communicate my ideas well by research some ideas and ask people in the class on what they like and could be improve the style.

The website i did less well with is i didn't really used much original imagery to add to my website. these are the feedback i got from one of my classmate about my website: I would go for picture also maybe navigate bar. Yes it does suits the colours scheme for young children 3. Yes, i would navigate the pages and find what i need and the subtitle will be clear for audience to explore 4. nothing to improve and I really like your website it really interesting 5. very colourful, informative and educational 6. yes I do think the parents of young children would achieve and knowing the website and also it really suitable for them.

If i could repeat the process again, i would add more information and original imagery to engage the audience to visit the website. For next time, i shouldn't added the same images for repeat pages maybe change the pictures for all pages.

10.01.24

My Final Art and Craft App

Firstly, I made a plan drawing of each design of the app by looking for similar colors based on the chosen age group of art and craft. Before, I generated the app using Adobe XD to create a phone art board that looks like an app. However, I was able to continue designing and developing the final process of the app. I think using the similar color theme of the app on Google really inspired me to use the same colors suitable for young children ages 6-10 years. Nevertheless, I did some sketches of the layout of my app to know which would be acceptable for the target audience. I had to search for the chosen color theme something that could be bright like yellow or pink that young children enjoy and think of as art. I added my own images on the second page by clicking the link "Art Collection" which goes straight to the collection of artworks and the last page is the back of the app with the sun and moon.

Final App: Showing Interactivity:15/01/24

Below is a video recording of my app's interactivity and how it works in real life giving the steps to cross from one section to another. I made sure that all the apps were linked probably to work successfully.

App Evaluation

My final piece of the app is to get young children ages 6-10 motiving parents to trust their kids to use the well creative and colourful app that has artwork and suitable texture courage children and parents use the app more because it's very adorable and catchy to the audience which will make children happy and exciting to engage with the software. I used my own images to add each of the pages for the right categories. The reason I decided to do this final product is that I think young children will love the idea of navigating and looking at unique artworks from the gallery. I think the product went well in organising of creating the app and I was able to select colors that are bright and colorful relating to the young children and drawing some suns and moons using shapes that were useful. However, I switched to prototype to link each page to the right categories once I clicked the app page it showed up with a blue arrow to make my app interactive and you would click on the button with no issues. The tools I used were: 7 art boards, shapes, text boxes, original images, and symbols to create the final app and work toward the deadline. I think the ideas communicate well because I was able to use a similar color from the app research as it is very bright and unique around the target audience "young children" and the theme. On the app's homepage, I subcategories of "Favorites", "Search", "Profile", and "Message" at the bottom with symbols. I had ideas at the start of the project by researching and collecting information using the layout and theme of the app. I took some of the ideas to create my own app design but used the same colors because the target audience of the app will enjoy and have lots of skills to learn by drawing and looking at artworks to get inspired to become an artist.

The app I did less well with was that I had to move icons around and for the page, I had to draw out the sun and moon using shapes instead of using the same original image all the time. the issue was that the button didn't work probably because I forgot to switch to the prototype link them together and highlight the app to drag the blue arrow to the categories. Before, I created the app should have added more art boards if I needed to create more pages for the app. However, there were symbols at the bottom of the first page to summarise the way the app is presented by being able to understand the app layout better. For feedback, I upload my app on MS Teams and my friends give me some responses to give opinions on whether to make a change to my design and create the symbols clearer and edged for the people. I think the app went a bit wrong because I didn't make the buttons for the app clearer and make the shape neater to make the audience know what it is.

If I have to repeat the process again, I will experience using Adobe XD and developing more ways to create and design a better app. The things I would do differently is to really develop more skills using XD. Maybe I should have reduced the stress and made a record of how many minutes I spent on one page. The way the app is presented, I seemed to rush through the application by spending time designing the shapes for the next time when I use Adobe XD.

Website Usability Feedback

This is my feedback from two of my peers where they say their own opinions on the website explaining what could i improve and make the website much better.

App Usability Feedback

I have feedback from 3 of my classmates explaining their point of view about my final app and how could i improve my skills using the app by being able to create more content and make the buttons more clear. One of my peers said I could have neater shapes and make a menu bar and the pages more clearly for the audience.

Learning how to use effect experiment

This is my first time using After Effects and I think I did very well creating an example of effects. I added a text and was able to time frame each movement of the shape and saw the final process after by clicking the spacebar to play. I used tools that created an example of the effect I have developed: mask, shape, and text. After I manufacture the effect, I screen-record the screen where the shape is moving around the page save it as save as media, and upload it on Blogger.

These are screenshots of the process of effect that I have created: