Category: Year 2

R5 – Websites that break the ‘rules’

Post author By stonciute2021
Post date November 2, 2022

What is Brutalism ?

A design approach known as “brutalism” in digital media aims to appear unpolished, careless, or bare. It resembles webpages from the early 1990s. This feature of brutalism can occasionally be seen in the form of a sparse, nearly naked HTML website with blue links and Monospace typography. (Kate Moran, 5 November 2017)

Figure 1 : Materials used in the Brutalism architecture (Reading, B. (2018)).

Figure 2 : An example of Brutalism architecture (Reading, B. (2018)).

The use of brutalism is considered as a reaction to artificiality and lightness in both architectural and digital design. Its supporters view it for being brave and honest. (Kate Moran, 5 November 2017)

Examples of Brutalism in websites

Too Much.Studio

A website that once employed brutalism to create a straightforward interactive Christmas card now features an interactive website portfolio of the creators’ works. (Brutalist Websites, n.d.) Not so much column grids are used on the Too Much.Studio website’s “Work” page to display the pieces. A mouse pointer is used to move the 3D objects on a website’s welcome page in to demonstrate interaction. There is a place where people can sketch their works of art. The website makes use of vibrant visuals and subtle movement to maintain audience attention. The majority of the interaction was created by using HTML code to modify the selected objects.

Figure 3 : TooMuch.Studio website (TooMuch.Studio, n.d.)

Figure 4 : The interactive items wouldn’t move freely when the website was converted to a mobile layout. Other little animations, however, adjusted rather well. (TooMuch.Studio, n.d.)

Johannes Strüber

According to Johannes Strüber, during the course of his job, he encountered the “brutalitic” approach. It became increasingly obvious that the provided URL serves as the foundation for the layout itself. He reasoned that his minimalist approach demonstrates his commitment to focused labour. It’s focused in a way, but it’s also playful. (Brutalist Websites, n.d.)

Figure 5 : Johannes Struber website (Johannes Strüber, n.d.).

Figure 6 : Testing responsives of Johannes Struber website (Johannes Strüber, n.d.).

Last Heavy

Figure 7 : Last Heavy website (Last Heavy, 2019).

According to Last Heavy, they were interested in developing a sort of environment for the brand that promotes exploration and discovery by presenting content in this completely overwhelming and distinctive manner. We required a website that fit our (schizophrenic) sense of design and had a particular taste for the kind of material that would help to promote and highlight their creative work.
When a user hovers their mouse over the website’s welcoming page, Last Heavy uses modular grids with minimal interactivity. Items are arranged in a modular grid as soon as the user clicks “Shop,” using brutalism while yet adhering to accessibility guidelines.

Figure 8 : Testing responsive design of Last Heavy (Last Heavy, 2019).

References

Brutalist Websites, n.d. Brutalist Websites [Online] (n.d.) Availiable at : https://brutalistwebsites.com [Accessed in 03 November 2022]

Johannes Strüber n.d. [Online] (n.d.) Availiable at: http://www.l-i-l.de/intro [Accessed in 03 November 2022]

Kayce Basques and Sofia Emelianova, Chrome Developers 2022. Simulate mobile devices with Device [Online] (n.d.) Availiable at : https://developer.chrome.com/docs/devtools/device-mode/ [Accessed in 03 November 2022]

Kate Moran, Nielsen Norman Group, 5 November 2017. Brutalism and Antidesign [Online] (n.d.) Availiable at : https://www.nngroup.com/articles/brutalism-antidesign/#:~:text=Brutalism%20in%20digital%20design%20is,Craigslist%20and%20the%20Drudge%20Report). [Accessed in 03 November 2022]

Last Heavy n.d. [Online] (n.d.) Availiable at : https://lastheavy.com [Accessed in 03 November 2022]

Reading, B. (2018) Britain’s Heritage: Brutalism. Stroud: Amberley.

TooMuch.Studio, n.d. TooMuch [Online] (n.d.) Availiable at : https://twomuch.studio [Accessed in 03 Nowever 2022]

Advanced Web Design Development Research Log

R4 – Visual Responsive Websites

