Categories
Uncategorized

All About UX

Over the past 20 years, user experience has been growing significantly. If your new to UX design or you aspire to get into this expanding industry, here, in this article, i have written about the top 10 skills that will help you becoming a better UX designer.  Before delving into the nitty-gritties of UX, let us first understand what the role itself entails…

What is UX?

The role of a UX designer, is the process that a team of designers take, to make the experience of different products that users engage with more meaningful and significant. Which means designing the entirety of the process and making it more valuable for the user’s needs. This involves integrating the product, including aspects of branding, design, usability and function. Think of some of your favourite products; iPad, iPhone and Apple watch, these are all designed to provide fun, pleasure and efficiency as well as product consumption. A good UX designer meets a particular user’s needs in the specific context for the product. They consider the Why, What and How of the product use. The Why involves the motivation for the product. Do they relate to the task themselves that needs to be performed? And to the values and views the users share when associating with the product. The What addresses the functionality of the product- what can users do, with this specific product? Lastly, the How relates to the design functionality- as well as this being aesthetically pleasing, is this product accessible?  UX designers, always start with the Why and then move onto the What and How.

The difference between UX & UI

It is important to understand that UX and UI both go hand in hand; you can’t have one without the other. However, possessing UI design skills is not mandatory to become a UX designer and vice-versa. Both roles require different skills with separate tasks. The main difference is to understand that UX is about the user’s experience, whereas the UI design is about the products interfaces look and function.

A UX designer takes the initiative to understand the process of a user’s entire journey just to solve one particular issue. By asking questions such as, how straightforward is the experience? In other words, will the user be able to easily understand the product. A lot of their work focuses on finding out what problems users come up against and how a certain product may help them. They will conduct extensive user research to find out their target audience and what their needs are in relation to a certain product. They focus on information architecture and what features the user may need, eventually creating a wireframe.

After receiving the wireframe, the UI designer steps in to bring the paper to life. The UI designer then maps out all the visual aspects including touchpoints that the user may encounter. Whilst scrolling through a page, the UI designer influences the designs of the page itself and other aspects such as an image gallery. The UI designer focuses on the details of making the UX user journey become possible. The UI designer role is not to just aesthetically please but making the page more accessible and inclusive. Asking questions such as what colour paintings will help cater to blindness? To summarise:

  • UX comes first in the development process followed by UI
  • UX design helps identify user problems, UI design is about creating intuitive, aesthetically-pleasing, interactive interfaces.
  • UX can be applied to any product or service whereas UI only applies to digital products and experiences.

Must-Have skills for a UX Designer

In order to become a great UX designer it is important to have a broad-range skill set. This includes having a soft skill set, industry skills and crossover skills.

Soft skill set: include having communication skills and collaborative skills, along with having empathy curiosity and critical thinking. These skills are not what usually are taught but often inherited in other work or life experiences, which will be beneficial with continuous refinement.

Industry skill set: this skill set is often learnt from attending a UX design course, boot-camp: user research, UX writing and many more.

Cross-over skill set: this skill set often takes place over time and constant dedication in studying and opening the learning horizon. This skill set includes research, analytics, customer service, coding and web development.

10 must-have skills for UX designers

So earlier in the article, I write about the skills you have to acquire to become a good designer. Here is a list of 10 skills; in no particular order.

  1. Wireframe and UI Prototyping-

Proto-typing is a great way of understanding key functionality of your design, before being built by developers. Prototyping allows you to test those assumptions you arrive at from your user research. By creating this prototype, you can then validate the accuracy with user testing. It helps you catch mistakes before the coding takes place and has to be corrected. So, using this technique is a best way to start and good practise to have.

  • User Research-

Before finalising a product, UX designers meticulously conduct research and well thought-out plans and information. UX research can be useful for both user research and user testing. The user testing, identifies target audiences, creating user persona’s, and gathering data to make informed design decisions. The user testing, involves creating prototypes and wireframes to test on users as well as carrying out user interviews, and performing website heat maps.

  • UX Writing-

As well as coding, writing is the disguised champion of UX; which shouldn’t go dismissed. Having a brilliant coding background is great but nurtured writing is a talent that can create a brilliant user experience. When searching through your phone, ipad and laptop, you will experience on several apps, the use of perfectly crafted words.  UX designer skills cover information architecture, which determines the order in what your content is displayed to your users. UX writers also creates copies that speak to your users mental models which helps them understand your product better.

  • Collaboration-

“Rome wasn’t built in a day, but they were laying bricks every hour-Unknown”

