Hi, I'm Alice Vercelli

Virtual Pet Care is a mobile-first web app where users adopt colourful digital pets, watch their needs change in real time, and interact with them through feeding, sleeping and playing. Each pet has its own character (balanced, gourmet, relaxed, playful) that sets default hunger / energy / entertainment levels and influences how fast those needs decay.

Design Concept:

• Phone-Sized Focus: The entire interface lives in a centred 375 px-wide column on larger screens, mimicking a native-app feel and ensuring comfortable thumb reach on mobile.
• Card-Based Pet Gallery: Each pet appears as a tidy card with a live emoji happiness indicator, name, and a dynamic avatar built from colour, shape and border attributes—instantly recognisable at a glance.
• Playful Colour Accents: Soft pastels for backgrounds and bright accent colours for hunger, energy and entertainment bars reinforce a fun, game-like mood without overwhelming the user.
• Need Bars & Emoji Feedback: Animated fill bars and a three-state emoji (happy 😄, neutral 😐, sad 😢) give immediate visual feedback on a pet’s well-being.
• Minimal Top Nav: A simple logo-button in the top-left corner returns users to the pet list from any page, maintaining a clean, clutter-free header.

Key Features:

• Create, Edit & Release Pets:
  • Add a new pet with name (max 15 chars), character tag and visual tweaks.
  • Edit existing pets; character changes instantly re-seed default needs.
  • Release (delete) pets with an “Are you sure?” dialog.
• Character-Based Defaults: Four personality tags prefill needs and affect decay — e.g. playful pets lose entertainment faster than relaxed pets.
• Real-Time Interaction Buttons: “Eat,” “Sleep,” “Play” adjust needs immediately with a quick bar-flash animation.
• Automatic Need Decay: A background timer decreases needs.
• Responsive, Touch-Friendly Layout: Thumb-sized buttons, single-column flow, and generous spacing ensure comfortable use on any phone.
• Empty-State Messaging: When all pets are gone, the list view shows “You have no pets yet” plus a friendly “Add a new Pet” call-to-action.

Technical Execution:

• Next.js 14 + React 18: CSR pages with /api routes for CRUD operations.
• MongoDB Atlas + Mongoose: Schema stores appearance, character and needs; findByIdAndUpdate & findByIdAndDelete power edit / release workflows.
• SWR Data Fetching & Cache: Automatic revalidation after updates; mutate() ensures UI reflects the latest DB state.
• styled-components: Encapsulated styling, easy theming and conditional flash animations on need bars.
• Mobile-First Layout: Global container max-width: 375px; margin: 0 auto; keeps the UI consistent across viewports.
• Fast Feedback Loops: fetch + optimistic UI updates; no page reloads.
• Clean Code & Modularity: Dedicated components for PetCard, PetDisplay, NeedsBar, PetHappiness, Logo, etc., each with clear props and responsibilities.

Skills: React / Next.js routing & API routes, MongoDB schema design & Mongoose queries (CRUD), SWR for real-time data and optimistic UI, styled-components for responsive and mobile-first design, Form validation (max-length, required character tag), UX patterns (confirmation dialogs, empty-state messaging, centred fixed-width layout), Git feature-branch workflow & Pull Requests

BEST OF Magazin is a digital lifestyle magazine for the euregio Maas-Rhein region (Aachen, Maastricht, Eupen, Liège and Hasselt). It offers a curated mix of high-quality articles on lifestyle, leisure, business, science, events and health. The aim was to create an elegant online platform with eye-catching visual content and a regional focus.

Design Concept:

• Atmospheric Header Slider: A full-screen hero slider features high-end events like the Kurpark-Classix in Aachen, complete with image-in-image animations and elegant overlay text for instant visual impact.
• Luxurious Color Palette: A deep black background combined with soft gold accents creates a premium look and contrast-rich elegance, reminiscent of upscale print magazines.
• Typography: Bold, serif headlines deliver strong presence, while clean, readable body text ensures a pleasant and sophisticated reading experience.

Key Features:

