Why did I choose this object in particular? Because it’s been a very important part of my life lately. These adapters were one of the first things that I put in my suitcase before moving to the UK.
The shape is tailored for it to fit in your hand while plugging it in. It’s also adjusted for all different types of plugs. It’s small and compact but easy to find because its white (especially if you carry it in your bag since all of your devices NEED IT). The Type G plug has three rectangular pins in a triangular pattern and includes a fuse. What I also like about this adapter is that it’s made out of hard plastic so it won’t break easily. It also has some informational text moulded in the design. However I do wish it was a bit smaller and lighter since it’s and essential part of my everyday life.
2. Fake plant
First of all it’s obviously ADORABLE.
But I’m not here to talk about that. This fake plant and its pot brings so much character into the room its in. The materials used to create the flowerpot are in a muted color so it fits perfectly into most interiors. Trying to find a proffesional name for the pattern I typed “stracciatella pattern” into Google. And surprisingly I was spot on. The pot is sturdy and looks weighted enough to not get easily knocked off a shelf. The shape of its arms flows along the middle of the object and the smiling pot looks content with itself. The legs are made out of white thin rope and its feet are also a bit weighted so they hang off whatever surface it sits on but not weighted so much that the pot falls off. The leaves don’t look as fake as every other fake plants does. I think it’s a great addition to rooms without much light or for people that find it hard to maintain real plants. This one is not only quite natural looking but also really cute.
The main question is: do I like it because I think it’s good design or do I like it because it’s adorable? Let’s say it’s both!
3. Mirror
Why is this mirror an example of good design? (in my humble opinion)
I really like the shape the main panel and how it’s implemented into the shape of its legs as well. The rounded edges are my favourite part of this design, they make it seem as if the object was soft even though the colour and material feels cold and even sharp. Important part of design is consistency throughout the product. The mirror is a perfect example of it. The legs are also very stable and provide easy levarage to angle the mirror upward or downwards. The silver colour also reflects quite a bit which looks clean and simple with the mirror part. The object is quite heavy and durable which is perfect for minimalists that don’t like low quality products (like I do). However it’s not too heavy to pick it up while rearranging the shelves. What I also really enjoy about designs or home decor is how easy it is to assemble. If you look closely you’ll notice that its made out of only two parts – two conjoined legs and the mirror panel connected by two screws on either side.
Posted in Uncategorized | Comments Off on 3 examples of good design
A review of the enhancements made for Richardson’s Bakery website revisited.
The major goal was, of course: to give it a bit more pazzaz and adjust things according to the feedback I got on the original version.
Branding
I decided to spice the branding up a little and exchanged the photographs above the fold. The blue I chose makes the website brighter, happier and more appealing. That way, it is seen as more approachable and friendlier than the previous brownish colour scheme that was quite boring and dull.
I did not change the colours of the logo, since it could be seen as non-traditional and maybe a bit ‘too funky’ to change the colour of a loaf of bread to blue. Blue is associated with trust and loyalty.
What I hope to achieve is to make new clients put their trust into Richardson’s Bakery and make it easier for the long time costumers to stay loyal to the bakery.
BEFORE:
AFTER:
UX
To enhance the user experience, a customized error page was developed and connected to the website through the .htaccess file. This has resulted in the availability of a distinct error page for 404 errors that is designed for the small business website project. It has the logo at the top, and it’s cohesive with the branding of the website. The error page was designed to redirect users back to the homepage. There is a clearly distinguishable button which points there.
I have also created a bit of information that updates according to the day of the week and time of day. The JavaScript code is simple, and you can find it on the screenshot below. However, in case the JS has been enabled, the fallback is simply ‘Visit us!’.
I added an arrow which takes the user back to the top of the screen without having to scroll up. That part was also done using JavaScript.
After changing the branding a bit I decided to run a contrast check, which the website passed. The accessibility check told me to add an alt text to an iframe with the map, which I did.
I included meta description tags on every page.
I also added an Instagram icon and a call to action-esque paragraph for the potential costumers.
I added a robots.txt files as well as the sitemap.xml for managing a website’s search engine optimization. By providing a sitemap.xml file, I can ensure that all the website’s important content is indexed and easily discoverable by search engines, which can help to improve the site’s overall visibility.
CODE
For this project, I chose to utilize PHP includes to create a modular website structure that would be easier to maintain in the future if necessary. By including separate files for the header with navigation and footer sections of the site, I am able to make changes to these elements in just one file, which saves time and effort. These small but significant changes are a good practise for my future projects.
I also made the code leaner and easier to read. I used comments wherever I thought they were needed and worked on my indentation.
In today’s world, websites are viewed on a plethora of devices ranging from compact mobile screens to large desktops, therefore, it is essential to have responsive images that improve the overall responsiveness of a website. However, simply resizing images to fit different screen sizes is not enough.
Concept review: what is responsiveness?
It’s an approach to web design that aims to make web pages render well on a variety of devices, windows, or screen sizes from minimum to maximum display size to ensure usability and satisfaction.
What are responsive images?
Responsive images are images that can adapt to different screen sizes and resolutions, ensuring that they look great on all devices. There are a set of techniques used to load the right image based on device resolution, orientation, screen size, network connection and page layout. Art direction plays an essential role in creating visually appealing and effective responsive images.
Why is it important?
Render a high-quality image on different devices
Faster loading web pages
User experience friendly
SEO friendly
What exactly is art direction?
Art direction is a method of creating responsive images for a website with a focus on the content of the image. Essentially, the goal of art direction is to keep the emphasis on an image when the screen size changes. This helps web designers avoid certain media elements becoming squashed as the screen size gets smaller. It’s called the art directed method because it’s a way of creating an art (media) focused website, it mainly helps the designer prevent the content of the image being looked over. The key part of the solution to this issue is changing the image that is displayed when accessed on a different display size.
For example, here a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser.
(MDN Web docs, 2023)
When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see.
(MDN Web docs, 2023)
It would probably be better to show a smaller, portrait image on mobile, which zooms in and focuses on the person. That way, the unnecessary background is cropped out. The use of the <picture> element in html allows us to implement just this kind of solution.
How does it work?
Firstly, we must identify the screen dimensions at which the layout changes, these are known as breakpoints.
As a standard, breakpoints are often defined based on-screen sizes that are commonly used. For example, mobile breakpoints are usually equal to 360 width x 740 height and high-resolution desktop breakpoints are often anything above 1920w x 1080h. The breakpoints are vital to the mark-up of art direction.
Secondly, we must create or crop different versions of the image we’d like to feature.
Each image produced should be suitably optimized for the different screen sizes and therefore resolutions. This means that image dimensions, file size, and format will vary depending on the device and screen size.
Thirdly, we use only html markup to implement art direction, which is covered in more depth below.
The key HTML element used to implement art direction is the <picture> element. In this case, the picture element acts like a wrapper that contains multiple <source> elements. The source element provides the browser with different images to choose from. Within the source element features the MEDIA attribute, which sets the media condition for the browser, instructing what minimum or maximum size the screen can be for a particular image to be shown. This is an essential part of the art direction method as it allows the designer to explicitly outline the screen size conditions to the browser.
The second attribute of the <source> element is the SRCSET attribute, which is used to provide the path to the different image files.
The last element within the <picture> element must be the <img> element, this provides the browser with a default image file if the conditions set in the <source> element aren’t met. For the img element, it’s really important to remember to provide the SRC and alt attribute because without them, the entire picture element will not work. For CSS styling, you must style the img element as opposed to the source element as the source tag is essentially a void element (web.dev, 2021).
As mentioned earlier, the media attribute allows us to define the critical break points at which the browser should execute the change of image and page layout.
If the screen width is 800px or more, the second source image will show
If the screen width is 799px or less, the first source image will show
Setting the correct media conditions leaves the end user with an enhanced browsing experience, where the content of the image is properly presented. The media conditions can also be set to rules that aren’t related to screen size like the users colour scheme or browser contrast settings (Stoumann, 2021).
Following the demonstration of how to mark this up in html, below is an example of how art direction will look in action;
(MDN Web docs, 2023)(MDN Web docs, 2023)
Art direction vs resolution switching
In responsive web design, there are actually two methods used to tackle responsive images, one being art direction and the other being resolution switching. Below is a summary of the key difference of the two methods.
Browser compatibility
(W3Schools, 2023)(W3Schools, 2023)
The number in the table shows the first browser version that supports the <picture> element and srcset attribute. Chrome supported from version 38.0 which was released in 2014 and Firefox have supported from version 38.0 which released in 2015. Edge supported <picture> element and scrset attribute from version 13 which was released in 2015 and 2017. Safari supported <picture> element and scrset attribute from version 9.1 released in 2016 and 2015. Opera supported from version 25.0 onwards released in 2014. It shows that most browsers supported <picture> element and srcset attribute from 2015.
Why not use CSS or JavaScript?
As HTML is the first language that the browser loads when a new page is accessed, images are downloaded with HTML before interpreting the CSS and JavaScript documents. This process is great for reducing page load times but proves to be challenging when it comes to responsive images. For context, imagine you load a web page with an <img> and then you wait for the browser to identify the viewport width and adjust the image using the JavaScript document. After several steps of interpreting additional JavaScript and CSS documents, the original and small image would have already loaded as they appear in HTML first. So, it shows that using CSS and JavaScript is very bad in regards of responsive images. Therefore, the technique of art direction which use solutions like srcset are very essential for responsive web design.
Finally, how well does art direction improve the responsiveness of a website?
This method enables us to provide a good user experience on both mobile and desktop screens, improves visual presentations, it controls the issue of having to shrink and image for the screen size and the layout responds naturally. Cropping the image allows the user to focus more on the content of the image. Also, it makes the website more accessible for users using mobiles with slow connection and at the same time for users with fast connection and high resolution it will provide highest quality images.
To conclude, art directed images are an essential aspect of responsive web design, as they ensure that images look great on all devices and screen sizes. Implementing art directed images involves creating multiple image versions optimized for different screen sizes and implementing them using the HTML “picture” element. By following our steps, you can create visually appealing and responsive images for your website, enhancing your users experience.
This article will help me produce and present important parts of my major project. I will present my concept for the website, the methodology I could use in the future, my opinions on certain topics as well as valuable information about UX itself.
What is UX?
The official definition by ISO is
“A person’s perceptions and responses that result from the use or anticipated use of a product, system or service.”
Many believe it is an umbrella term which covers several activities that constantly evolve.
What is UXD?
It is a category of UX activities. User Experience Design is the process of designing either the physical products or even a service. Goal of UXD is to produce an easy and a pleasant experience for the user.
Project idea
I plan to develop a website with information on different fabric types and a quiz to find out which fabric is the best for which garment according to different criteria. The website aims to provide the user with useful and simple information through the quiz section and more in-depth knowledge in the blog section. The extended content will provide information on sustainability of chosen fabrics, its history, the way it has made etc. It is important to me that I understand how the users want to learn and create an accessible guide for beginners as well as a useful resource for those who already know a thing or two.
Background
I have chosen this topic because I am personally interested in it. I thought it could be a good way to learn even more about it while teaching people something useful. With brands like SHIEN on the raise fast fashion became almost unavoidable. The clothes are bad quality, fall apart easily, they are mass produced and mass discarded which harms the environment. It is important to me that I buy consciously – decent quality timeless pieces are the absolute must have these days.
Research goals
The goals are both simple and complicated at the same time. They must be precise and help me set an unobstructed vision of the goals – at the end of the day the research is supposed to help and guide me towards good UX. In my case it should be centred around people interested in fashion and fabrics as well as those environmentally conscious. Gathering information such as user demographics of similar existing websites and their needs would be an advantage in understanding what needs to be done to design a successful website.
With all the UX methods and activities available it would be best to stick with Discover Explore Test and Listen activities. Depending on which stage of the research I am on I would use different methods. Some of them might be more appropriate than others – all depending on e.g., the type of products and services. Most popular methodologies include; field study, journey mapping, in-person usability study, surveys and many more. The most valuable and effective are direct tests with users, however that is not always possible. In that case the key is prioritizing data analysis and keeping in mind that it is real people you are designing for. Data analysis could seem mundane and boring, but it is a reliable source of helpful information on the user.
“No product is an island. A product is more than the product. It is a cohesive, integrated set of experiences. Think through all the stages of a product or service – from initial intentions through final reflections, from the first usage to help, service, and maintenance. Make them all work together seamlessly. “
— Don Norman
Research
The research would be executed using an online survey. The most important rule of surveys is to filter out the users important to us. If the person taking it does not really care for fashion or the quality of their clothes, then the data we would gather from their survey would be useless to the research because they are clearly not the target of my website. However, there could be people who are complete newbies to the subject but want to learn more. They benefit from my website as much as I benefit from their input. Having the perspective of a that user is great for suggestions and potential additions to the content (e.g., dictionary of most used words). In that case I must ask myself the question “what does that type of user want to see when they open my website?” I want to grab their attention and retain it with content catered to a newbie. I need to figure out how can that be done and ask potential users what grabs their attention.
Questions for users already familiar with the subject could circle around how confident they are with their knowledge and what would they want to know more about. It would be interesting to ask about their spending habits (in regards of clothing only) and how much they pay attention to the tags on their garments. I would also include a question about competitors – where the users got their knowledge from and how. It is important to understand that these users are less likely to be interested in things catered for beginners. In that case I could provide them with a choice of content, so the beginner friendly elements can have their own category on my website to avoid confusion and cause decision anxiety.
The survey would include questions about the demographics such as age, sex, location and preferably occupation. These additional questions determine the user profiles and help understand WHO the users are.
Usability testing
Competitor websites could be useful in this part of the research – in case if there are a lot of them, I would use the ones that were mentioned number of times in the survey. The users would be asked to look up specific information on the websites e.g., “What’s the best fabric for t-shirts?” “Find information about how cotton is made.” User behaviour would be monitored to understand what the thought process is while preforming the tasks. It would be beneficial to acknowledge the possible obstacles and make sure that they are not repeated in my design.
After the task, the users would be interviewed about their experience on the website. Their opinions on the way it works looks etc. They will be able to make suggestions and address any difficulties.
Data from these activities will be converted into journey maps and the information from surveys will help me with creating the user profiles.
Data analysis
To know who the design is for – the designers need to understand the users. It is easy to say but not easy to do. The personas you create must be realistic but still fictional since it is a combination of data. They are supposed to be archetypes with a human description. They have background information such as age and sex but also their needs and goals. It is important to create those for a clear view of the users. It helps with visualizing and remembering who the user is.
My user personas
Since this is still the very beginning of my research and planning for the major project, I am basing them on my assumptions and predictions. I get to focus on their wants needs and pain points to distinguish these hypothetical end users. These sections will be my source of wisdom to drive efficient design decisions. I would also be beneficial to create scenarios to test them in the context of potential problems users want to solve.
Empathy maps
This method is not as popular as user personas, but it is extremely helpful with systematizing the knowledge of need of the target audience.
It should include 4 sections:
Says – that could be direct quotes from interviews
Thinks – what matters to the user?
Does – what action does the user preform?
Feels – what worries the user? What is he excited about?
That way you will get a clearer picture of users’ attitude and behaviours which benefits the design process. It could also be used to help our team get a better understanding of the user, that way we can prioritize users’ needs on a larger scale.
Some of these answers could overlap with one another, it is important to not overthink whether the item fits into one category more than the other. There is quite a lot of ambiguity with this method.
Information architecture
First thing about such a big project would be working on content first. I find it exciting, but I know others would disagree and prefer to get into the designing process as soon as possible. I will produce appropriate categories and figure out the media side of things. Using images might be tricky and I am set on making my own illustrations. However, I could be completely wrong, and my illustrations might turn out to be not the most pleasant to look at and not beneficial to the user. Initially it might be challenging to plan everything from scratch and at the later phase of designing I will make appropriate adjustments based on more research and/or user testing and feedback.
Working on information architecture and deciding what is more and what is less important could be quite hard since I am biased on the subject which is a wonderful opportunity to ask colleagues and other designers for help in that matter.
Next step is working on components like SEO, logo, and side content (e.g., about me page).
Responsive design and accessibility
One of the last things to work on before initial functional testing is responsiveness of my website. I am expecting at least 60% of users to generate traffic from their mobile devices which puts a lot of pressure on the responsiveness of the website. I want users to be able to access information about fabrics on the go for example in the clothing store or a thrift store. That way they have an easy guide and do not have to learn the list of fabrics and their traits by heart.
I want the quiz part to work as well and as fast as possible on the mobile since it is a crucial part of my major project website.
I wish to make my website as accessible as possible to accommodate many potential users’ physical limitations, at the end of the day all of us want to wear quality garments.
Prototyping and sketching
I will be starting with pen and paper. I really enjoy that method especially at the beginning. A lot of innovative ideas and solutions come to me that way. Using the Crazy 8 method I can quickly sketch some of my ideas without delving into details too much and letting creativity and ideas flow freely.
After drawing and writing I will move on to putting the wireframes on the screen making sure I understand the user flow. At that point there might be some things that do not look as I would like them to. I am prepared to make changes and adapt the design to different possibilities. Early testing would also help me save time and effort before the prototype gets made.
With many tools available I will not limit myself to just the ones I already learned. I believe in branching out and always learning. If my project could be made better using a language I do not know – I will at least try to learn it. Leaving your comfort zone is a big part of designing.
Conclusion
In this article I brainstormed quite a lot of ideas and came up with new things that I might have not thought about before writing it. UXD is the foundation of the entire project, and it is important to master different techniques tips and tricks to have a solid base for further work. As a complete beginner in the field, I understand how valuable results of various activities are to the designer. Data make designing more efficient and to the point. Seeing and understanding information based on research is the core of good and well planned product.
I think this colour scheme works very well for the streaming service. The black background gives it the cinema feeling. The red logo is easy to spot. At this point the colour combinantion is easily recognizable and pretty iconic.
screenshot from Netflix mainpage
2. Ravelry
This website is a community site and a yarn & pattern database for knitters and crocheters. The black with orange looks modern and interesting for the content that’s on the webpage. I think it’s a great colour combo especially since it may carter to younger people.
3. Canva
Canvas colour scheme is by far my favourite. It uses some really strong purple with contrast of a white background. It’s simple yet effective, looks fresh and modern.
This website is basically a e-book shop by Aga Naplocha, who has been developing her brand independently for more than 4 years. I really like the typography of her website (but that could be because I have a soft spot for sans-serif fonts). I think it looks clean simple and proffesional. It conveys the idea of the site and makes it easy to understand what you’re supposed to do on it.
This site is another example of my love for sans-serif fonts… It’s a clean design and it gets the job done. The hierarchy is achieved by the use of bold, light and thin versions of Elysio. It doesn’t look too crowded even though there is a lot of information on the website.
This website is probably the most advanced one and not because it has more than just sans-serif. The “blocky” letters sit proudly in the middle of the page. Below the h1 we can see a paragraph in italics. The button “Enter the Guides” is noticeable and highlighted through the use of serif font.
What I love about this website is how simple the nagivation is. There is a “Home” button, a “Create” button to the left and a notification bell icon, messages and an account button to the right. The rest of the website is an endless explore page with pictures graphics and other visual media catered to your interests.
The website also has a search bar in case you are looking for something specific. Pinterest has a very simple colour pallete; white, muted black and the Pinterest Red#E60023.
This website is particualry important to me since it’s about laws of UX. I thought you might enjoy it as much as I do. I really like this website because of the font choices and the colour pallete. The navigation is also simple and easy to understand. The graphics bring in character and add a lot of simplistic value to the webpage.
This website is probably my favourite out of the three. It’s an online store with pottery, clothing and illustrations. The cutesy colour pallette and funky faces places on different pottery projects melt my heart everytime I visit the website. It’s a simple online store with little to no side content on it (no blog ect.). Also I’d like to give a special shoutout to the loading screen.