Post author By stonciute2021
Post date October 26, 2022

Spotify

Figure 3 : Screenshot of Spotify’s website on my tablet to show responsive design. (Spotify, n.d.)

Figure 4 : Screenshot of Spotify’s website on a android phone Samsung Galaxy S10e. (Spotify, n.d.)

These screenshots display various layouts that then welcome the user with a banner including a call to action or use modular blocks to display various genre groups. The banner has been cropped to fit displays with bigger resolutions.

Figure 5 : Photograph of my families Smart TV to different responsive design. (Spotify, n.d.)

This website’s responsiveness might be further enhanced by using modular blocks for each component to enable a smooth transition as you scroll down the page and prevent the call to action from closing the border as it does in the TV example. Over time, the TV has evolved into a device for both searching for content and enjoying favourite shows. According to “A growing number of UK citizens use Smart TVs to access the internet, with up to 26% of all online time being spent on Smart TVs. ” (Federica Laricchia, statista, 14 February 2022) The navigation bar can be found on the left side of the website.

BBC

Figure 6 : The BBC is a good example of a responsive website. For consumers to stay current on the world, BBC offers a wide variety of news. This is a desktop screenshot of BBC’s website. (BBC, n.d.)

Figure 7 : Screenshot of Spotify’s website on a tablet to show responsive design. (BBC, n.d.)

Figure 8 : Screenshot of BBC’s website shrunken my tablet to show responsive design. (BBC, n.d.)

Figure 9 : Screenshot of BBC’s website on a android phone Samsung Galaxy S10e. (BBC, n.d.)

Figure 10 : Photograph of my families Smart TV to different responsive design. (BBC, n.d.)

These screenshots demonstrate various layouts that greet viewers with small column blocks for each news segment and a huge landscape box for larger screens that displays breaking news. However, smaller displays employ a single column hierarchy with each news item in its own box. Additionally, websites use hamburger menus rather than normal menus to keep everything simple and allow for complete focus on the news.

Depending on the user’s selections, the BBC website employs a navigation bar to direct visitors to topics like weather or sports in addition to news. When you click on a page, like Weather, it moves as the area gets smaller and fits precisely into the designated spot.

Netflix

Figure 13 : Screenshot of Netflix website on my tablet to show responsive design. (Netflix, n.d.)

Figure 14 : Screenshot of Netflix website shrunken my tablet to show responsive design. (Netflix, n.d.)

Figure 15 : Screenshot of Netflix website on a android phone Samsung Galaxy S10e. (Netflix, n.d.)

These screenshots demonstrate various layouts that greet users with a sizable banner and a call to action pushing them to sign up as members instead of just having the logo and a sign-in area. On a huge screen, the website is perfectly sized with a single, expansive landscape box.

Figure 16 : Photograph of my families Smart TV to different responsive design. (Netflix, n.d.)

The next column doesn’t appear cropped when browsing the website on a smaller screen, therefore by spreading out the next column, the responsiveness of this website might be further improved by allocating more space in the column block.

References

BBC, n.d. Welcome to the BBC [Online] (2022) Availiable at: https://www.bbc.co.uk/ [Accessed in 26 October 2022]

Federica Laricchia, statista, 14 February 2022. Household penetration of smart TV sets in the United Kingdom (UK) from 2014 to 2021 [Online] (n.d.) Availiable at: https://www.statista.com/statistics/654074/smart-tv-penetration-in-uk-households/ [Accessed in 26 October 2022]

Netflix n.d. Unlimited films, TV programmes and more. [Online] (n.d.) Available at : https://www.netflix.com/gb/ [Accessed in 26 October]

Spotify, n.d. Listening is everything [Online] (2022) Availiable at: https://www.spotify.com/uk/ [Accessed in 26 October 2022]

PSAD:WT

EX5 – Design testing and evaluating

Post author By stonciute2021
Post date October 24, 2022

Caroline’s feedback

Figure 1: This is Caroline’s feedback regardless of my website and what could be done to improve my website in terms of accessability.

