CSS parallax scrolling is a technique where background content moves at a different speed than foreground content. It quickly adds depth and the illusion of motion to any web design via scrolling. Something that was once only achievable with JavaScript is now quickly and commonly used with pure CSS. In order to achieve this, the user must add properties such as transform, perspective, translate, and scroll-behavior.
How does the CSS scroll() function work?
The scroll() function is part of CSS Scroll-Driven Animations, introduced to allow smooth animations to move along with the users behavior and interaction. Integrating scroll() with CSS keyframes and transforms, creating parallax effect can be simple without JavaScript.
Above, the scroll() function is applied to the parallax animation via the .background making the background move as the user scrolls.
When is this function useful?
As previously mentioned, this function has been around for many years, and there are no future plans of it leaving. CSS parallax scroll() function can be used to show statistics, break up sections of text, and moreover make sites more intriguing to the user. Using a scrolling technique to create animations helps tell a visual story to the user. It suggests where the important information on the site page is and engages them to continue to scroll through the site. However, it is important to use sparingly as it can become overwhelming for the user and slowdown performance and usability.
Where was this first seen?
This form of layered animation was originally seen in traditional animation in the 1930’s, in early versions of 2D animation. It then became popularized in animations within video games in the 1980’s. While still very limited, these animations all began with engaging the audience and gaining greater entertainment. The parallax scrolling within web design did not come until the early 2000’s! It first required JavaScript in order for it to function, however in the late 2000’s CSS parallax scrolling was born and has been progressing ever since.
Let’s break it down!
Create a scroll container in HTML using a .wrapper class
Add images and text
Apply CSS properties
Example
Above, the .wrapper acts as a scrolling container. The .parallax class applies the needed depth effects and the .content allows the user to scroll normally over the background.
Pros
Engaging and visually appealing
Creates depth and smooth transitions
Keeps users interested
Cons
Can slow down page performance
Not always mobile-friendly
Can be distracting if overused
Conclusion
The CSS scroll() function is a simple tool for creating parallax animations and adding visual depth without relying on JavaScript. It is an amazing example of the development of CSS over the past 20 years. By using properties like transform, translate, and perspective, designers can create smooth scrolling effects that enhance user experience. However, just like any animation on a web page, mindful implementation is necessary to maintain both performance and usability.
I created a small business website for a hypothetical cheese shop in Canary Wharf. In the creation of the project I started out with research. I researched other small business sites in the area and what was and was not working within them. Checking what information was usually included and where it was included on the page. From there I began my own sketches and design research on pinterest.
Within my research, I found that the simpler accessibility to the information the better. Adding both a footer and a header with clear navigation bar and constant accessibility for contact to the shop was something I found key in other small business sites.
Another vital piece of information I found on the forefront of my competitors’ sites was opening hours. I included the opening hours on both the home page and location page. I did not want to overwhelm the users with information, so I gave the option of reading more on the shop in the about page, however it is not necessary for the user to read it if they are not interested.
I went to pinterest for design inspiration and created a board that collected mainly bold hand-written fonts and some primary colors. I decided to solely use black, white, and a honey mustard yellow (#d19b06) on my site. These are very simple and the yellow is dark enough that it is still legible on the screen. I also chose this yellow as it is a cheese color and so it follows in theme with the site without being too on the nose. I also kept the palate this simple with only a bold but soft font for my header 1 in order to keep the site more modern. I wanted to modernize it while still keep it cozy and have. I also think that using helvetica for the rest of my fonts compliments the header font quite well. Making it modern and most of all accessible.
While I did work with some people in the class on this project, I think that moving forward I am going to make a greater effort to work with my peers on future projects. At this moment we can all learn from one another in different concepts and it will lead to each of us being stronger web designers. My biggest takeaway in moving forward in creating sites is simply writing out the problems to be solved is key to creating a quality functioning site. And also being able to let go of some original design plans. As someone who comes from a design background letting some design layouts be fluid in another way is an adjustment but also exciting to work with in CSS. Attached are some illustrations included in my site!
User Experience Design (UXD) is a crucial aspect of creating meaningful, user-focused digital experiences. I am developing a website centered on my users’ needs but also have optimal functionality. I am creating firstly for my target audience of Millenials and Gen X but aim to create something accessible for everyone.
My major project must have a very broad spectrum of user personas. Just like all websites it is important to keep in mind that anyone could be accessing your website, but with my particular website of wine bars in East London I could be reaching various ages, cultures, genders, income; the list goes on. Similar to the user persona workshop project we did in class with Chris How, I am going to work to create a handful of users with broad needs so that I am not just fulfilling one category of people or just the audience I know personally (Bruton). In doing so, I can broaden my horizons in research and make the site’s accessibility more comfortable to the user in my research but hopefully simplifiy actions to help other users along the way.
Strengthening the Unique Selling Point My project’s unique selling point (USP) is its focus on creating a centralized platform dedicated exclusively to wine bars in East London. This concept does not currently exist. While blogs or search engines may list a handful of wine bars, they often fail to provide comprehensive, well-organized, and detailed information specific to this niche. My platform fills this gap by making wine bars more accessible and offering users an alternative to generic search results, often highlighting only the most popular venues or pubs that may not align with their desires.
By curating a list of wine bars organized by neighborhood, the platform ensures that even smaller establishments with less SEO visibility can reach a wider audience. This benefits users, who gain access to a broader selection of venues, and wine bar owners, who can attract more customers and grow their businesses. By combining thoughtful design with a clear focus on user needs, my platform offers a solution that simplifies the process of finding wine bars and fosters a stronger sense of community within East London’s vibrant wine culture.
Journey Mapping Journey mapping will help me understand how users interact with my Major Project site. I will be able to identify users pain points by going through their step by step journey. For instance, if my site includes a feature for exploring wine bars in East London, the journey map will help me visualize how a user might discover the site, browse for options, and eventually decide to visit a specific wine bar. I will be able to pinpoint missing information or unclear navigation. Addressing these issues before launching and anticipating multiple users perspectives, having others test out my site beyond my personas, will create a more satisfying experience for everyone.
Example Customer Journey
Empathy Mapping I will be creating empathy maps as well as journey maps so that I can address not only the logistical but also the emotional side of the user’s journey. I will explore what the users might think, feel, say, and do when using the site. Taking into account the user demographic will also give me a deeper understanding of the emotions, needs, and motivations of my target audience (Brown).
Within this, I constantly need to come back to my personas and maps I have created. How might I reframe the question and explroe the problem further. Using “How might we” questions will help create new solutions to problems and pathways that might not have seemed obvious before or that will align better once I revisit issues within my design. Seeking out my competitors sites and looking at their designs; finding what is and is not working within them will be key to my success.
User Personas User personas will serve as a foundational tool for defining and designing for my target audience. By creating detailed personas based on hypothetical users, I can better understand the needs, goals, and behaviors of people interacting with my website (Bruton). For example, one persona might represent a young professional looking for trendy wine bars to visit with friends, while another might reflect an older wine connoisseur seeking more traditional venues. Considering each persona within my target audience will help me tackle what features are necessary to my site. I will be able to make guided decisions about design and expectations by remaining user-focused and addressing personas challenges, motivations, and needs. I am designing for will use the site but how also work out the flaws to make it intuitive and inclusive for others.
Persona Empathy Map
Seeking Out My Competitors Researching competitors will provide valuable insights into industry standards, design trends, and user expectations. While there may not be an identical site focusing on wine bars in East London, similar websites exist—either focusing on other cities or showcasing comparable themes, such as food and beverage guides or local event hubs. Analyzing these competitors will allow me to identify strengths in their designs and functionality, as well as potential weaknesses or gaps that my project can work to address.
I will examine how competitor websites organize their content through search filters, map integrations, or curated lists. With that I can see what content they consistently add to their sites so that I might note to add it into my own. Tracking what works—such as clear navigation, engaging imagery, or useful customer reviews—will help me adapt my site to users needs. On the contrary, looking for pain points like poor layout, lagged loading, or general inaccessiblity will be key to note and avoid (Paget).
In future critiques, my peers will be able to point out flaws I may have within my path and personas and vice versa. I will be able to gain my peers’ point of view and their own persona on how they might approach the maps–therefore, I will create further questions to further my design. It will help with efficiency in going through the issues I would like to work to solve, gaining their perspective on solutions and my own blind spots.
Introducing Mental Models in My Design Process Understanding mental models is a key part of my design process because they directly influence how users interact with digital platforms. Keeping in mind users expectations based on their previous experiences and how it might align with my website with these models to ensure it feels intuitive and easy to navigate. During the design phase, prioritizing familiar pattern layouts, such as clear navigation menus, recognizable icons, and search filters, will simplify the layout and help users quickly find the information they need.
A user exploring wine bars will likely expect features such as location-based maps and detailed descriptions of what is happening and included at each featured wine bar. Including a filtering option for specific preferences like ambiance location in a simple manner will be key for a users success. Understanding mental models of easy accessibility, I can create a website that meets user expectations while maintaining quality design. Enhancing usability and making users more likely to return and recommend the site to others.
Mental Models User experience is key to a site’s success. It needs to look nice, but if it is not compatible with users’ needs, no one is going to want to revisit it. Engaging mental models will bring users’ prior experiences into the site, so navigation is simplified based on assumptions of where things should be located and what should be included. Anticipating users’ needs in functionality is critical to ensure my site is intuitive and revisited.
For my major project, I will analyze the mental models of potential users to align the site’s structure with their expectations. Visitors to a site structured around wine bars are most likely seeking features like location maps, curated lists, and detailed descriptions. By incorporating these elements in a predictable manner, I can reduce the confusion users have in achieving their goals. If users expect to find filters for wine types, ambiance, or pricing, but those options are missing or hard to locate, they may become frustrated and leave the site.
I will follow common web design conventions to further align with mental models, such as placing navigation menus at the top or side, ensuring prominent call-to-action buttons, and using universally recognized icons. At the same time, I will carefully test any unique or innovative features to ensure they are easily understood. Balancing user expectations with my design ideas, I will be able to create a website that feels familiar and engaging; enhancing both usability and overall satisfaction.
To make the platform truly valuable to users, I will incorporate detailed attributes for each wine bar, such as price range, wine origins (e.g., Spanish, Italian), and additional services like wine tastings or pairing events. This information will allow users to find venues that match their preferences and expectations, making the site a go-to resource for wine enthusiasts in East London. Together, these elements create a project that embraces the local neighborhood and provides users with meaningful and engaging content, fulfilling the feedback’s call for a distinctive and community-centered approach.
Refining the User Experience A core component of my project is creating a user-friendly platform that caters to the needs of both wine enthusiasts and casual wine drinkers. Offering quick and easy accessibility to wine bars in East London. To achieve this, I plan to emphasize the local neighborhood aspect by organizing wine bars into distinct neighborhoods or boroughs within East London. This will not only make it easier for users to find venues near them, but it also does not limit the search to types of wine bars first; excluding casual wine drinkers. Each wine bar will be described with key details such as price range, the origins of its wine selection (e.g., Spanish or Italian), and unique offerings like wine tastings or pairing events. This approach ensures that users can quickly identify venues that match their preferences while gaining a deeper understanding of the unique qualities each bar brings to the table. Being inclusive to multiple audiences invites users to become more involved in the wine industry.
The platform will also include visuals like quality photos and hand-drawn illustrations that evoke the ambiance of each wine bar. Including photos and art will give even more insight into what the wine bars ambiance is, so that the user may make their own conclusion as to whether they would like to visit. Applying these photos to social media will be vital to my sites success as that will draw in a large portion of my audience. Social media integration, including Instagram stories and reels, will offer a dynamic and engaging way for users to connect with the site while promoting special events and unique features of each bar.
With a background in visual communication I understand just how important typography is. Typography taps into our emotions and part of our everyday reality. It conveys a different message about the product or person you are working to show. When printing out a warning symbol you are not likely to type it in comic sans. Or when you are marking signs on the highway you are not likely to use a serif font as people cannot read it quickly. There are many logistical reasons but then there are emotions that are at play. When writing a menu for a dessert shop you may use more lowercase letters and use a script typeface. When writing a book about a war you may write in stark serif letters to show the seriousness of the war or a classical font –depending on the year of the war. There are so many subconscious influences which is what I think I love about it so much. Most important of all, especially when it comes to web design is legibility.
Finding a site with satisfying, clarifying and legible type is chefs kiss! Here are some of my favorite!
Naughty Nancy is a portfolio and design service website based out of Australia. The website has frequently changing colors but the font is consistent and bold yet simple throughout the page. It stays clear and easy to understand as a viewer. Fonts used: Apfel Grotezk and HAL Matex
Anoche Sone is a clothing website thats font plays into the whimsy of the color and actions abilities the user has within the site. Font used: Astloch
Pepperclip Studio is a design studio that uses san serif font throughout there mainly black and white portfolio site so that the user is able to see the work that the studio has created. However, on the home page they include an interactive illustration that produces multiple fonts, showcasing their brand as designers. Font used: Matter and Vulf Mono
This week I learned how to weave my CSS into my HTML code. I learned about the importance of cascading elements and the way and order things are listed in will make a difference in the way they are presented on the screen. I learned about the Eric Meyers Reset CSS, and how it resets the browser back to default styling once implementing the basics of the HTML code.
I learned about padding, margins, content and border and the different ways you can enter and and adjust them in CSS. For example:
If you would like to edit all sides of the padding you can enter all the numbers in a single row under padding either in pixels, em or or rem. If you would like to edit a single side of the padding you can simply enter padding-left: 10px.
This first week of October I became comfotable adding basic HTML into VS code. I learned how and why to add the element <meta charset=”utf-8″> line at the beggining of the html document. This sets it up for binary code layout and the consistency in 8 characters in binary code for it to properly function across all platforms and browsers.
I also learned about HTML file structure and the importance of consistency in file structure. Using proper indentation within the structures of parent child relationships allows for items to be easier to find when looking for things to find. Adding personal notes can also be very helpful to organize work or find edits you need to revisit in the future.
The innovative dish soap bottle stands out for its clever design, merging functionality with user-friendly features. At the heart of its brilliance is the self-closing bottom, equipped with “anti-leak” technology. This design ensures that the bottle remains mess-free, allowing users to dispense the soap effortlessly. When you squeeze the bottle to release the soap onto a sponge, the bottom closes automatically once you release it, preventing any excess soap from dripping or spilling.
This design not only facilitates quick access to soap but also ensures that every last drop is utilized. Unlike traditional bottles where soap can get trapped at the bottom, this bottle keeps the soap ready for use, eliminating waste and enhancing efficiency. The bottle’s ergonomic shape and flexible material make it easy to grip, allowing for a smooth, one-handed operation—ideal for multitasking in the kitchen.
Moreover, the sleek and modern aesthetic of the bottle fits seamlessly on any shelf, making it both functional and visually appealing. The clear labeling of the “anti-leak” feature adds a layer of assurance, letting users know that they can rely on the product’s design for a tidy experience. In a world where convenience is key, this well-designed dish soap bottle is a standout solution, transforming a mundane chore into a more enjoyable and hassle-free task.
Nail Clippers
This nail clipper redefines versatility and simplicity with its innovative design. Crafted for both functionality and portability, this tool features a smooth-swiveling pin mechanism that keeps all components securely together while maintaining stability when in use. Whether you’re at home or on the go, its foldable design allows it to become completely compact, fitting easily into any pocket or bag.
When opened, the clipper reveals a well-thought-out multi-tool setup, including a level, a miniature nail file, and a blunt knife—essential items all housed in one sleek package. This all-in-one approach not only saves space but also ensures that you have everything you need for nail care right at your fingertips; everything organized into one tool.
Made entirely of stainless steel, the nail clipper is also resistant to rust, making it perfect for use in the humid environment of bathrooms. The stainless steel construction ensures durability, so you can rely on this tool for years without worrying about wear and tear.
With its seamless blend of practicality and elegance, this nail clipper is the perfect companion for those who value both form and function. Whether you’re at home or traveling, it embodies the ideal balance of simplicity and versatility, proving that great design can elevate even the most everyday tasks.
Squeegee
Squeegees exemplify great design through their simplicity and effectiveness, making them essential tools for maintaining clean surfaces. The classic design features a sturdy handle and a flexible blade, allowing users to effortlessly wipe away water, soap, or dirt from various surfaces, from windows to shower stalls.
One of the standout aspects of a well-designed squeegee is its ergonomic handle. This ensures a comfortable grip, allowing for extended use without strain. The balance between the handle and the blade is meticulously calibrated, enabling smooth, controlled strokes that maximize efficiency. The blade itself is typically made from high-quality rubber or silicone, providing a perfect seal against the surface, which minimizes streaks and ensures a thorough clean.
Versatility is another hallmark of great squeegee design. Many models come with adjustable features, such as interchangeable blades or extendable handles, making them suitable for a variety of tasks. Sleek lines and modern materials make them not only functional but also visually appealing, allowing them to blend seamlessly into home decor.
They simplify cleaning tasks, making them more efficient while elevating the user experience—proving that good design can make even the most mundane chores feel effortless.
Upon opening this merchandise website, visitors are greeted with a large but stagnant image of the products being sold. It is not quickly selling invidivual products and their sales to you but rather a literal broad image of what they have to offer. The search bar and menu are oversized which adds to the quirky content that is being carried while still being easily understoof The layout is intuitive, making navigation simple users, with bhovering buttons and normal patterns of scrolling on a merchandise website.
One of the key strengths of the site is its well-organized content. Clear categories allow visitors to quickly find what they need, while high-quality images and simple descriptions showcase Tyler’s work effectively. This visual appeal not only captures attention but also highlights his skills in a way that is both informative and inspiring.
Moreover, the website features responsive design, using hovering skills adding just slight movement to the page but nothing overstimulating.
The Equinox website is a prime example of effective design that successfully combines aesthetics and functionality. From the moment users land on the homepage, they are greeted with a sleek, modern interface with black used as the primary color. The use of high-paced visuals featuring people active, personal trainers, and serene environments. While many athletic clubs use brighter colors to show activity Equinox websites reflects the brand’s commitment to luxury and wellness.
One of the standout features of the Equinox website is its intuitive navigation. The menu is clearly structured, allowing users to easily explore various sections such as membership options, class schedules, and personal training services. This user-friendly design minimizes frustration, making it simple for visitors to find the information they need quickly.
The website also employs a consistent color palette and typography that aligns with the brand’s identity. Additionally, the site is constantly reiterating “For those who want it all.” Which points at many things. How their brand is all inclusive but also top teir and almost indulgent in. Selling the user the idea that Equinox is somewhere you could be and get it all.
The simplicity of Café Brera’s website allows layout and the user to find exactly what they need within the navigation bar. The white backdrop makes navigation easy and welcoming. The use of high-quality images showcases the delicious food and drinks, enticing visitors and inviting them to explore further.
The organized structure enhances user accessibility, making it easy for customers to locate what they need without confusion. Highlighting when on a topic within the navigation bar also expresses to the user where they are currently located within the website adding to more accessibility.
Additionally, the website’s color scheme and typography align with Café Brera’s brand identity, creating a cohesive and inviting aesthetic. Engaging content, such as featured dishes and upcoming events. Café Brera has many bright colored drinks and not just coffee which contributes to their brighter aesthetic. The featured imagery is mathing to the theme as a whole with a consitent pop of the same orange throughout the website.
