Websites
Amazon is an online shopping website that caters to general consumers by providing them an easy way to find what they're looking for. Amazon provides everything ranging from toys, household items, devices, and physical media like CDs and DVDs, etc.
As seen by the front page, we can see that the items are divided into separate sections, (such as the toys, Christmas items, and home devices). This makes it easier for customers visiting the website to look for what they want, as it would be more identifiable than if it were presented in columns.
The content you can immediately see on the front page is the promo for Gen V under the search bar, which is meant to advertise other series or movies on Amazon Prime, you can also click the arrows on the side to see more advertising for items listed on Amazon. These serve as advertising as it usually means an item that has relations to a specific event like Black Friday or Christmas or one that has recently been released and Amazon is promoting it to convince customers to buy it.
I think that Amazon does its job of being an easy navigator for shopping, the website's design makes it easy to identify item sections without being too in your face and things like the search bar are easily recognisable due to how massive it is, which is very important for shopping websites as this helps you find items that aren't listed on the front page.
Design-wise, the website is shown to be normal and plain, with a column of how-to pages to click on separated by popularity, like pages that are trending or most popular pages. The pages also have some original artwork with the page's main focus (with a few exceptions).
Moving into the content side of the website, the pages that are on wikiHow are list pages that are either how-to's or step-by-step guides on how to do something. These lists usually contain the main point, then some secondary points that would relate to the main point, usually going into detail about what it means and how you could either achieve or avoid it. The pointers also have additional artwork that relates to the pointer, as more of a way for people to see what it means clearer and what context it usually happens in.
In my opinion, wikiHow is an average website. It is an easy website to navigate and find lists related to a problem you have, and the information provided on those specific pages is mostly correct. But some issues I have with it are I think the overall art style is bland at best, and almost feels like a website stuck in the past, mainly due to the colour palette being completely dry and plain. Another issue that could be prevalent is that the information can sometimes be incorrect, though that is usually a problem with its users rather than the website owners since people have different beliefs and opinions.
The Prince Charles Cinema is a cinema in Leicester Square that showcases a mix of cult, arthouse, and classic films, with some new movies added sometimes. The cinema is most known for its showing of cult films like The Room and The Rocky Horror Picture Show. This website specialises in purchasing tickets for specific films instead of doing it in person, as it is much easier to do than the latter.
The design of the website is shown to be simplistic and moody, which gives it a style that differs from other mainstream cinema websites like Cineworld or Vue. It has the essentials for a website like this, with the advertisements of other movies coming soon alongside the movies playing today with additional details about the film and the showtimes on the opposite side, with it sometimes advertising a specific addition like a 4K presentation, 35 or 70mm film, £1 membership, and a Q&A.
The content on the website usually has a specific poster for the movie today, with details like the title (sometimes includes something special like a Sing-a-Long or a remastered edition), the runtime and age rating, the director of the movie, some of the cast members, country of origin and the original release year. The use of the runtime and age rating is useful for a cinema website because the audience would want to know how long it would be before going to see it, as a longer runtime can sometimes make them consider going or not, and the age rating is useful for the cinema so that kids won't be allowed into films that aren't clearly suited for them. The website also advertises its Letterboxd, Instagram, Twitter, Facebook, and YouTube around the top of the page next to the search bar, where they post about big events they will be hosting, when the tickets for a specific film will go live, or just a random video relating to an event happening.
The Prince Charles Cinema is an easy website to access, due to its simplicity and colour design making it easy to identify each section of the website. The links to the tickets and other films coming soon all work well and the information about the movies is correct. The simplistic design works in this favour as it provides one that starkly contrasts with the others but one that appeals to you due to the colour palette. This would be an example of how simplicity can be done right, unlike wikiHow where I think it doesn't look that appealing not for the simplicity, but also the colour choices which makes it drab and boring.
Ain't It Cool News is a movie review and news site that posts reviews, news, and other miscellaneous stuff. Launched back in 1996, AICN was extremely popular in the early days of the internet, but by the mid-2000s, the site declined in popularity due to the rise of other movie sites like this one like JoBlo.com and /or film.
The design of the website as you can see in the picture provided shows us a design that is reminiscent of the early Internet, judging by the font used for the titles of the section and also the colour palette with its garish-like brown and washed-out blue with a bit of maroon, and you have a website that feels like it's been left to time or abandoned by the owner. Another detail of design is that next to the logo of the site, it features an animated GIF of someone dancing on a light pole while it rains, which is a reference to Singin' in the Rain from 1952, the placement is a little off for a website like this in my opinion, but it doesn't really distract me from the rest of it.
The content featured on the website aside from the animated GIF next to the logo is mostly just large amounts of text split into different sections that lead to stories about recent movie news. Speaking of the recent movie news part, it suffers from not being that up-to-date compared to the other movie news sites, where with JoBlo, you can see news that was published hours ago, while the last bit of movie news published on AICN was from September 17th, a whole 2 months ago. It doesn't help that the gaps between news are almost 1-3 months apart, which is a very bad thing for a site like this since people would go to it for more information about a particular film they'd want to know more about, which AICN mostly provides information for movies that aren't mainstream and obscure to an extent.
Despite all of this, however, the website does have simple navigation mostly due to its dated design and all the links work. But the dated design really bogs it down alongside the flimsy news reporting, especially when compared to other movie sites, and those two factors were considered the main reason the site declined in popularity.
Arngrem is a Norwegian website that specialises in selling vehicles like cars, bikes, scooters, and mopeds.
The design of the website features boxes that display a photo of the advertised vehicle and additional text with the name of the product and the price tag for it, which the name of the vehicle is outlined with a link to where you can buy it, sometimes it's directs to another page on the website, and other times it directs you to another website that advertises it.
The other additional contents of the website outside of the aforementioned boxes are at the very bottom of the website and have a very tiny search bar that doesn't work at all (always gives you a 404 page when you try to search something) and since it's near Christmas as of writing, features a Christmas themed banner with low-quality GIF's that stick out like a sore thumb.
And as you can tell, this website is not well organised at all, to which I'd say it is the most confusing and messy website I've ever seen in a long time. Firstly, the items and text are just all over the place instead of being aligned, which makes it look amateurish, I'm guessing it's going for a quirky design choice, but the end result makes it appalling to look at. It feels like trying to navigate this website is next to impossible. The links on the website are inconsistent in terms of function, where some may work, and others don't, which could be a sign of poor support from the owners of the website.
007 Museum is a Swedish website that serves as the website to buy tickets online to the museum specialising in showcasing James Bond memorabilia. The museum is located in Emmabodavagen and is marketed towards fans of James Bond.
The design of the website showcases a long list of memorabilia from the James Bond films, with pictures and text that describe it, which is advertised to entice people to go to the museum. Other additional designs are on the bottom of the screen where you can choose between Chinese, English, and German (the screenshot is in German), when you select a language, the page changes to just text with Swedish on the side of it.
The content on the website aside from the memorabilia pictures also features some videos that describe the item in question, whether that be a plane or car related to James Bond. It also advertises it's Facebook, Instagram, Twitter, YouTube, TripAdvisor, and WordPress (for some reason, Facebook appears twice). The English side of the website mostly uses text with some pictures that relate to the advertised feature, the two exceptions are a rotating golden 007 next to the social media header and language chooser, and on the bottom is a collage of the different James Bond actors over the years.
The website, in my opinion, is easy to navigate a bit and the links do work and don't lead to dead ends, but one thing I don't like about the website is that it has such an amateurish feel to it, almost like a school project-type website. The abundant of text and photos make it feel like a website stuck in the 2000s, with the sections feeling bland and barren instead of exciting and intriguing, not helping is that the website seems to have been last updated around 2018, a whole 5 years ago, as most of the advertised dates are around 2017 and 2018. The English translation of the website also suffers from poor translation with some spelling mistakes here and there, though this may be excusable due to the translator clearly not being English.
Timeline of the WWW
March 1989: Tim Berners-Lee creates a vision that will be the genesis of the World Wide Web.
September 1990: Tim is given time to work on this project by his at the time boss, Mike Sendall, despite his initial rejection.
End of 1990: Tim's team had created HTML, HTTP, and URLs. The bedrock of websites
August 1991: The very first website is released to the public.
January 1993: The very first web browser, Mosaic, is released
April 1993: The World Wide Web becomes accessible to everyone, as Tim released the true potential of the invention if it was accessible to everyone.
October 1994: Tim leaves CERN to create the World Wide Web Consortium, an organisation that specialises in the development of the WWW to its potential.
May 1995: The programming language Java was first released.
August 1995: Windows 95 is released to the public, alongside Internet Explorer in an add-on package Plus! for Windows 95, which is an updated version of Mosaic.
December 1995: The first edition of JavaScript is released, which is like Java but is more app-based than browser-based.
January 1996: Macromedia Flash is officially released after Macromedia purchased the rights to FutureSplash Animator from FutureWave Software.
Key Terminology
WWW known as the World Wide Web is an information system interconnected into pages and documents through hyperlinks, which are accessible to everyone.
HTML is a combination of Hypertext (text displayed on the website), Markup (a style guide used to be printed in either hard or soft copy), and Language (a system that the computers learns and understand to work out commands and what they do). HTML is the backbone of a web page, and how it's utilised is what the final result will look like.
HTTP stands for Hypertext Transfer Protocol, which is used to connect different weblinks and servers to each other.
Hyperlink is a type of text that when clicked on, directs you to another webpage on either a different or the same website.
CSS stands for Cascading Style Sheets and is the final look of the webpage after HTML, where CSS generates the final look of it while HTML is the programmed version.
Software used for Web Development
Sublime Text, GitHub, Adobe Dreamweaver, Django, Figma, JavaScript, openElement, Wix, Squarespace.
Website Flow Chart
Website Evaluation
The inspiration for the website came from my past experience in Photography at my old high school. As photography is linked to art in some way, I felt inspired to use my past experience in Photography as the stepping stone to making my website.
For the pictures shown on the website, all of it is 100% original and taken by me. For this project, I searched my camera roll for potential photos that look the most pleasing and interesting, as I created the website in the mind of someone wanting to find potential work, so they showcase what they consider their magnum opus. Some of the pictures I used were from past projects, pictures I just had lying around, or ones I took myself to have more photo options to choose from.
Seeing as this was my first time using WiX, I was a bit lost on how to make a website out of an original design, so in an act of biting a bullet, I used a pre-made Photography website template. I hand-picked the specific template carefully and delicately, as even though it wasn't mine, I wanted one that I felt would be something akin to what I would've made if I had made a website myself.
This act of using a pre-made template came with more of a negative than a positive. Where the negative was that I felt like I wasn't creative enough while making it. Considering I was using a pre-made template and then replacing the pictures and text with my own works and words, I felt like I wasn't being original myself. The feeling got worse when I saw others' work and realised they hand-crafted it themselves while I used WiX Studio, making me more concerned about the quality of my website. But the reason I stuck with it was because I'd gone so far in using this template that it was simply too late to start over, I had to keep going forward and eventually finish it.
If I were to make some improvements to my website, a definite one would be hand-crafting the website myself, as that would show more creativity than using a pre-existing template on WiX Studio. While it would be harder to make because of needing to experiment more with what goes where, for me, it would be something I would be more proud of than using a template and inserting my own images.
Another improvement I may want to consider if I make another website like this is that I want to use more photos that are specifically used for the website and not just ones I took long ago. While some of the photos are great, I want to show more artistic creativity by using photos I took myself that are only to be showcased for the website and not for any other project.
UX and UI basics for mobile apps
UX, also known as User Experience, is the process of building products that both help eliminate user problems and provide an easy and enjoyable design for regular people. The difference between UX and UI design is that the UI is more about the interactivity and feel presented to the user, while UX is more about how someone would feel about the interactivity, specifically on if it's easy to understand or it's convoluted.
A typical development process for UX is divided into three broad phrases.
The first phase is Think, which involves usually working out ways to improve problems for a product for users, they usually reference things like user feedback, product usage data, and competitive analysis, these are referenced because this helps give them more of an idea on what to improve and what to keep intact.
The second phase, Make, is the point where the ideas that were generated during the thinking process are now developed into the product, whether that would be designing new features or fixing issues users may have with the product.
The third and final phase is Check, this is where they get primary feedback on users, this is to gain opinions from its customer base on whether the changes solve some issues the users may have with it and therefore improve it for them.
In UX design, 3 laws are sometimes important to consider when designing user experiences.
The first and most well-known law for UX design is known as Jakob's Law, which is a law that states that users prefer a website to work the same way as all the other sites they know about, so web designers should try to make their web design similar to other websites to both stay consistent and also provide an easy to understand interface.
The second law for UX design is Fitts' Law, which is described as the larger and closer a button is, the faster it will be for people to click on it, so designers make sure the buttons are as large and close to the user's mouse as possible.
The third and final law for UX design and one that is as important as the first law is Hick's Law, a law that states the number of choices displayed to a user increases the time it takes for them to make decisions, usually due to nervousness on what to choose, to help this, websites usually have a few options to choose from, usually below 5, to combat decision fatigue.
UI, short for User Interference, is the designer process of interfaces onto computerised devices whether that be websites and operating systems/homepages on computers and tablets respectively. The main goal for designing a UI is to create one that is both easy and understandable to a regular user.
Some other variants that make up the UI include:
Graphic User Interface (GUI), which allows users to interact with the device or program using graphical icons, for example, a computer homepage, with the icons of the different apps acting as the GUI.
Voice-controlled Interface (VUI), which allows users to interact with a program or device using vocal recognition to perform tasks the user may want the program to do, such as setting a date on the calendar, helping them locate places that would helpful to a user, and also sometimes as a personal buddy. A few examples of these interfaces are Siri, Alexa, and Cortana from Apple, Amazon, and Microsoft respectively.
Gesture-based Interface, which allows its user to interact with 3D shapes and environments using their body. An example of this would be virtual reality software like the Oculus Rift and Metaverse.
App Testing Video
https://www.youtube.com/watch?v=WHHiqxlCTiA
App Evaluation
The final piece I have made is an app that features photos taken by me, the app is called Wonder and has 3 sections dubbed 'Natural', 'Surrealism', and 'Objects'. In the demonstration above, the Natural section features 5 photos that were directly taken by me. The influence to making an art-inspired app came from me choosing Art as my subject of interest, as that was one of the options alongside Business, Community, and Education. I chose Art because it was one I was more fond of and one I was more interested in compared to the other three.
The main groundwork for making the app was the XD demonstration video, where we were tasked with making a furniture shop app that sold sofas, chairs, lights, etc. The demonstration video set the groundwork for what would be the app, and some of the design choices in my app almost relate to the demonstration, mostly on the top bar of my app, which is almost identical to the top bar for the demonstration video.
Throughout the development, the design of the app went through several revisions, such as increasing the size of the picture outline, adding a back button for more accessibility, and changing fonts to something I liked since the fonts I was initially using were no longer supported. I designed the app to the best of my abilities to achieve the highest grade I could possibly get for this project.
What went well with this product was that I like the layout best, It's simple, It's accessible and easy to use. Initially was gonna have pictures to the side and then text to the other side, but I changed it to what you see now because it was hard to develop, so I overhauled it. I'd say the overhaul was very necessary because if it was with the original design, I'd say it'd be a bit confusing to me.
In terms of standards, I'd say it fits my standards well enough, as it's a simple navigation tool, along with necessary navigation tools like a back button on all pages with the photos. Alongside having information on the photos that gives you enough in terms of where it was taken place, details you may have missed, or techniques shown that make the photo as it is.
However, on the topic of things I'm not too fond of. One of them may have to be reusing other images from projects. This was an issue I felt making the website, and I'd say it worsened here. Most of the pictures such as the Kingsbury ones were from the Pantone Brief project about Photos of Kingsbury, while the Westminster one was from the National Gallery Trip Museum back in October. While my critiques sounds like uncalled for self-depreciation, I have a feeling I don't have much creativity for it, especially when I see other's works that seem to use different images and have more creative design put into it.
In saying all of this however, I think there is nothing I think needs improving, as I believe it is perfect as it is and any other additional material would hinder the quality of the product in my opinion. Though there could be other factors I'm probably missing that do need improving, for now, it's perfect as it is and to the best of my ability.
App Ideas
No comments:
Post a Comment