Regardless of my website and what may be done to make it more accessible, this is Caroline’s feedback. The website is in decent shape, however as Caroline said, “An additional menu which is not need” can hinder accessibility by misleading the user because the burger emblem is frequently used in menus, and by having nothing there, the user may assume there is something there.

Improvement

Figure 2 : A screenshot from the video showing the hamburger menu being there for no reason and confusing the user.

Figure 3 : In order to fix the problem I have change the menu layout.

Figure 4 : Improved menu layout.

You will show how you have responded to the evaluation in terms of design changes or in terms of identifying issues for consideration. You should annotate the key points in the participants narration and show with screen shots and annotations the changes you have made to the design or propose making.

After listening to Caroline’s feedback, I have removed the not required menu and while watching the video I realised that there is also a comment section in “RP1 – Grids and Frames ” which was also removed.

Rana’s feedback

According to Rana “However, in the video I experienced some difficulty with one image that I could not get a bigger zoom-in feature. This had me pause and experience a little amount of difficulty when trying to get a closer look at that specific image.” This issue would stop the user from viewing the content which may be useful to you.

“Another improvement I would give Karolina is to just make sure that all her images are clickable and that users can actually access the zoom-in feature to all her images that have been posted. This makes her pages and media files user-friendly and all images can be accessed in any way with no hassle to the user.”

PSAD:WT

EX4 – Design for Live broadcasting using OBS

Post author By stonciute2021
Post date October 24, 2022

This is my tutorial of using Photoshop using tablet and how it can add additional elements to the photograph.

PSAD:WT

EX3 – Video production, design and editing using Premiere

Post author By stonciute2021
Post date October 24, 2022

Figure 1 : This is a video of me going to the Bonfire Night.

Figure 2 : The video montaging process, so in order to create this video I have created a set of small videos and sticked them together to make a one minute film. So I have used effect controls to add motion to the graphic identity.

PSAD:WT

EX2 – Web and graphic design using the Elementor Plugin for WordPress

Post author By stonciute2021
Post date October 24, 2022

Figure 1 : Opening the Elementor and adding the shape divider with an added art creation.

This is an experiment using plugins for Elementor. I must download and activate the Elementor plugin first. I went to the site settings and changed the layout from “Theme” to “Elementor Canvas” by pressing the layout button. By clicking the six dots, I added the shape dividers after selecting the structure and moving on. After that, I can also add an image by splitting the structure in two and dragging the image button into the empty spot I discovered. By selecting an image from the media files or uploading one from the computer while hovering over the arrangement. I may also decide how the image should fit and how opaque it should be.
In order to alter the typeface and colours as I clicked a new structure, I hovered over the heading button and went to the style settings. There are numerous typefaces to pick from, but I am unable to add my own. By copying the hex code from the Adobe Stock, I can also get the colour of my choice. I have chosen the structure and moved the Text Editor nearly next to the Heading in order to add more text. Additionally, I gave the sections full reign to move. To space out my work, I have also added the divider and spacers.

Then I uploaded additional pictures and created a carousel to show the picture I had selected from the media file, complete with captions and an arrow to move on to the next picture. I have chosen a structure and added the Video button in order to add a video.

Figure 3 : Showing the shape divider with an added art creation and navigation bar

In order to move between the sections I’ve previously created, I used a navigation section and hit a preview to see how the design would seem on a different device and the responsiveness at the transition happens.

Figure 4 : Using text section to introduce myself as a Graphic Designer.

Figure 5 : Choosing given typefaces and picking a colour.

Figure 6: Applying Motion Effects to the description about me.

Figure 7 : Making a image carousel of my collage work.

Figure 7 : Video showing the Motion Effects which were previously added to make webaite page interactive.

Moodboard

This is a moodboard for my porfolio projects which contain the typography and colours which I’m going to follow though the project. Typography I’m going to use is Poor Richard and Lucinda Handwriting.

This is a physical moodboard for my portfolio project, which examines how the homeless are mistreated, particularly during the current, bitterly cold winter, and how they are stereotyped in society. Because you need to mentally want something in order to act on it physically, even a modest act of compassion might prompt a homeless person to reevaluate their situation and perhaps even transform their life. According to Hull Live, “Now homeless groups have decried a lack of resources and inadequate support for the reason why people are slipping between the gaps.” as a result, more and more people in Hull are showing up on the streets.