Unless you know how to code, design, manage projects, understand product and marketing, you’re going to need to collaborate with others in the design process, especially if you want to be successful. Collaboration is an important trait to have as a UX designer as it helps you communicate to your clients to ensure the result of the product meets both business goals and user expectation.  This is your opportunity as UX designer to work in other areas and apply what you have learnt with different people whose skills will complement your own.

  • Visual communication-

The heart of UX design involves being well versed in visual communication. Being on top of your UI design skills will help you when you need to create interactive prototypes and mock ups.  In design, visual communication covers everything from white spaces, visual hierarchy, to making elements look clickable, so the user doesn’t feel the need to follow a written guide/ instruction.

  • User Empathy-

“True empathy requires that you step outside your own emotions to view things entirely from the perspective of the other person”

To be able to put yourself in someone else’s shoes means you can also understand their problem. Once understanding one’s perspective, solutions follow naturally. That is why empathy is a vital skill to inherit in this field. When disconnected from the user’s experience and needs, it can create a dreadful level of proficiency. To build empathetic skills with the correct research and data, can help comprehend the user’s requirements.

  • Interaction design-

Creating visually beautiful designs is great but another thing is to be able to understand how users may interact with the design. Creating interactive prototypes are a great tool to combine when inventing interactions, but these interactions should be able to help your user determine something simple as a scroll or a swipe.

  • Coding-

Learning languages such as HTML, CSS, Java-script and jQuery can help you understand from a technological perspective for your development as a designer. A world that is aching for tech designers, UX designers learning these languages may be the key.

  • Analytics-

An app prototyping tool, not only allows you to create the apps you want but better yet, test it. If you want to know how well your design will perform, Analytics is the best option. Analytics can help you understand your design and the user. Even more importantly, you can understand the relationship between the product and the user. Testing the performance of your product will rely on your understanding of numbers, percentages and ratios. The trick is to know that the numbers are there to help you, so do not be afraid to practise getting better at this.  Applying analytics to these designs will help you with better designs with the support of real numbers. Having a foundation of data will help perfect your product.

  1. Communication skills-

Lastly communication skills, public speaking and presentations will benefit you as UX designer as trying to convey design ideas to non-design people is hard- but this will escalate when trying to add investors into the equation. Grasping communication skills is a must, knowing how to present and speak confidently to audiences can really help avoid pitfalls whilst making a positive impact.

The UX industry is a rising field and is more and more important as each year passes. Up-skilling can make this rewarding career a dream come true. Do you think UX is for you?

Sources:

https://www.justinmind.com/blog/10-must-have-skills-for-ux-designers/

https://careerfoundry.com/en/blog/ux-design/am-i-a-good-fit-for-a-career-in-ux-design/

https://www.interaction-design.org/literature/topics/ux-design

https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

Categories
Uncategorized

Revisited Site

My original site, used a mixture of beige colours, giving it the neutral feel and look that most young women wear as an accessory or clothing. As my target audience for this site, was mainly for women aged between 20-35, I decided to keep the essence of the colour scheme which gives it a very luxury feel. I love the idea of having a gallery of clothing and shop-wear, as this would be a draw in for most girls wearing the pieces, especially because it is an independent store. So I decided to keep the layout the same for the two pages. I changed the “about” page to look similar to the “contact” page as the “contact” page had a background colour of a lighter brown, bringing the pages and colour to look more in tune with one another.

Changes-

The first change i decided to make was to the animation of the pictures, going across the page. Although, I got positive feedback on this slide show, when viewing it from a mobile, the pictures were moving fast, and some of the pictures did not fit in line with the desktop screen and sometimes mobile. You could not stop and start the slide show, so if users wanted to view a particular image, it wouldn’t have been possible. So i decided to add some javascript, making the animation fit into a div container, allowing the user to have full access on each picture. Also, I added a caption of “independent luxury vintage store” to tell the users that this is not a e-commerce site. Originally, I had an animation that typed, visit us in store, but I felt it looked misplaced in the design aspect and got rid of it. The Javascript was used for the dots container and also the arrows, to be able to move the picture from one slide to another. If a user for any reason does not have Javascript available on their device, they will not be able to see the slideshow. I did not know an alternative for this, as I was following many tutorials for this specific feature. So for the next time, I decide to use Javascript on this slide-show I am going to find a substitute. However, when using Javascript on the “contact” page, I have an alternative. For the time feature it would change; to the id I used called welcome.

Moving forward, I made all my files “.php” and used the head, with the meta tags and style sheets, the header, with the navigation and the footer as php includes. This not only helped the coding look more lean but helped organise my files and amend things quicker.

