Adobe XD Experimentation
I made this mobile website prototype using Adobe XD, this is a furniture website that I've made using shapes and text tools from Adobe XD. I've also inserted a background image of an aesthetic room to match the website and it also provides a great visual for the website. I've included photos of furniture that I've found online and placed them into different categories such as "50% OFF" and "Christmas Specials" and included reasonable prices for each product.
I've made separate pages which consist of the "login page", where users can create an account and access the website freely, and the "product page", where users can see what products are available on this furniture website.
I really like how well this experiment went, I found Adobe XD really easy to use and understandable, and I'm looking forward to continuing to use Adobe XD for further projects.
This is a recording of me using the experimentation app that I've made in Adobe XD, this experimentation was really fun to make and mess about with, Adobe XD is really easy to use and I'm looking forward to using Adobe XD in the future for any projects I may have to do on Adobe XD.
Mind map of my own Mobile App
I chose Informative for my official app as my subject is based on the community of tourists. My mobile app will include information about London and what can be done in London. I also stated other possible ways my app could work in my mindmap as they all relate to helping tourists in London.
Mobile App Sketch
This is the mobile app sketch that I created in hopes of my actual mobile app looking somewhat similar to this. I used Microsoft Paint to sketch my mobile app as it's a much easier way to draw there.
MoodBoard
This is my mood board of what I would like my app to include in regard to helping tourists in London, I've included color schemes, images of landmarks, transport, maps, type fonts, style, and logos of London that all can be used in my app.
Mobile App: YouTube
YouTube is an App created by Steve Chen, Chad Hurley, and Jawed Karim that enables users to share with other people videos via online. The app was developed in San Bruno, California, United States, and was launched on February 14, 2005.
YouTube was bought by Google in October 2006 for $1.65 billion. Google then began generating revenue from adverts, offering paid content such as movies and content produced by YouTube. YouTube also has YouTube Premium, which is a subscription plan that enables users to watch videos without any advertisements/interruptions.
Youtube Logo
The YouTube logo looks very iconic and unique, the red cylinder-like shape with a white triangle in the middle indicates the play button which is used to play the videos you watch on YouTube, the play button clearly inspired YouTube to use it for their design of the logo. This logo looks very clean and great which makes it a very good logo to use for their app.
Youtube visuals
YouTube has a very basic way of distributing videos on its app, at the top left corner, you can see the YouTube logo, and below it is a sub-menu that leads users to different YouTube pages. On the main page, you have videos of what people posted, most of these videos appear based on what you currently have searched on YouTube, acting as some sort of recommendation for you to watch.
YouTube also has a Sign-in button at the top right corner for users to create an account where they can post videos for themselves. Some users use YouTube for their own financial benefits as YouTube rewards people with money based on how many views user's videos get. YouTube videos have titles on videos
This YouTube display looks great, clean, and easy to understand. The buttons have a nice design to them which makes the menu icons more understandable and easy to use. The videos can easily be accessed without any problems.
Mobile App Sketch
This is my mobile app sketch that I drew on Paint, I really hope that my official mobile app will turn out like this but I will change some things depending on how it turns out.
Official App
App Recording
This is a recording of me using the app, I've used PowerPoint to screen-record my screen.
Overall this app turned out quite well and I found Adobe XD easy to use, probably one of the easiest Adobe software to use.
Website analysis Good Websites
Argos Website
The website I will analyse will be the official website for Argos as the website has a lot of things going on to help customers navigate properly through their website.
The aim of the website
The website's purpose is to sell customers items online and acquire people's interest through the products the website might offer and also by labeling the product's prices to an optimal amount that the customers might find appealing.
Website Navigation
Example: The official Argos website has basic navigation buttons to help users understand the purpose of each button and where the button is going to lead the user.
The navigation is also composed of "Account" which allows users to create a personal profile within the website in order to gain more accessibility and recognition from website cookies within the website.
Content of the website
The content advertised on this website is mostly products that the company owns, trying to sell them to new customers in an attempt to increase their financial benefits. These products range from a wide variety of categories, some including, Kitchen hardware, Gardening, Home Decore, etc
The products have a very appealing look to them mainly to attract customers into purchasing their desired item. The price might also play a role in customers' interest.
How organized is the website?
The website looks pretty organized as the website provides very simple and understanding guidance for users. The website includes very big images of products the website might sell. The background has a clean white background although some users can change it if desired. Overall the design of the website is very clean, understanding, and helpful.
My personal opinion on the website.
The official Argos website provides users with a range of items that might captivate their interests. However, everything looks pasted out without any form of design besides their basic approach which makes me feel like I have so much to choose from and cannot decide on one official product unless I have the product I want in mind.
Vue Website
The purpose of this website is to promote new and upcoming films based on people's favorite genres of film this includes, including horror, action, adventure, comedy, and drama. This website also allows people to buy tickets online which can be then used inside the cinema as a pass for customers to view the film.
Website Navigation
The website provides a very simple navigation system that can be used by viewers to navigate across the website. Some of the navigation is composed of "What's on" where people can check what films the website promotes, "Trailers" where people can see what a certain film is about before purchasing tickets, "Coming soon" which allows people to see what are the new upcoming films, "Big Screen Events" where people can identify the location the film is going to take place and "Gift Cards" where people can transfer money onto a certain card which can then be only used to buy products by what the company has to offer.
Website Content
The website is composed of film covers along with some images from the film that depict the context of a certain movie. The website also provides film descriptions where people can read and understand the story being portrayed within the film.
How well is the website organized?
The website has a theme for black, this is to make the viewer feel comfortable and easy on the eyes. The website is very simple and easy to understand as everything is organized individually. The text is legible and easy to read.
Personal Opinion about the website
I really like the design of this website, everything is beautifully organized and simple, and the website has made it clear what it is about and what the website promotes, the website's color scheme suits perfectly with what the website is offering. I can't think of any possible changes that could be applied to this website to make it any more useful than it already is.
Website Analysis Bad Websites
A bad website can be described as a website that lacks the major fundamentals of what a proper website should be composed of. Some include Bad navigation which can lead viewers to nowhere, no purpose or anything that the website provides, illegible text, and bad visuals.
An example of a website like this is "The World's Worst Website" which I have found online. This website has no navigation bar and has bad visuals.
The purpose of this website is to show what a bad website looks like. This website demonstrates how lacking key components of a website can make it hard for people to use and also can affect the appearance of what an actual website needs to look like.
This website is called "The World's Worst Website"
- Bad Visuals, creating an unpleasant view to look at.
- Horrible navigation, which can confuse the users and can get them lost on the website.
- Illegible text, which makes the information really hard to read
- Animated visuals, which can be distracting to people and cannot concentrate on the purpose of the website
Another bad website will be "LingsCars.com"
https://www.lingscars.com/
LingsCars.com is a unique and unconventional car leasing website known for its vibrant and eccentric design. Run by Ling Valentine, the site offers a wide range of lease deals for various vehicles, accompanied by humorous and unconventional content. Ling's approach is distinctive, blending business with a touch of humor and personal charm to stand out in the competitive car leasing industry.
This website's visuals are horrible and have no style other than being goofy. This website has also lots of animations which can be distracting. The navigation is okay but is hard to use as the navigation can sometimes lead you to unwanted pages.
Coding Terminology
WWW
The World Wide Web is the standard place for people to access information online.
HTML
Hypertext Markup Language. The standard markup language for creating web pages.
HTTP
Hypertext Transfer Protocol is the protocol used for transferring data on the web.
Hyperlinks
A reference to another document or resource, often clickable.
CSS
Style sheet language is used for describing the look and formatting of a document written in HTML.
WWW Timeline
August 6 -1991
1991: Tim Berners-Lee creates the first website, info.cern.ch.
Info.cern.ch
Info.cern.ch is the address of the first-ever website, created by Tim Berners-Lee at CERN (European Organization for Nuclear Research). The website provides information about the World Wide Web project and serves as a guide on how to create web pages.
The website lacks major components of a modern web. The website looks very simple and understandable. The website does not include any fancy visuals or any interesting navigation.
1992: The first photo is uploaded to the web, and CERN adopts the concept of web servers and browsers.
1993: The National Center for Supercomputing Applications (NCSA) releases Mosaic, the first widely-used web browser. This website was developed in the United States by Marc Andreessen with the help of other people at the National Center for Supercomputing Applications at the University of Illinois, the website was released in September 1993.
1994: Yahoo! was founded and became one of the early popular directories of websites. Amazon and GeoCities are also launched. Yahoo was founded by Jerry Yang and David Filo who both graduated with Electrical Engineering
January 15, 2001- Wikipedia is launched emphasising collaborative content creation. This website provides information about each and every topic that exists. Users can access this website online and can read information about a certain topic.
February 2004 - Facebook is founded, marking the rise of social media. Facebook is the first social media platform that managed to open the gates for new and upcoming social media platforms.
February 14, 2005 - Youtube is launched, promoting online video sharing. YouTube is the first website to introduce an online video-sharing platform, where people can show videos based on their interests or events they may participate in.
October 6,2010 - Instagram is launched, focusing mainly on mobile photo sharing. This was the first mobile app to change people's lives for the worse.
Planning my Website
My website is going to be aimed at tourists who are traveling around London, suggesting places to visit and activities to participate in to get the most out of their trip to London. My website is going to be simple and easy to use by everyone, including non-English speakers.
Planning my Website
My website is going to be aimed at tourists who are traveling around London, suggesting places to visit and activities to participate in to get the most out of their trip to London. My website is going to be simple and easy to use by everyone, including non-English speakers.
Navigation
This is the navigation system that I've planned to use on my official website. I've planned my navigation system to be simple and easy to use. I'm going to use this as an example of what my website's navigation should be like, although some stuff may be changed.
Homepage - The homepage will consist of photos and a description of London and what the place is like. This page will also include up-to-date information about London. The main components of this page will be the Navigation system which is composed of Places to visit, Events, and Travel and Transport.
Places to Visit - This page will have the top 5-10 places to visit in London. This page will also have a brief description of each place, to inform the reader of what it is about. The page will have a map of London, landmarking each location for the viewers to see.
Events - This page talks about the activities that can be performed within London, as a way of entertainment for tourists. Much like the "Places to Visit" page, the event page will include the top 10 activities to be done in London while providing an entertaining experience.
Travel and Transport - This page will show the viewers how to arrive at their desired location in London, recommending the best transportation methods to use to arrive at their desired destination.
Style of Website
This is my website sketch, it is what I would like my website to look like, this sketch is just a brief idea that I'm going to use as a guide for my actual website, some components will be changed depending on how well the components make the website look.
Official website
This is my official website that i created to help tourists navigate London effectively without getting lost on their trip to London. The website features 4 key pages that can be very helpful to tourists that promotes locations of famous places in London along with their location and map that shows how to arrive at a certain destination. My website also has an Events page which promotes activities that can be performed in London.
Here is the link to my website: https://dennis002452.wixsite.com/londoninnit
This page showcases all of the best places to visit in London
This page shows the best routes to take in order to arrive at your desired destination in London.
This is page recommends the best activities that can be performed or engaged in London.
Overall, this website turned out really well and went as planned. However there are some things that I wish I could have changed, for example, I could have made the design a bit more aesthetic to grasp people's attention, and I could have also provided more information about London with more descriptions.
People Reviews on my Website
These are the reviews that I've gotten from people who tested and viewed my website:
1st Review:
I do agree with the fact that I should add more to my homepage as it looks quite basic and somewhat bland, although I am not sure what to really upgrade on my homepage.
I also agree with the fact that the color scheme of the website needs a slight modification as the regular color scheme looks bland and outdated.
Evaluation on Website
It has been an awesome time planning and creating this website of mine to help tourists navigate the streets of London effectively without getting lost. I have made a "Places to Visit" page that includes the best places to visit in London, on top of that I also had the idea of including a "Travel and Transport" page which provides the location of the places listed on the "Places to Visit " page. Finally, I have finished off the website with an "Events" page which showcases all the events and activities that can be done in London.
I've researched tons of websites that I took inspiration from such as Vue (Cinema Website), the website features a bunch of sub-pages that allow users to interact and purchase online tickets for their film of choice. The website has up-to-date information to show the latest films and trailers. I also researched some bad ones that I made sure to not include on my website, such as "The World's Worst Website" which is composed of animations that can be distracting, bad visuals, and illegible text that can be a struggle to read.
I've planned my website based on the research I've done and managed to come up with some ideas that were potentially good and had to choose one idea that I ended up choosing for my official website.
However, I could have changed some things on my website such as adding a login page where users can log in and have their own personal account and maybe I could have added some sort of subscription plans on my website where people can purchase and unlock special abilities such as getting the latest information about a place.
Overall the website turned out great and as planned, I also liked making my own style and design on the website as that really enabled me to be more creative. I'm really hoping that in the future I get another chance to do more stuff like this.
I had a lot of fun designing my own app and creating my own style in Adobe XD, this app has the same purpose as the website that I created and that is to help tourists choose the best places to visit and explore in London effectively.
I've done some research on certain mobile apps such as Instagram and YouTube and what both have in common is the scroll feature where you can scroll endlessly without running out of content to watch, these mobile apps also have a very nice clean design to them which makes it very appealing to the viewer and can also help the user be more engaged in the app.
I've planned out my app by making a rough sketch of what I would like my app to look like, I also experimented with Adobe XD which turned out to be really helpful in the making of my mobile app, most of the ideas that I came up with for my official product came from the research that I've made along the way and managed to come up with some interesting ideas that I could have used. Without the research, my ideas would have been very limited.
I managed to create my app in Adobe XD since it was the most appropriate software that helped me create my product. Adobe XD was really easy to use and I found it very beginner-friendly, which allowed me to create a simple mobile app that went as planned.
However, I could have improved my mobile app a bit more since it is a bit too basic and bland, I tried to make it more easy to use and understandable but it kind of turned out more basic than I thought it would be. The first thing I would change is making the design more aesthetic and eye-pleasing as this would make users more engaged within the app, I would also change the user interface as it also looks quite bland and basic.
Overall, this app was sort of a success, most of the stuff went according to plan and I'm glad that it did. I really enjoyed making my app in Adobe XD which really enabled me to expand on Adobe skills.
No comments:
Post a Comment