#UIExperiments

[kodadigitalmarketingagency]

UX/UI Trends for 2024 That Are Sure To Impress Your Visitors

[getondata]

In this online world your website is the face of your brand or product/service. When a user visits hundreds of websites in a week, it has just a few seconds when it visits a new website. Here are some of the few Tips To Improve Your Website’s User Experience and Increase Business ROI.

[cloneappio]

Here we follow a great deal of design guidelines to ensure an authentic UI experience for our clients. We are an all-in-one ecommerce store builder solution where we develop native mobile applications, PWA, and ecommerce websites.

food delivery app clone

[therezourze]

Best UI & UX Design Inspiration Resources 💹 Improve your design to new level with Design Inspiration! 🧐 Let us know which one is your "all-time" favourite design inspiration resource in the below comment box! 👉follow @the.rezourze 👉follow @the.rezourze Resources Link —> https://www.rezourze.com/design/ui-ux-design-inspiration/ #designinspiration #designexpo #designmatters #designmarket #designresearch #designresources #designresource #uiinspiration #uxinspiration #uxinspirations #uiinspirations #uiexperience #design #designer #designideas #designlife #designstudio #learndesign #creativedesign #bestdesign #webdesign #uiux #uiuxdesign #uiuxdesigner #mobiledesign #userinterfacedesign #creativedesign #uiuxzone #mobiledesign #cretiveart #designspiration https://www.instagram.com/p/CGu9fU2BOQO/?igshid=1aefqyeyvb17j

[sarahbonddesign]

When you go just that little bit over the top with prototyping . . . #prototype #prototyping #sarahbonddesign #designer #design #XD #Adobexd #adobe #artboards #artboard #uidesign #uiux #uxdesign #userexperience #uiexperience #xdprototype #designing #user #website #websitedesign #digitalinterface #interface #digital #boards #designboards #artworking #artwork #learning #xdlearning #interactive (at Sarah Bond Design) https://www.instagram.com/p/B7jh9U_g0hJ/?igshid=xbpqeyrwni45

[interfacedesign-nicolenughe-blog]

Additional ~ UI Experiments ~ Screen Sizes 

After experimenting a a few different screen sizes it was evident that the website is best viewed on the Chrome browser and on a laptop screen around the size of a 13 inch. ~ This has been shown in the last image. For maximum experience I would also recommend viewing the website in Chrome and maximising the screen via the green button. :) 

[interfacedesign-nicolenughe-blog]

UI Experiment ~ Different Screen Sizes

125% ~  When viewing TTE website on a Windows 21inch desktop there were a few issues that occurred. The first issue was that the website had to be viewed at 125% and the second was that some elements weren't where they were meant to be when view on a laptop. This was because the measurements were out of proportion as I had designed everything for and on a 13inch Apple Mac. 

[interfacedesign-nicolenughe-blog]

UI Experiments ~ Different Screen Sizes 

Normal Viewing: Command 0 ~This is what TTE website looked like on a 27inch screen viewed at 100%. As shown the background image hasn't maximised to fit the screen. This may be due to the html and css set up as I have purposely created the website to fit laptop screens. In the future I may change this factor and include other screen sizes to create a more comparable website. 

[interfacedesign-nicolenughe-blog]

UI Experiments ~ Different Screen Sizes ~

175% ~ I noticed when viewing my website on a 27inch Apple computer I had to maximise the screen to 175% in order for it to take up the whole screen. This was because I designed the website for a laptop screen. When viewed on the 27inch I noticed that everything still worked and the website was actually fine, other then the screen viewing increased. 

[interfacedesign-nicolenughe-blog]

UI Development & Experiments ~ Coral Interactive Chart ~

Through the use of Java script I was able to achieve my vision of creating an interactive chart that would enhance the users experience, connecting  between themselves and my website. 

The first image is of my html and how I’ve had to insert each element into the web layout. The second image is of the css that was relevant with the making of the coral chart. This is where I positioned each element directly, one by one, to match the design layout of my Illustrator wireframes. The last image is of the Javascript that was used to create the interactive clicking. 

[interfacedesign-nicolenughe-blog]

UI Development & Experiment ~ Interactive Charts

This video showcases my second interactive chart of how the issue of Overfishing is affecting our coral reefs. The first button is of 2000 and the coral to the right of it is looking alive and healthy. The second button is 2005 and this is where the coral changes colour. This colour change represents the impact of overfishing and how its affecting reefs around the world and in particular The Great Barrier Reef. The third button is 2015 and this too shows how overfishing and destructive fishing practices are affecting coral reefs as the coral has become whiter and has minimal colour. The last button, “button 2050″ represents what the future holds. This is basically suggesting that if we don’t act now in the near future we quite typically won’t have any coral reefs and The Great Barrier Reef will have been just a memory. It will have been complete whipped out. This is represented through the coral changing its colour from orange to completely white (death). 

[interfacedesign-nicolenughe-blog]

UI Development & Experiments ~ Interactive Charts  ~

To create this interactive chart I firstly structured its layout through html and used the css to determine all of the elements exact positions. With the help of Javascript I was able to create a clicking interactive element and seen through the video and evidently displayed through the third image. 

[interfacedesign-nicolenughe-blog]

UI Development & Experiments ~ Interactive Charts 

This video showcases my first interactive chart about Overfishing and who in society understands, has an idea, trying to stop it and people who don't think its important. As more people understand it is an issue I wanted to help that percentage and create a website that can cater for their needs and provide them with information and data, and ways they can prevent the issue and be apart of the solution. This website will also provide information and create awareness to the percentage that have no idea about the issue and hopefully change their perspective about it. 

[interfacedesign-nicolenughe-blog]

UI Experiments ~ Parallax Scrolling 

This Parallax Scrolling video demonstrates how a user visiting my website would navigate their way through each page. As the user scrolls the text on the pages slightly move down with the scroll. The navigation bar also uses parallax scrolling as when the user chooses a page number the screen automatically scrolls. Overall, I’m really happy with how the the scrolling turned out. In the future incorporating some sort of faded transition between each page may increase the websites interactively, but for the amount of time I had to produce a 12 paged website I am still really happy with the end result.