As the layout, on some of my pages are very similar, I used php; for the user to acknowledge what page they are on; using the echo active syntax. I also added accessibility in my html for users to be able to skip to the content and navigation.

I added one more accessibility, in the footer, to skip back to the top of the page. In the footer, I decided to get rid of the contact details that i had, from my previous site, as I felt it looked very messy and pushed in together. I always tend to struggle with footers, and going forward I definitely want to gain an insight on how to create a better footer with more structure. In terms of layout, I also changed the images on the main page from floats to grid. This made my gallery of pictures better with responsiveness than floats. However, on the “about us” page, I changed the flex-box layout to floats, so i could control more of the spacing. I, then changed back to flex-box when making my website responsive; when getting to a certain break-point. I did this so the paragraphs remain in place. When creating my website, I did make the mistake of not designing for mobile-first. This, then made my life harder when trying to down-size and I found the responsiveness to be very tricky. After many hours of things breaking, I finally managed to make my website fully responsive for mobile devices.

After many attempts, I, also managed to create a custom 404 error page. Due to it not working till the very last minute- the design for the custom page was very plain, and I will revisit the design at a later process. I, also did not change much on the SEO, as I felt the keywords were appropriate from the beginning. Lastly, I managed to add a favicon to the website, but I feel images and svgs are still something i am very new too and still getting used to.

Going forward, I would still make several changes to the website. Such as making the navigation, into a hamburger menu, adding a better logo and adding more links to social media.

Overall, I am pleased with the result, considering, I have zero experience in neither design or coding; but still have a lot to learn.

Categories
Uncategorized

CSS ANIMATION

CSS-Animation, makes web elements within the HTML-file easier to animate, eliminating the need for Javascript and Jquery; it is purely CSS. CSS-Animation works hand in hand with a property called keyframes. Keyframes are a set of rules that go in conjunction with CSS, helping the browser understand what exactly to do with the animation.

Before starting on keyframes, it is important to understand, on how to get the animation working. This is achieved with the properties of, animation-name, duration, delay, iteration-count, direction, timing- function and fill-mode.

Each individual property, is key when trying to make the animation come alive. Beginning with, giving the animation a name. This name could be anything from square, to something as silly, as lemon (but a trick I keep in mind is that the name, should resemble the description of the animation, as this could be handy to you and other developers that may want to access your files later). After setting the name, give your animation a duration that you want it to play. So, if you have set your animation a colour and you set your duration to 4s, the colour you set at 50% on your keyframes will play at 2s. Where-as the iteration-count specifies each time the animation is played until the next value comes into use. The default setting is one, but you may want it to play twice, so the duration would become two, or you want it to play consistently which in that case you would set the property to infinite. You may even want to add a delay to the animation before it starts, so make sure to set the correct amount of seconds, that you want it to play.