References

https://www.hulldailymail.co.uk/news/hull-east-yorkshire-news/number-homeless-deaths-hull-peaked-7855066

PSAD:WT

EX1- Backup security and encryption

Post author By stonciute2021
Post date October 24, 2022

Backup-Encription-2 Download

References

Acoda, 7 October 2019. WordFence – How it Works? [Online] (n.d.) Availiable at: https://acoda.com/what-is-wordfence/ [Accessed in 10 December 2022]

Boxcryptor, n.d. Introduction [Online] (n.d.) Availiable at: https://support.boxcryptor.com/en/help/introduction/windows/#what-is-boxcryptor [10 December 2022]

Shayla Price, Hubspot, 12 October 2021. What Is WordPress? A Beginner’s Guide [Online] (10 May, 2022) Availiable at: https://blog.hubspot.com/website/what-is-wordpress [10 December 2022]

WordPress, n.d. Plugins [Online] (n.d.) Availiable at: https://en-gb.wordpress.org/plugins/elementor/ [10 December 2022]

Year 2

Uni Inspiration

Post author By stonciute2021
Post date October 21, 2022

Primary Sources

Secondary Sources

https://pin.it/HfWnnwi

Advanced Web Design Development Research Log

R3 – Narrative Sequence

Post author By stonciute2021
Post date October 21, 2022

Cartoon Strip

Figure 1: This Peanuts comic strip was released on November 19, 1961, as one of the newspaper’s themes.
Comic strips from the modern era can be found in most magazines and newspapers.
They are normally printed in colour on Sundays and in black and white on Monday through Saturday in newspaper editions. (Norman Rockwell Museum, n.d.)

The cartoon shows a boy who dislikes eating lunch because he is forced to sit by himself while other kids play, which makes him feel lonely. He also tells himself, though, that he wishes kids would invite him to play with them so he won’t be alone.This comic encourages the reader to purchase the following issue of the newspaper in order to find out whether the boy will make friendships.

Storyboard

Figure 2 : The narrative sequence can brighten someone’s day who is having a poor day in addition to showing something serious. Tom and Jerry, which utilises little explanation but primarily relies on imagery to tell the plot, is an example of a humorous storyboard. The storyboard describes how Jerry’s relative, who took care of the little orphans, gave him the responsibility for their care. The second and third rows highlight how the little orphan attempts to eat the orange that gets stuck and the turkey that is consumed at the speed of light. The relative also mentioned the little orphan’s insatiable appetite. (Luke Leightfield, Boards, 11 August 2022)

Sequential photography

Figure 3 : Duane Michals, a French photographer, took these series of images to demonstrate the Heisenberg Uncertainty Principle, which looks at the fuzziness in nature. A woman is holding a magic mirror that distorts her face; when she looks in one direction, her face expands and some parts of it start to stretch out. As she rotates the mirror from side to side, the woman can be seen looking into the glass and seeing her stretched-out face. In order to put an end to the trip of face distortion, the story concludes with a woman looking at the photographer with her cheek towards the mirror. (Kate Andreasson, Guardian, 26 February 2015)

My Storyboard

This storyboard discusses the value of taking someone else’s recommendations because everyone sees things differently. So the story begins with someone taking care of and tending to the plant. Then he runs into his friend, who is worried about how the plant seems, which greatly frightened the individual. After giving it some thought, his companion handed him the book “How To Grow Healthy Plants?” from his rucksack. The book and the group activities helped the plant grow strong and huge. Instead of using colour, the entire storyboard used a greyscale to refer back to the examples mentioned above which had a very effective use of black and white.

References

Karin Andreasson, Guardian, 26 February 2015. Duane Michals’ best photograph: French Vogue does quantum physics [Online] (n.d.) Availiable at: https://www.theguardian.com/artanddesign/2015/feb/26/duane-michals-best-photograph-french-vogue-quantum-physics-heisenberg [Accessed in 20 October] 2022

