We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies.
Customise Consent Preferences
We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.
The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ...
Always Active
Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.
No cookies to display.
Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.
No cookies to display.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.
No cookies to display.
Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.
No cookies to display.
Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.
During the research and planning stage, I looked at other record store websites to see what worked well and what didn’t. This helped me get ideas for how the Recursive Record Store website should look and feel. I then created a mood board using Photoshop and Canva. This helped me choose colors, fonts, and images that matched the store’s retro and modern style.
Next, I moved on to writing the website content. I created text for the main pages: Home, About Us, Events, and Contact Us. Each page was planned carefully to give visitors useful information about the store, its products, events, and how to get in touch or find the location.
In the front-end development stage, I built the layout using HTML and CSS. I started with mobile devices first, so the website would look good on phones and then adjusted it for tablets and desktops. I added things like cards on the homepage that react when you scroll or hover, a menu that stays at the top of the page, and a footer that stays visible at the bottom.
I used different design tools to help make the site look good. I used Photoshop and Illustrator to create images and design elements. I also used Canva to design parts of the branding, and I found free, high-quality photos on Pexels to use on the site.
To make the website more fun and modern, I added CSS animations and transitions. For example, when users scroll down the homepage, the content cards move slightly or fade in. These small effects help grab the user’s attention and make the site feel more professional.
Enhancing the Website with JavaScript and PHP
Introduction
While the initial build of the Recursive Record Store website focused on responsive design and branding, I saw opportunities to improve interactivity, user engagement, and maintainability. To achieve this, I incorporated JavaScript for front-end dynamic behavior and PHP for basic content management.
Why JavaScript Was Introduced
JavaScript was used to bring the site to life by adding behavior that feels personalized and informative. Two main enhancements were implemented:
Greeting Section Based on Time of Day Using JavaScript, I created a dynamic greeting in the about us page that changes depending on the local time. For example, a visitor might see: “Good morning.”,”Good Afternoon” or “Good evening” depending on the time of the day
Why? This feature creates a friendly, humanized interaction between the user and the site. It adds a touch of personalization that increases user engagement, especially important for a small business that thrives on community and personal connections.
Dynamic Display of Store Opening Hours JavaScript was also used to display the store’s current open/closed status in the contact us page, based on the day and time. Why? Instead of hardcoding static hours, the script ensures accurate, time-sensitive information. This makes the site more user-friendly and reduces the need for manual updates in the future. For example, a visitor will see:
“We’re Open! Today’s hours: 10:00 – 19:00.”
Why PHP Was Introduced
To make the website more scalable and maintainable, I introduced PHP as a lightweight content management tool. Here’s how:
Modular Header and Footer I separated the header, footer, and navigation into their own PHP files (header.php, footer.php, etc.) and used the include() function to embed them into each page. Why?
Efficiency: Instead of updating links across multiple HTML files, I only need to edit one PHP file.
Consistency: To guarantees uniform layout and structure across all pages.
Maintainability: To reduces time and errors during future content updates.
Centralized Page Linking Links across the site are dynamically pulled from PHP includes, ensuring smooth navigation updates when URLs or file names change. Why? This prepares the site for future enhancements like database integration or user-generated content, transitioning it towards a more dynamic CMS if required.
Conclusion
The addition of JavaScript and PHP significantly improved the user experience and developer workflow. JavaScript provided a personal and interactive touch that invites users to explore, while PHP streamlined content management, making the site easier to update and scale.
How Do We Implement Art-Directed Images with the <picture> Element?
What is a Responsive Image?
The concept of a responsive image is that it is designed to adjust intuitively to different screen sizes by modifying its size and resolution. This ensures the image appears sharp and clear on any screen, whether on a desktop or a smartphone with a smaller screen size relative to a desktop.
Why Do We Need Responsive Images?
Responsive images play a crucial role in ensuring that a website looks good for user experience and that website loading time is not slowed down. The right image size is served based on the user’s device, considering network conditions, which significantly reduces the amount of transmitted data. Making images responsive in this way also makes the website more accessible and reduces bandwidth costs.
Improving website SEO is another reason to consider using responsive images. Most search engines, such as Google, favor websites with optimized images. If you plan to improve your website’s search ranking, you should consider responsive images, as page load speed is a crucial ranking factor.
Common Problems of Non-Responsive Images
From the reasons we need responsive images, we can infer the problems associated with not having responsive images on a website.
Poor User Experience:
When an image is too large for a mobile viewport, it takes longer to load and may result in an untidy layout. This negatively impacts the user experience. Additionally, distorted and cropped images can occur if images are fixed and viewed on smaller screens, further degrading the visual experience.
Performance Issues:
Slow loading times occur when a website tries to serve a large image on a smaller device. Poor optimization leads to slow-loading pages. Furthermore, serving large images to all users, regardless of device, increases bandwidth costs and makes the website less accessible to users with poor network conditions.
The <picture> Element: An Overview
One way to achieve responsive images is by using the <picture> element. However, there are rules for using this element, as it is not applicable in all cases. It is mainly used to achieve art direction. Unlike the <img> element, it provides greater flexibility. It is useful for serving different images for various screen sizes, different resolutions, and different formats (e.g., WebP, AVIF, etc.).
What is Art Direction in Responsive Images?
Art direction involves displaying differently cropped images for different device viewports to ensure the best composition. It is primarily used for storytelling and readability of image context. For example, a landscape image with a “hero” subject on a desktop might have a cropped version on a mobile or tablet screen. To keep the “hero” in focus on a smaller screen, the image is zoomed in and cropped appropriately. This ensures that the image’s context is maintained for all users.
Basic Syntax of the <picture> Element
Let’s define the syntax of this element and explore how to use it.
The <picture> tag is a wrapper that contains zero or more <source> elements. The <source> elements define different image files for various screen widths. The browser selects the most appropriate image from these sources. If no match is found, or if the browser does not support the <picture> element, the <img> element acts as a fallback.
Attributes in the <source> Element:
Media: Allows media queries to determine which image to use based on device size (e.g., media="(min-width: 600px)").
Srcset: Provides a list of images for the browser to select from when a media query matches (e.g., srcset="img-724.jpg, img-140.jpg").
Type: Specifies different file formats like AVIF or WebP, which are optimized for the web. If the browser supports these formats, they are selected. It is optional but useful for optimization.
Implementing Art-Directed Images
Suppose we have a hero image that needs different crops for desktop and mobile. Desktop users receive a wider image, while mobile users get a more focused version.
Example: Image of a Man Bowing Viewed in Different Device Viewports
This method achieves art direction using the <picture> element. By querying the device size, we instruct the browser to use the appropriate image based on the screen size. This approach improves user experience by maintaining focus on the “hero” in an image across different devices without losing context.
The order of media queries is important because the browser selects the first matching condition. You must structure media queries correctly to ensure the correct image is served.
When Not to Use the <picture> Element
You might wonder whether the <picture> element can be used for all responsive images. The answer is no. It should not be your first approach unless you aim to achieve art direction. Several factors must be considered, including:
Screen Density: If the image of a man bowling is viewed on a high-density display laptop, the browser selects the best match (e.g., images/rowing-4``800px 2x).
Network Conditions: If the user has a poor network or preferred network settings, large images may load slowly.
Viewport Dimensions and Image Size: The developer’s knowledge during development vs. the browser’s knowledge during image rendering.
Identifying these gaps will provide better insight into achieving art direction in responsive images.
Conclusion
The <picture> element is a useful tool if your goal is to achieve art direction. It is the best-recommended approach for displaying optimized, art-directed images on various devices.
Action Steps Carried Out for Recursive Record Store Website
Project Overview: I was tasked with creating a website for Recursive Record Store, specializing in new and second-hand vinyl records and CDs. The goal was to support a campaign to attract customers by showcasing the store’s products, highlighting its brand, and providing clear information on how to find and connect with the store.
Tools Used: I used HTML and CSS for this project, focusing on coding best practices and modern design principles. HTML provided semantic structure for accessibility and SEO, while CSS ensured a visually appealing, responsive design. Additionally, I used Photoshop, Illustrator, and Canva to create and enhance design content.
Research and Planning
I began with in-depth research on record store websites to gain insights into the content needed for the site. I identified notable trends, such as the effective use of bright, artistic color schemes to capture attention and convey a creative, dynamic brand image. I intend to incorporate this approach into the website as well.
Using Photoshop, I created a mood board to define the brand’s aesthetic, selecting a retro-modern color palette, typography (Courier Prime and Inter Tight), and imagery from Pexels. I also designed the logo and other marketing materials with Canva and Photoshop.
Contact Us: Contact details with a store location map
Home: Highlights offerings with quick links to other sections
Website Development
I started by creating the structure of the website using HTML elements. This involved organizing the content semantically, following proper rules for headings and indentation to ensure the code is easy to read. I made sure each HTML file begins with the DOCTYPE declaration and the HTML root element with a language specification, followed by meta information such as character encoding and viewport settings for responsive design, all contained within the head section. The rest of the content is included in sections such as the body and footer.
I styled the structured HTML content with CSS, starting with a mobile-first approach to ensure optimal performance on smartphones, gradually scaling up for tablets and desktops. I wanted to make the card section on the homepage interactive to capture the user’s attention and encourage engagement. To achieve this, I decided to learn more about responsive animations. My solution was to implement a scroll effect animation on the cards that require user action. I also styled the navigation bar with a fixed position to give users easy access to website pages, and I styled the footer with a height that locks in after the page scroll ends. I made these decisions with the user in mind, focusing on easy access to important links.
Conclusion
During this project, I gained valuable insights and ideas on how to approach website design challenges. I learned the importance of researching and experimenting, even when it feels like the entire code might break. I hope to improve my approach in implementing these ideas moving forward.
The aim of this research is to determine the need for awareness of environmental degradation among young people, in order to foster environmental sustainability.
In my research, I have found that there is potential for increased participation among young people in addressing the challenges of environmental sustainability in the future. By providing them with engaging tools, accessible information, and opportunities to take action, My research goal is find useful data that can be utilized to create a website that can empower them to become active contributors to a more sustainable world. Their involvement is crucial for driving long-term change, as young people bring fresh perspectives, energy, and a willingness to embrace innovative solutions.
Goals
Primary Goals:
To raise awareness about environmental degradation among young people in an engaging way
I will be making use of an interactive design approach as my audience are young people who needs to be engaged in a fun and less depressing way.
Secondary Goal:
To inspire eco-friendly actions, encourage community participation, and encourage the sharing of content through social media
Objectives
What I want to learn?
Primary Objectives
I want to understand my target audience: I want to learn about their behavior, interests, learning preferences of young people to design content and features that resonate with them.
I want to identify the most effective communication strategies: Determine the type of content, tone, and interactivity that will engage and educate young users effectively.
Establish core environmental themes: Pinpoint the most relevant and pressing issues around environmental degradation in Nigeria that could be highlighted on the website.
Explore Gamification and interactivity features: Understand what type of gamified experiences (quizzes, challenges, rewards), that would be appeal most to young audiences
Secondary Objectives
Evaluate Competitor Platforms: Examine similar environmental awareness websites or apps to identify gaps, strengths, and opportunities for your website.
List of things I want to learn in this research
About my Target Audience
Attitudes Toward the Environment:
How aware are they of environmental degradation?
Do they feel personally responsible or empowered to make a change?
What aspects of environmental degradation concern them the most (e.g., deforestation, pollution, climate change)?
Digital Habits:
What devices do they primarily use (e.g., mobile phones, tablets, computers)?
What websites, apps, or social media platforms do they spend the most time on?
How do they typically learn new things online (e.g., videos, blogs, interactive content)?
Engagement Preferences:
What type of activities or content motivates them to stay engaged?
Are they more likely to engage with quizzes, challenges, or storytelling?
About Enviromental Themes
Core Topics:
What specific environmental challenges in Nigeria (or globally) should the website focus on?
Are there environmental success stories or youth-led initiatives that can be highlighted?
Educational Goals:
What knowledge gaps exist among your audience about environmental degradation?
What practical steps or actions can they take to address these issues?
About Gamification Interactivity
Preferred Features:
Do young users prefer interactive quizzes, games, or simulations?
What kind of reward system (e.g., points, badges, leaderboards) motivates them the most?
Engagement Levels:
How long are users likely to spend on interactive features?
What type of challenges can encourage offline action, like planting trees or reducing waste?
About Design and Navigation
Visual Appeal:
What colors, fonts, and design elements do young users find appealing?
Do they prefer clean, minimalist designs or colorful and playful layouts?
Navigation Preferences:
How do they expect to find content?
Do they prefer a simple menu structure or advanced search options?
About Motivations to Take Action
Encouraging Advocacy:
What motivates young users to share environmental content with friends or on social media?
How can the website foster a sense of community or belonging among users?
Driving Offline Action:
What types of eco-friendly actions are young users most likely to participate in?
Would gamifying these actions (e.g., challenges with measurable goals) increase participation?
Assumptions
Awareness, education and understanding
My audience is interested in learning about environmental issues but lacks in-depth knowledge.
They need simplified, easy-to-understand information about environmental degradation and its impact on their lives.
They want information presented in formats that are easy to digest (e.g., videos, infographics, or interactive activities).
Engagement and Interaction
They want engaging and interactive content rather than static or text-heavy pages.
Gamified features like quizzes, challenges, and rewards will motivate them to use the website more often.
They prefer visual and interactive formats such as videos, infographics, and interactive maps over plain articles.
Taking Action
Your audience wants to feel empowered to take real-world actions like reducing waste, planting trees, or spreading awareness.
They are more likely to participate if the actions are clear, achievable, and personally rewarding.
Many of them may be inspired by peer-driven challenges or leaderboards showing what others are doing.
Relevance to Their Lives
Environmental degradation feels like a distant or abstract issue to some young people, so content needs to connect the issues to their daily lives.
They may not be aware of local environmental challenges (e.g., deforestation, waste pollution) or how these directly affect their communities.
Testing these assumptions, I will use:
Surveys and interviews to confirm whether gamification actually motivates them.
Usability tests to reveal if my navigation is intuitive enough.
Hypothesis
Awareness and Education
Hypothesis: Young people lack accessible, relatable information about environmental degradation and will benefit from a website that breaks down complex issues into simple, engaging formats.
Testable Statement: If I create easy-to-understand content (e.g., infographics, videos, and quizzes), young users will demonstrate increased awareness of environmental issues in post-activity surveys.
Engagement and Motivation
Hypothesis: Gamification (e.g., quizzes, challenges, and reward systems) will motivate young people to spend more time engaging with the website and encourage repeat visits.
Testable Statement:If I include gamified elements, users will spend an average of 20% more time on the website compared to a non-gamified version.
Digital Preferences
Hypothesis: Young users prefer interactive and visually engaging content over static text and are more likely to interact with the website if it has a modern, user-friendly design.
Testable Statement:If the website includes interactive elements like quizzes, clickable maps, or videos, users will have a higher engagement rate (e.g., clicks per session) compared to static content.
Relevance to Their Lives
Hypothesis: Young people will engage more with content that connects environmental issues to their local context or daily lives, such as how pollution or waste management affects their communities.
Testable Statement: If we include local case studies and actionable steps, at least 60% of users will report feeling the website content is relevant to them in user feedback surveys.
Desire for Personal Impact
Hypothesis: Young people want to feel that their actions make a difference and will actively participate in challenges or activities if they can track their progress or see measurable impact.
Testable Statement: If we provide users with tools to measure their personal impact (e.g., waste reduction calculators), at least 40% will complete an action-based challenge within the first two weeks of use.
Methodology
Methods for collecting data
Surveys and Questionaires: I will distribute surveys to my target audience to gather more insight on their online habits
Interviews and Focus Groups: I will engage in one-on-one discussions with my target audience
Competitor Analysis: I will explore websites with similar objectives and analysize their approach.
Usability testing: I will create a prototype and observe their interaction and make changes when required.
Tools and platforms for research
I will use Google forms to collect survey responses.
I will use Miro for brainstorming and keeping tract of progress and project timeline.
I will use Google analytics to analyse the user behaviour after launch.
Synthesize the data
Once I collect data, I will analyze it to identify patterns that could be similar in my target audience(e.g pain points). I will use mind-mapping software (Miro) to organize findings. Then, map these insights to my design and development process.
User personas
I have created user personas that could serve as my potential target audience, to help me design with specific users in mind. This would help me stay focused on the assumptions and hypothesis listed above.
In my research about empathy map, I learned empathy map should be done right from the start of your design process. It should be revised and adjusted as your research goes on.
I have created emapthy map for the 3 user personas above which I will adjust and revise as I get more data.
Timeline: June 1, 2025 – June 30, 2025 Goal: Create high-quality, engaging content for the website.
Tasks
Start Date
End Date
Deliverables
Research and write educational content
Jun 1, 2025
Jun 15, 2025
Written articles, scripts for videos, quiz questions
Create interactive media
Jun 16, 2025
Jun 25, 2025
Infographics, videos, animations
Prepare gamification elements
Jun 26, 2025
Jun 30, 2025
Challenge mechanics, badge/reward designs
Phase 5: Development and Testing
Timeline: July 1, 2025 – August 10, 2025 Goal: Build and test the website to ensure it functions smoothly and meets audience needs.
Tasks
Start Date
End Date
Deliverables
Develop website
Jul 1, 2025
Jul 20, 2025
Fully functional website prototype
Integrate gamification features
Jul 21, 2025
Jul 25, 2025
Fully implemented gamification system
Refine and finalize the website
Aug 6, 2025
Aug 10, 2025
Fully tested, refined website
This is an initial roadmap implementation timeline for the research and project itself. Date are tentative and it is subjected to change. The research and project development will be carried out simultaneously.
Conclusion
Conducting user research is the foundation for creating a successful interactive website that raises awareness about environmental degradation among young people. By understanding my audience’s needs, motivations, and behaviors through surveys, interviews, and personas, I can design a platform that truly connects with them.
The User research methods and data coolected from this research will helps me ensure that the website isn’t just informative but also engaging and impactful. By tailoring features and content to meet the needs of my target audience, I can create an experience that educates, inspires, and motivates action. Addressing their pain points, like the frustration with overly technical content or the need for community and recognition, will allow me to design a platform that’s enjoyable and effective.
This research-driven approach will enable me to build a website that isn’t just another resource—it becomes a space where young people feel empowered to learn, take meaningful actions, and connect with others.
This website is designed for creative professionals to show case their work, connect with other creatives and discover new ideas. It is a better version of pinterest.
Why is it a good website?
It gives you a way to comprehensively showcase your work as a creative, you can include photos,animation, you can also customize the layout to suit your taste. It is simple enough to customize, very user-friendly. There is detail description of your project where you can include the tools use for creating.
You can connect with creatives around the world, irrespective of your location. There is a feedback section on each project you share in form of comment, appreciations (similar to likes). You can also save and follow a project by saving it as a moodboard for refrencing or for inspiration.
If your work is exceptional, it can be featured on behance homepage which can give you a significant exposure. You can also get freelance gigs through client connection ( you either sign up as a creative or as a client)
There is a live section where you can follow some other creatives who do workshops on their approach to work, more like a tutorial section where you can improve yourself as an artist.
LinkedIn
This is a professional networking platform, where you can connect with businesses and help you grow your professional profile. You see this site as an online version of your CV depending on how you maximize the space.
Why is it a good website?
This site allows you to Outline your professional journey in a simple and detailed mannner. You can include information like what or where you studied. It ituitively requires you to include your skills and description of your job position in your experience section.
You can search and apply for jobs easily. It saves your previous application infomation so you canreuse it for other similar job applications. The job search can be personalised and customized to alert on recent jobs. You can connect with people employed in business you are interested in, also fellow creatives.
You can publish articles and post directly and you get feedbacks that might share more insights on how and what to improve on. Also you get content engagement metrics that can be useful.
Also it provides the opportunity to get skill endorsement from your connections. So, it is a very useful website if well utilized.
As a business owner, you can use it to highlight the companies work place culture, post relevant news and articles about the company, including collecting feedback from your customers and followers on updates about your company
Youtube
This website allows you to post video content. It is very good for content creating and building of audience. Contents like educational videos, Live videos, movies, music, etc.
Why is it a good website?
The layout of content is user friendly, there is a search box at the very top of the site which keeps history of your search. There is a trending section that highlights popular and emerging content. There is a quick access to your channels, history, watch later, like videos, playlist by the left side of the site. You have the subscription sections where you can know when there is a new upload by the channels.
youtube website page
You can easily preview a video without clicking it. You can play a video in background while you search. Also there is easy sharing of content to your other social media platforms. There is autogenerated subtitle
You can also create the short form of your long contents like in tiktok. you can make comments on videos, and build a sense of community.
The iPhone’s design is a masterclass in simplicity, functionality, and attention to detail. Apple’s design philosophy emphasizes the seamless integration of form and function, which is evident in every choice made for the iPhone’s hardware, software, and user experience.
One of the standout aspect of iPhone design is the minimalism, it is clean and has a streamlined look, free from unnecessary embellishments, It has a smooth uninterrupted surfaces without a cause. The round edges is appealing and ergonomically comfortable. This minimalism gives more focus to the content and experience rather than the hardware
The choice of the materials used, such as the aerospace aluminum or stainless steel and durable glass gives not just luxurious feel but also strength and durability. It is resistant to wear and tear but still maintain sleek and premium look. The lightweight structure makes it easy to grip and hold for a long period of time
The placement of the button is thoughtfully designed – the volume controls, the power button and the silent switch are all within easy reach. The camera sit flush with the body, avoiding unnecessary protrusions.
The aluminum used making iPhone is incorporated with recycled materials. The simple Apple logo is positioned discreetly on the back, a subtle yet powerful branding element. The overall design embodies the essence of Apple’s “less is more” ethos, making the iPhone instantly recognizable without needing over-the-top branding.
Another component of the iPhone design is its software iOS, the interface is designed to be clean, simple, and intuitive. Gestures like swiping, tapping, and pinching feel natural, making navigation seamless
The Computer Mouse
The computer mouse is a device that has remained remarkably consistent in its core design since its invention in the 1960s. A handheld pointing device, typically with two or more buttons and a scroll wheel,
A computer mouse
Why is this a good design?
One of the reasons this mouse is considered a hallmark of good design is its simplicity and intuitive functionality. The basic concept of point-and-click changes the way we interact with computers, making complex tasks as simple as moving the cursor across the screen and clicking on icons or links. It transformed the complex command process of moving files and folders around and making it user friendly, like an easy task of arranging items which humans are familiar with.
The design of this mouse is user-centered. It’s shaped to minimize strain, ensuring comfort during prolonged use. This mouse is so good that it doesn’t matter if you are left handed or right-handed. It is also wireless, meaning you don’t have to worry about wires tangling while you work. The size is perfectly ok, it is shaped to fit your hands on a resting phase. The buttons are shaped down to the position of my index and the middle finger in a resting phase. The scroll button has good grip because of the evenly designed ridges. The whole mouse is made with plastic material, which makes it light weighted, the top surface of the plastic where you click are smooth to touch, and the sides are textured with designed rough edges that makes it easy to hold and the bottom is smooth to make it easy to move around.
A computer mouse
This longevity and adaptability make the computer mouse a prime example of good design that stands the test of time, illustrating how an elegant solution can become an indispensable tool in everyday life.
The Phone Stand
This phone stand is a simple, often overlooked accessory, but its design plays a crucial role in enhancing our daily use of mobile devices.
The reason the phone stand is considered good design lies in its ability to solve a common problem with minimal complexity. It can be used for hands-free video calls, watching content, or following a recipe in the kitchen, the stand offers a more comfortable viewing experience by eliminating the need to hold the phone constantly. Its ergonomic design reduces strain on the neck and hands, making it a valuable tool for both work and leisure.
A phone stand
This phone stand is designed with a wide flat bottom which allows it to sit comfortable on any flat surface, the concise triangular structure enhances the stability and it is visually simply. It is made with aluminum alloy that makes it light and easy to carry. The size was selectively chosen to accommodate phone without looking bulky. The hook part is shaped like two hands to hold in the base of the phone, the two hook is designed with a slight curve at the edge to perfectly hold the phone at the base to prevent it from falling out. The hook also have a soft silicone that protects your phone from scratches and sliding. This phone stand has an adjustable hinge where you can change the angles to a comfortable one. It is compact enough to be carried in a bag. The base part of the handle is cut out to accommodate cables while in use, so you can charge your phone while in place. This further enhances its function.Top of Form