• Regional Top-Level Navigation: Clearly defined menus—Lifestyle, Leisure, Events, Business, Science, Health—offer quick access to key categories.
• Hero Slider Featuring Major Stories: Dynamic, large-image presentations of featured events, each with a “Learn More” button to boost engagement.
• Horizontal Region Pages: On desktop, each region (Aachen, Maastricht, Eupen, Liège and Hasselt) uses a sleek, horizontal layout with fast scrolling. Users can scroll from left to right through full-width panels featuring an icon displaying the region's real-time weather, a stylised map indicating its location, and images accompanied by headlines of interesting articles, providing an engaging, magazine-style experience.
• Typographic Hierarchies & Space: Thoughtful typographic layering supports visual clarity, while ample spacing creates a relaxed reading flow.
• Newsletter Promotion: Strategically placed below the brand header—subtle, consistent, and aimed at growing subscriber numbers.
• Rich Media Integration: Feature articles support embedded photo galleries, videos, and multimedia slideshows—perfect for event and lifestyle storytelling.

Technical Execution:

• Professional WordPress Setup: Custom theme based on a purpose-built child theme—flexible, maintainable, and future-proof.
• Responsive-First Design: A fully fluid layout from desktop to mobile, with optimized headlines, buttons, and mobile hero sliders.
• SEO & Performance Optimization: Semantic HTML structure, fast load times via image compression and caching, and mobile-first design for strong local search performance.
• Clean Code & Maintainability: Modular structure with well-commented PHP templates and partials, ready to scale across additional regions or topics.

Skills: WordPress & Theme Development (child theme, template hierarchy), UI/UX Design & Layout (hero slider, navigation structure, readability), Responsive & Mobile‑First Front-End, Rich Media Integration (images, video, event galleries), On‑Page SEO & Technical Tuning

Developed a visually engaging and intuitive microsite for the Waldtriathlon event, designed to encapsulate the energy, emotion, and atmosphere of the triathlon while ensuring user-friendliness and ease of navigation.

Design Approach: Adopted a clear and user-focused layout emphasizing whitespace to provide a breathable, modern aesthetic. Visual separation of the triathlon's three disciplines—cycling, running, and swimming—was achieved through distinct sections and imagery.

Typography and Color Scheme: Utilized "Roboto Condensed" for headings to convey modernity and dynamism, complemented by "Lato" for body text for readability. The color palette balanced calming dark blue with energetic accents of mahogany orange, scarlet red, and green for route differentiation.

Interactive Features: Implemented a custom slider showcasing images of triathlon moments, allowing users to explore the event's highlights dynamically. A parallax effect was added to enhance the immersive experience, paired with an intuitive "back-to-top" button for seamless navigation.

Icons & Graphics: Created bespoke icons inspired by Flaticon and Adobe Stock to represent the triathlon disciplines and map routes, ensuring consistency and clarity. Icons featured elegant lines and dynamic shapes to evoke movement and agility.

Responsiveness: Optimized for desktop and mobile devices with responsive typography, adaptable layouts, and interactive maps for each route, ensuring a cohesive user experience across all viewports.

Skills: Adobe Illustrator, Photoshop, Adobe XD, Bootstrap, HTML5, CSS3, JavaScript, responsive design principles and UX/UI best practices.

Designed and developed a visually engaging and informative microsite for Ballonteam Sauerland, a company specializing in unique hot air balloon experiences. The project aimed to captivate adventurous customers and provide clear, concise information about services, packages, and scheduling options.

Design Approach: The layout incorporated vibrant imagery and a clean, spacious design to evoke the exhilaration and serenity of hot air balloon rides. Emphasis was placed on user-centric navigation and accessibility to ensure a seamless browsing experience.

Typography: Utilized a modern sans-serif font for body text to ensure readability and paired it with bold headings to highlight key sections and draw attention to calls-to-action.

Functionality:

• Structured the site as a one-pager, simplifying navigation and maintaining a user-friendly experience.
• Developed interactive booking forms with integrated fields for user details, preferred dates, and custom notes.
• Included a dynamic section for package highlights, providing clear pricing and service descriptions.

Responsiveness: Ensured compatibility across devices by creating separate designs for desktop, tablet, and mobile, prioritizing usability and visual harmony. Optimized image scaling and button placement for smaller screens.

Challenges and Solutions:

