Social Media App Design Lecture Notes

Introduction

• Welcome back to Design + Code with Sourasith.
• Today’s focus: Step-by-step design of a social media app.
• Reminder to like and subscribe to the channel.

Tips and Resources for Beginners

• Listen to Music: Helps with imagination and creativity.
• Research: Use Google and platforms like Instagram for inspiration.
• Study Real Apps: Observe existing designs for references.
• Explore Design Styles: Options include light mode, dark mode, glassmorphism, claymorphism, and neumorphism.
• Choose a Theme: Example theme: Candy Floss.

Design Resources

• Figma Community:
  • Use plugins to access images (e.g., Unsplash).
• Icons:
  • Use Iconly and Halal Lab for icons.
• UI Kit:
  • Download iOS 15 UI Kit from Joey Banks.
• Font:
  • Use Poppins font for design.

Profile Screen Design Steps

1. Create Frame: iPhone 13 pro with a 50 corner radius.
2. Background:
   • Create rectangles with dimensions 390x240 and 390x650.
   • Align bottom and name layers accordingly.
3. Color Palette:
   • Choose light blue for background.
4. Add Elements:
   • Create additional rectangles for layout.
   • Use drop shadow effects.
5. Avatar Creation:
   • Use ellipse tool to create an avatar.
   • Apply images using Unsplash with masking.
6. Add Text:
   • Input follower and following numbers using auto height and Poppins font.
7. Buttons:
   • Create message and follow buttons with auto layout.
8. Navigation:
   • Create top navigation with icons and proper alignment.

Home Screen Design

1. Create Frame: Start with an iPhone 13 pro frame.
2. Top Navigation:
   • Add status bar, camera, and notification buttons.
3. Add Background:
   • Use similar colorful images for visual consistency.
4. Avatar and Text:
   • Ensure proper use of auto layout and alignment.
5. Tab Bar:
   • Design a tab bar with home, chat, plus, profile, and notification icons.
   • Use background blur effects for design consistency.

Chat Room Design

1. Create Frame: Set up an iPhone 13 frame with a background image.
2. Conversations:
   • Create auto layout for conversation bubbles.
   • Use proper spacing between items.
3. Exit Icon:
   • Add exit and separator icons.
4. Input Area:
   • Design input area with rounded rectangles for sending messages.
   • Ensure correct color and size for icons.

Conclusion

• Congratulations on completing the design for today.
• Encouragement to explore and practice further.
• Reminder to check back for the next tutorial.