Luke Leighfield, Boards, 11 August 2022. 28 Storyboard Examples to Inspire you [Online] (n.d.) Availiable at: https://boords.com/storyboard-examples [Accessed in 20 October 2022]

Norman Rockwell Museum, n.d. Comics: Comic Strips [Online] (n.d.) Availiable at:https://www.illustrationhistory.org/genres/comics-comic-strips [Accessed in 20 October 2022]

Advanced Web Design Development Research Log

R2 – Multichannel UX

Post author By stonciute2021
Post date October 13, 2022

A diagram showing different types of multichannel user experiance.(Ben Lutkevich, n. d.)

Knygos.lt

Lithuanian book retailer Knygos.lt offers books in all categories both online and offline. It appears most frequently in adverbs or in newspapers.

Figure 2: The website’s several categories, ranging from recently added to good pricing per book, are displayed as you scroll down which can’t be efficiently found from store. Additionally, symbols are used to display rating, new arrival, and discounts.(Knygos.lt, n.d.)

Figure 3: The Footer can be seen in this screenshot. There are contact details, including a phone number and email address, at the bottom of this webpage to demonstrate multichannel communication by providing a choice of methods. The footer contains further instructions, like as links to delivery, or even the help centre. Along with the address, you may find information about the bookstore’s hours, social media, and app redirection.(Knygos.lt, n.d.)

Figure 4: Knygos.lt social media promotion. (Knygos.lt, n.d.)

Potential improvement

Instead of the footer, advertise the app at the top of the website. You will receive a reward if you have purchased and read a certain number of books because this bookstore would also benefit from having a reward. Promote more in-person interactions.

Wizz Air

With its base in Hungary, Wizz Air offers flights to much of Europe as well as to places in Asia, Africa, and the Middle East. For preferred seats, reserved seating, onboard food and drinks, and additional fees, passengers may choose. Additionally, this airline places advertisements in airports and on social media.

Due to safety precautions, Wizz Air doesn’t have many print advertisements on board. However, a promotional magazine is kept in a pouch of the back passenger’s seat and is used as print advertising to keep the passengers’ entertained while they fly.

Figure 4: A picture of a Wizz Air magazine with a QR code for the app download. The magazine contains distinctive QR codes throughout. For instance, the code on this page displays the location of the store.

After purchasing the ticket, you will receive numerous email marketing ads offering prospective airline discounts to persuade you to take a vacation.

Figure 5: An email advertisement to persuade you to purchase a WIZZ Air PRIORITY for an extra luggage with additional perks like being first in the registration queue and being first to the plate.

However, in order to board the aircraft, you must present a ticket. This ticket can be stored in the app and used as a marketing tool to establish confidence that it will be securely stored when it is brought.

Figure 6: Multichannel options for downloading an app.(Wizz Air, n.d.)

Figure 7: Wizz Air Social Media.(Wizz Air, n.d.)

Potential improvement

More advertising that encourages to plan new vacations or even to tell their friends and family about their experience could help Wizz Air boost its image for other International flight users.

Campaign suggestion

A social media campaign where members of the reading community could discuss their reading preferences and favourite books is one concept for a new multichannel user experience. This could also work for sharing flying experiance.

References

Ben Lutkevich, Search Customer Experience, n. d. Multichanel Marketing [Online] (Updated in November 2021) Availiable at: https://www.techtarget.com/searchcustomerexperience/definition/multichannel-marketing [Accessed in 10 October 2022]

Knygos.lt, n.d. [Online] (n.d.) Availiable at: https://www.knygos.lt/ [Accessed in 10 October 2022]

Wizz Air, n.d. Explore your travel opportunities with Wizz! [Online] (n.d.) Availiable at: https://wizzair.com/en-gb?gclsrc=aw.ds&ds_rl=1282923&ds_rl=1277705&ds_rl=1277705&ds_rl=1282923&gclid=CjwKCAjw7p6aBhBiEiwA83fGuuAYi0te7mwJIimw30PFz1cpdDUpH2A2SMojBdDOw3s3X08NZ9hjiRoC76kQAvD_BwE&gclsrc=aw.ds#/ [Accessed in 10 October 2022]