• Conveying Adventure and Elegance: Balanced a professional aesthetic with elements of excitement through the strategic use of images and color schemes.
• Encouraging User Interaction:Designed engaging call-to-action buttons and intuitive forms to enhance user engagement and facilitate booking.
• Multi-Device Optimization:Addressed unique layout challenges for smaller devices using adaptive design techniques, ensuring consistent quality across all platforms.

Skills: HTML5, CSS3, JavaScript, responsive web design, UI/UX principles and client-oriented content structuring.

Celebrating the legacy of Confetti’s 50th anniversary, this landingpage was designed to capture the elegance and heritage of the brand while providing a streamlined user experience for event registration.

Design Approach: The design adhered to strict branding guidelines, utilizing the company’s logo colors exclusively to ensure consistency and recognition. All imagery was converted to black and white, emphasizing a classic and timeless aesthetic while allowing the content to stand out.

Layout & Features: The single-page layout was meticulously planned to balance visual appeal and functionality. Key sections included a detailed event overview and an intuitive, responsive registration form.

Typography: Carefully selected fonts conveyed professionalism and celebration, complementing the clean design.

Challenges and Solutions:

• Branding Constraints: Successfully incorporated limited color options and monochrome imagery without compromising visual interest or clarity.
• Engagement: Developed a user-friendly form to maximize registrations while ensuring data validation and security.
• Multi-Device Optimization: Addressed unique layout challenges for smaller devices using adaptive design techniques, ensuring consistent quality across all platforms.

Skills: HTML5, CSS3, responsive design, Illustrator, Photoshop, Adobe XD, UI/UX principles, brand alignment and form development.

For this project, the objective was to redesign a newspaper flyer for a yoga studio, adhering to specific typographic and layout guidelines. The task emphasized improving microtypography and visual hierarchy while maintaining the original dimensions of 136 mm x 100 mm, adaptable to either portrait or landscape format.

Design Approach:

• Logo Recreation and Enhancement: The yoga studio's logo was meticulously recreated with minor refinements to improve visual appeal and ensure better integration within the flyer layout.
• Typography and Microtypography: Focused on optimizing font sizes, spacing, and alignment for enhanced readability. Hierarchical text elements were established to guide the reader’s eye through the key information, such as free trial sessions and the yoga class schedule.
• Visual Enhancements: Selected calming and professional imagery to complement the yoga theme, aligning with the flyer’s overall aesthetic and improving its appeal to potential participants.
• Color Palette: Opted for a balanced and soothing color scheme that resonates with the themes of relaxation and well-being associated with yoga.

Constraints and Challenges:

• The flyer had to be designed for newspaper print in CMYK mode, requiring careful attention to color contrast and legibility.
• The layout had to balance textual content and visual elements within the constrained dimensions, ensuring an uncluttered, professional appearance.
• Achieving a consistent and harmonious design while adhering to the provided manuscript text was essential.

Outcome: The redesigned flyer achieved a clean, professional look that effectively communicates the studio’s offerings while being visually appealing to the target audience. Key information, such as the schedule and contact details, was highlighted through strategic use of typography and layout. The result was a functional and aesthetic flyer ready for newspaper publication.

For this project, I developed an educational poster exploring the French Renaissance Antiqua typeface class, a foundational typographic style originating during the Renaissance era (1400–1600). The objective was to design a visually engaging and informative piece that highlights the historical evolution, distinguishing features, and notable examples of this typeface class.

Design Approach:

• The poster utilized a structured grid layout to organize detailed content, including the typeface’s etymology, historical significance, and visual characteristics.
• A sophisticated color palette with subtle contrasts ensured readability and aesthetic harmony.
• Iconographic representations and carefully selected examples, such as Bembo and Garamond, provided visual references for the typeface’s unique qualities.

Content Highlights:

• Explored the Renaissance cultural movement's influence on typography, emphasizing Aldus Manutius' pivotal contributions.
• Detailed the hallmark features of French Renaissance Antiqua, such as slanted roof strokes in minuscules, rounded serif transitions, and an emphasized contrast in stroke weight.
• Included an annotated visual breakdown of key letterforms to guide recognition of this typeface style.

Key Challenges and Solutions:

• Synthesizing complex historical and technical information into an accessible format required careful content prioritization and clarity.
• Balancing educational depth with visual appeal was achieved through typographic hierarchy and strategically placed imagery.

