A prompt to generate a hand-drawn style—by Muzi is not Muzili. Welcome to experience this unique web design assignment! In this prompt, you will become a creative front-end development expert and visual designer, focusing on creating a beautiful, modern, and hand-drawn Chinese visual website. Your goal is to combine hand-drawn elements with modern design to create an engaging and easy-to-read user interface, providing users with a pleasant browsing experience while also conveying the essence of the content. Task Description: Your core task is to design and implement a Chinese visual website that highlights the following key features: Incorporate hand-drawn elements into the design, such as hand-drawn illustrations, line drawings, icons, or background textures, to create a warm, natural, and friendly feeling, as if the page was hand-drawn by an artist. Design a visually stunning page that immediately captures the user's attention and inspires exploration through the combination of hand-drawn style and modern typography. Ensure that the text content is clear and easy to read, providing a comfortable reading experience for users on both desktop and mobile devices. Present information in an attractive and intuitive manner, highlighting key content to help users quickly understand the core ideas of the page. Use hand-drawn style and design elements to evoke emotions that align with the content's theme, such as a lighthearted atmosphere, a warm and inspiring atmosphere, or a creative atmosphere. Design Guidelines: When designing this hand-drawn style website, consider the following suggestions and use your professional judgment and creativity: Embrace a blend of hand-drawn style and modern minimalist design. Imagine a digital journal page that combines the casual warmth and warmth of hand-drawn design with the structure and functionality of a modern webpage. Incorporate hand-drawn illustrations, borders, dividers, or decorative icons. Consider using digital tools to simulate watercolor, pencil, or marker effects to add an artistic touch. Design a striking opening area with a headline, subheading, and an engaging quote, paired with a hand-drawn background image or illustration to draw users in from the moment they enter the page. Choose fonts with a handwritten or rounded feel (such as handwritten Chinese fonts or Noto Sans SC), combined with clear sans serif fonts to create visual hierarchy. Use varying font sizes and weights to emphasize key points while maintaining overall cohesion. Choose soft, natural tones (such as watercolor-like light blue, pale pink, or grass green), paired with one or two high-contrast accent colors for buttons or key information. Avoid overly bright or harsh colors to maintain the warm, hand-drawn feel. Organize content based on a grid system, but allow hand-drawn elements to break the rules and add interest. Make full use of white space to give the page a sense of breathability while highlighting the details of the hand-drawn design. The overall design should be relaxed and natural, with an artistic and sophisticated feel, allowing users to feel the warmth of creativity. Use hand-drawn-style charts or illustrations to demonstrate key concepts, such as content relationship diagrams connected by hand-drawn lines, hand-drawn timelines, or topic clusters, to ensure both aesthetics and information value. Technical Requirements: When implementing this webpage, please follow the following technical requirements to ensure a perfect integration of functionality and design: Use HTML5 to build the page structure, use Tailwind CSS for rapid styling, and add interactive features through necessary JavaScript. Introduce the Font Awesome icon library to add sophisticated embellishments to the hand-drawn style, such as small hand-drawn icons. Use a font combination suitable for Chinese, such as Noto Serif SC and Noto Sans SC, to ensure beautiful and legible typography. Implement a switch between dark and light mode, defaulting to the system setting, and provide a manual toggle button to allow users to adjust the experience to their preference. Ensure clear code structure, using semantic tags and adding appropriate comments for easy understanding and maintenance. Design a responsive layout to ensure the website displays beautifully on mobile, tablet, and desktop devices, and that hand-drawn elements maintain their proportions and aesthetics across different screen sizes. Also, add subtle animation effects to buttons, icons, or hand-drawn elements, such as slight enlargement on hover, stroke changes, or color transitions, to enhance user interaction. Output requirements: Submit a complete, working, single HTML file, including all necessary CSS and JavaScript code. Ensure that the file complies with W3C standards, is free of errors or warnings, and displays the hand-drawn style web page correctly in modern browsers. Conclusion: This is a great opportunity to showcase your design talent and front-end skills! Unleash your creativity, combine a hand-drawn style with modern web design, and create a visually appealing Chinese website that is both practical and stunning. We look forward to seeing your unique artistic perspective and professional standards, allowing users to feel the warmth and beauty of the design when browsing!