The next property I would like to speak about is the animation-timing-function. This element specifies the movement of your animation. There are four functions that can help you identify on how you want the animation to move when you play. The most common ones, that are used, are linear, ease in -out, steps and cubic-bezier. Now linear is quite simple where the animation plays forwards, whereas ease in-out is just the animation easing inwardly before continuing to play forward. Whereas the steps is a block movement as though the animation was walking. For example, if you had an animation of a person walking to the shops, the shop might be the 6th step, so you would set your animation to 5 steps, this varies on where you want your animation to play until and how many steps it would take to get there. Lastly, there is cubic-bezier, this property, helps you control the timing and the transitions of the elements when moving. (this is a very handy website to help you set your cubic element ” https://cubic-bezier.com/#.17,.67,.83,.67 “). The initial way to do this, is controlling the four perimeters you have set to your cubic value. There are several websites that will automatically generate the value for you; one example being, the website I have mentioned above, just simply copying and pasting the value that the website has automatically set for you, can help you test and play with the movement. The next property I wanted to cover is the animation-direction. In simplified terms the direction can be forward, backwards, alternate and alternate-reverse. Alternate is forward first and then backwards and alternate-reverse is backwards first and then forwards.

Next, I want to cover the property named “animation-fill-mode”. Now at the beginning of the article, I wrote about “keyframes”. This is when the keyframes property can really come in handy as the animation-fill-mode will only play, if you have set your keyframe rules in place. Example being:

@keyframes square{

0% {transform: translateX(0px);}

100%{transform: translateX(700px);}

}

Animation-fill-mode, helps you specify, where you want to position your element after it has finished playing . So in my 100% value above I have moved my element 700px along the “x” axis. If I wanted my animation to remain there, I will set my animation-fill-mode to “forwards”. As forwards follows the set of rules of 100% and the “backwards” value follows the rules of 0%. If I now change my 0% value to translateX(-10) and want both rules to take affect, I would then change my animation-fill-mode value to “both”.

Now, after declaring all the property values I have mentioned throughout this article so far, the presentation of my CSS sheet should look something like this:

animation: square 4s linear 2s infinite alternate backwards running;

This makes the sheet more tidy, presentable and readable.

Finally, I wanted to cover some more points on keyframes. Above in this article, I have written attributes under the name of transform. The transform property, allows you, to visually manipulate the shape by scaling, rotating translating and skewing the element. You can scale the shape horizontally and vertically:

transform: scaleX(4);

transform: scaleY(.6);

Despite if the height and width is already declared, we can still give this function two values, which stretches the shape accordingly. An easier way to write this is “transform: scale(4, .6)”. This can also be applied to font-size and padding.

Skewing “skew()”, tilts the element, left or right turning a rectangle into a  parallelogram. Rotating “rotate()”, shifts the element around to a degree’s you set, either clockwise or anti-clockwise and lastly translating “translate()”, moves the element up, down or sidewards.

CSS-Animation, is a great tool to use, without the need for any other languages and once practised, you can achieve a lot of visual designs. A website that helped me gain a better understanding was ” https://css-tricks.com/almanac/properties/t/transform/ “. Once, you have understood the basics of CSS-Animation it can be a lot of fun!

REFERENCE FOR SEMINAR-

Dev Dreamer. (13 Nov 2019).#32 CSS Animations – CSS Full Tutorial[Video].YouTube.https://www.youtube.com/watch?v=PjUCq04ebVA&list=PLsc3Otf-1dvNeHg22d34e8lxp30hMcxpc&index=9&t=252s

REFERENCE FOR BLOG:

Sara Cope.( Sep 6, 2011).Transform.Available-At:https://css-tricks.com/almanac/properties/t/transform/

Lea Verou.(No Date).Cubic-Bezier.Available-At: https://cubic-bezier.com/#.17,.67,.83,.67

Categories
Uncategorized

Paris’s 3 Favourites on Surfing the Web

Facebook- https://www.facebook.com/

Facebook is a social media platform which allows you to share pictures, videos and posts. Being able to make it feel like part of your day to day life. As well as connecting you to people you already, Facebook provides a platform for you to connect to new people, forging new relationships. Beyond the relationship of friends, acquaintances and strangers, Facebook has a new strategy allowing brands to connect with consumers. In addition to brands, consumers can also sell items from the tab “Market Place” from the comfort of their own home, such as second-hand products of technology, furniture and clothing. Facebook has different tabs allowing you to do different things. Gaming, following certain gamers and watching how they play, as well as you playing games. Being part of an individual group, if for instance, if you like reading, join a book group, people post pdfs of all sorts of books. It is almost like a support system, of like-minded people, which can also help if one suffers with mental health. Lastly, you can watch videos, from the pages you subscribe too, for example, I love Fenty Beauty, so I would be, one of the first to see an update of a new product release.  Facebook, helps you stay connected with friends by reminding you of different upcoming events you are invited too. Finally, one of my favourites, is the option of donating to charity. One year ago, a cousin of mine passed away from testicular cancer, and from the help of Facebook, we raised £4000. Facebook is an amazing creation and the development never stops

.Canva – https://www.canva.com/

Canva is an online graphic form that’s extremely simple to use. They offer mountains of different templates that can help you create visuals and help people that are unskilled in the magic of graphic design. You can use Canva for creating logo’s, Facebook posts, infographic, invitations, Facebook cover, card, flyer, Instagram stories, brochure’s and much more. In addition to an attractive free plan they also offer a paid plan allowing you to have more features and accessibilities.  When first entering the website, Canva have five different tabs. Firstly, Home, as you scroll down, Canva shows you the different options of designs you can create varying from posters to animated social media to videos. This is particularly useful for social media advertiser beginners, as my friend is the one, who introduced me to this website, when she began her journey. The second tab is the template, which is just minimising every design, you can use, making it easier to find and choose the one you prefer. The third tab is the options of different features, Canva provides for you, such as providing textures for designs; if a colour is too flat and boring, you can choose a wide variety of textured backgrounds. You can crop, trim and precise compositions. You can create soft, dreamy designs and keep your photo layout crisp with design grids. There are variations of different features that Canva provides with the price plan of £0.  The plans tab shows you the different benefits you can receive depending on how much you are willing to spend, also allowing you with a free 30-day trial on each plan. The last tab is “Learn”. In this tab, Canva, shows different tutorials on how to use the diverse tools they provide and teach you on how you can use them to your benefits. Canva has provided easy interface, continued product development making it into an instantly functional website.

Pinterest- https://www.pinterest.co.uk/

What drew me to this site, is how aesthetically pleasing it is, I am a very creative individual that sometimes has projects that need eye-pleasing images. Pinterest is a unique site that provides pictures that is a great opportunity for business. Pinterest is an excellent tool to help increase links back to your website, if you like a certain content you can pin the image which then leads to sharing the images in small groups and then the audience is likely to follow your content and links. Another beautiful thing you can do on Pinterest, is use it to see what is trending now- which allows you to follow anyone that follows you and have a first-person look into their mind. You can then use that position to see any offers and promotions. It is a visually-stimulating site that allows you to see the experience. You can up-sell food, clothes, holidays, destinations and architecture, just by one image. What is lovely about the website is as you scroll down the website’s pictures automatically change to different content on your likes and inspiration.  Pinterest also comes as an app, which can also be useful if you would just like to scroll on your phone, although the website is designed marvellously. It is a simple, easy site to use site, that says exactly what it does and has other beneficial factors to it too.  

Categories
Uncategorized

Paris’s Blog- 3 Useful Tools

Straightener-

The tool itself is a flat iron designed to originally straighten your hair with various heat settings. The heat-settings vary from 180-220 degrees assuring quality use for each individual hair types and textures. The straighteners have different merits to benefit the user. One, having a bright red light, to show the operator that the plate is hot and ready for use. Secondly, the straighteners have a 200cm cord, allowing the consumer to move further towards a mirror, which is beneficial for different heights and also if a plug is not accessible. The cord is rotatable, allowing the product to be more flexible. It is cleverly designed for the hot iron plate to be at the top, with a protective plate guard-ensuring the user to be safe when handling the product. It has an automatic timer- which switches off, after 60 minutes pre-cautioning no fires. Although this product was made purely to straighten- it has multi-functioning qualities that benefits the user. This includes, not only straightening, but also with experience, being able to curl and crimp the hair- which is cost efficient if a client cannot buy multiple tools. Straighteners come in several sizes depending on hair thickness and length. The tool is travel friendly and proficient.

Ipad-

Developed by Apple, the Ipad is a tablet computer. By scale, it is smaller than an average laptop but significantly larger than a smartphone. This device, has many benefits for its operator such as running third-party apps, which can be downloaded from Apple’s App Store. As the screen is much larger than a smartphone, Ipads can include more user interface features that would not fit within an Iphone app. Therefore, the graphics and productivity are developed often. The Ipad, unlike an ordinary laptop does not include a keyboard or a trackpad, but instead has a touchscreen interface, which can be used to control the device. This can be advantageous for clients such as students and businessmen as it is travel-friendly and portable. The Ipad’s screen size makes it ideal as an e-reader and has the useful app of Ibooks which allows you to download electronic versions of books from IBookstore. Books can be read one page at a time in both portrait and landscape mode. The Ipad has a colour screen, allowing it to support art books as well as children’s stories. All Ipads, include Wi-Fi which can be used to surf the Web, checking emails. It also has a front-facing camera both rear-facing and front-facing. You can use this feature to FaceTime, Skype and Zoom call, loved ones as well as conferencing with other Ipad and Laptop users.

Samsung watch-

This stylish watch has been designed for three purposes. Staying healthy, looking good and staying connected. With this convenient, multi-functional device you can have different experiences in comparison to a generic watch. Not only is it aesthetically pleasing, it is versatile. It can be worn to a business meeting to being used for running. The lengthy watch has up to 45 hours of battery life which can manage calls and texts.  This watch, gives you freedom from your phone and wallet allowing you to make purchases just by the flick of your wrist. It can track your progress of exercising, allowing you to make the most out of your work-out, from hitting the gym, to the parks and to the pool and it will help you achieve your goals. It can monitor your health by tracking your heart-rate whilst out for a run, following your route, using the built in GPS. Additionally, it can learn about your sleep routine and has a built-in alarm to help you wake up. The charging is also made simple and effortless by setting it down on a charging dock. This watch, also has your Spotify playlist ready to listen too, you can take your music on your travels by connecting to your wireless headphones without having the inconvenience of continuously reaching for your phone. This watch is wearable computer in the form of a watch, quick, easy and accessible.

Categories
Uncategorized

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!