Skills: Typography, visual communication, information design, layout composition, and historical research.

Developed a comprehensive menu redesign for Café Kiebitz, a cozy and eco-conscious café committed to sustainability, regionality, and a welcoming atmosphere. The project involved creating a cohesive visual identity that reflects the café’s values while ensuring an optimal user experience for customers.

Design Concept and Approach:

• Brand Integration: Built the menu around Café Kiebitz’s brand essence, emphasizing sustainability and warmth. Green, earthy tones and wooden textures were chosen to evoke nature and comfort, aligning with the café’s eco-friendly ethos.
• Moodboard Creation: Developed a detailed moodboard to guide the aesthetic direction, featuring natural elements such as leaves, warm wood tones, and minimalistic design inspiration.
• Typography: Carefully selected typefaces combining elegance and readability. Headlines utilized a classic serif font to convey tradition, while body text used a clean sans-serif font to ensure clarity and modernity.

Menu Content and Layout:

• Structure: Organized menu content into clear sections: breakfast options, regional specialties, beverages, and desserts. Each section was designed for easy navigation and quick readability, even during busy café hours.
• Icons and Highlights: Designed custom icons to represent regional ingredients.
• Eco-Friendly Focus: Included information about the café’s use of locally sourced ingredients and sustainable practices, subtly reinforcing the brand’s commitment to the environment.
• Callouts: Highlighted customer favorites and seasonal specials with visual accents to guide attention naturally.

Visual Elements:

• Mockups and Prototypes: Created high-quality mockups to visualize the menu’s appearance on tables and within the café’s environment, ensuring alignment with the interior decor.
• Illustrations: Designed minimal yet expressive plant-based motifs to connect the menu visually to the café's natural and regional focus.
• Consistency: Ensured that colors, fonts, and layouts seamlessly matched the café’s existing branding, enhancing recognition and coherence.

Challenges and Solutions:

• Balancing Information and Aesthetics: Worked to fit substantial menu content into a clean, readable design without overwhelming the viewer. Achieved this by prioritizing visual hierarchy and utilizing white space effectively.
• Reflecting Sustainability: Incorporated subtle but effective design cues (e.g., paper texture simulation in the layout) to represent the café’s eco-friendly messaging.
• Customer Feedback: Ensured that colors, fonts, and layouts seamlessly matched the café’s existing branding, enhancing recognition and coherence.

Outcome: Delivered a modern, sustainable, and customer-friendly menu design that strengthens Café Kiebitz’s brand identity. The final product not only meets the café’s operational needs but also enhances the customer experience by conveying a sense of comfort, authenticity, and care for the environment.

Skills: Branding, layout design, visual hierarchy, typography, iconography, user experience design, and eco-conscious messaging.

For the website of the artistic collective Die Blauen Reiter, the aim was to create a digital representation of their mission, works, and vibrant community. The project highlights a fusion of design precision and artistic sensibility, utilizing responsive layouts and thoughtful content structuring.

Design Concept:

• The website employs a clean, pastel color palette to symbolize order and serenity, contrasting with the dramatic and energetic nature of expressionist artworks.
• A white background was chosen to emphasize the brilliance and details of the featured artworks without overwhelming the viewer's focus.
• A bold but structured typographic hierarchy balances the aesthetic appeal and readability, with "Uncial Antigua" used for branding and "Poppins" for the navigation menu.

Key Features:

• Landing Page: Introduces the collective with a brief history, mission statement, and portraits of its members. Includes a user-friendly navigation menu leading to other sections.
• Exhibitions and Collection: Showcases current and upcoming exhibitions with engaging descriptions and images. Provides a curated view of expressionist works, segmented into German Expressionism, Neo-Expressionism, and Abstract Expressionism.
• Gallery: Features an animated gallery and video integrations to offer an immersive experience.
• Events: Highlights workshops, performances, and other cultural events with essential details like dates and times.
• Library and Café: Promotes the collective’s extensive art library, allowing users to browse book excerpts virtually. Advertises the café as a tranquil space for visitors to reflect on the artwork while enjoying coffee and desserts.
• Contact and Accessibility: Includes a contact form with required fields for name, phone number, email, and message, ensuring streamlined communication. Integrates Google Maps for directions and accessibility.

Technical Execution:

• Responsive Design: Adapted for seamless usability across desktops, tablets, and mobile devices.
• Semantic HTML and Accessibility: Designed with accessibility standards in mind to ensure inclusivity.
• Clean Code and Comments: The codebase adheres to structured formatting and clear commentary for ease of maintenance.

Skills: HTML5, CSS3, and JavaScript for interactive elements. Effective application of UI/UX design strategies to maintain usability and visual harmony.

The BeeAware app was conceptualized and designed as a comprehensive tool to raise awareness about pollinator conservation and empower users to take actionable steps towards sustainable ecological practices. With an engaging and user-centered approach, the app targets diverse audiences, including families, eco-conscious individuals, and community gardeners.

UX Design Process:

• User Research:Conducted detailed surveys and interviews to identify target users and their specific needs, resulting in the creation of three primary personas:
• A child passionate about nature and eager to learn through interactive games.
• A home gardener seeking practical tips to make their garden pollinator-friendly.
• A sustainability enthusiast interested in recipes, natural remedies, and broader ecological issues.
• Empathy Mapping: Mapped users’ emotions, thoughts, and challenges to gain a deeper understanding of their motivations and pain points. These insights directly influenced the app’s key features and content structure.
• Customer Journey Mapping: Developed detailed journey maps to visualize how users would interact with the app across different touchpoints, ensuring a seamless and engaging experience from onboarding to content exploration.

UI Design Process:

• Wireframes:
• Low-Fidelity Wireframes: Focused on layout, structure, and navigation flow to test early usability concepts.
• High-Fidelity Wireframes: Added detailed visual elements, typography, and initial color schemes to validate the app's aesthetic and functional direction.
• Mockups: Designed polished mockups showcasing the app's vibrant, eco-inspired color palette and clean, modern interface to reflect the theme of nature and sustainability.
• Clickdummy Prototype: Created an interactive prototype to demonstrate user flows, including gamified activities, recipe-sharing features, and pollinator-friendly gardening tips. This prototype was essential for gathering feedback during usability testing.

Features and Highlights:

• Educational Content: An extensive library of resources about pollinators, their ecological importance, and actionable tips for their preservation.
• Gamified Learning: Interactive modules designed to educate children in a fun and engaging way.
• Community Features: Options to share gardening experiences, ecological activities, and sustainable practices with like-minded users.
• Accessibility: Design adheres to WCAG guidelines, ensuring inclusivity with clear typography, high contrast, and simple navigation.

Challenges and Solutions:

• Diverse User Needs: Balanced the needs of varied user groups by providing tailored features for children, adults, and community users.
• Complex Information Simplification: Transformed scientific data into easy-to-understand infographics and bite-sized content to maintain user engagement.
• Iterative Design Improvements: Addressed feedback from usability testing to refine navigation, enhance feature clarity, and streamline workflows.

Skills: User research, persona creation, empathy mapping, customer journey mapping, low- and high-fidelity wireframing, interactive prototyping, mockup design, and user-centered UI/UX design principles.

To explore the artistic and cultural significance of African masks, I developed a detailed and visually engaging poster entirely in Adobe Illustrator. This project focused on communicating the history, symbolism, and diverse forms of masks from various African tribes.

Design Approach: The poster utilizes a structured layout that balances text and visuals, ensuring both aesthetic appeal and readability. By leveraging vector graphics, I depicted distinct features of masks, integrating intricate details and traditional patterns to evoke authenticity.

Color Palette and Typography: The design employs a harmonious color scheme inspired by earthy and vibrant tones traditionally associated with African art. A combination of bold and elegant typefaces was selected to contrast headings and descriptive content effectively.
Challenges and Solutions:

• Created accurate representations of mask designs by conducting extensive research and leveraging Illustrator's advanced drawing tools.
• Managed content density by strategically organizing information in sections, ensuring clarity without overwhelming the viewer.
• Maintained cultural sensitivity and respect for the subject matter through precise illustration and thoughtful presentation.

Skills: Adobe Illustrator, vector design, layout optimization, typography, cultural research, and visual storytelling.