iii Designs: Mockup #1 ANGELLA QIAN
Initial Wireframe Goals/Objectives • Going for a more cohesive, clean layout • Modernize the website • Lends to a more professional impression • Font consistency • Maybe only 1-2 fonts • Sans serif font, maybe a cursive one, too • Draw attention to pieces, not distract with • extravagant fonts Color palette • Less clashing of dramatic colors, playing with • hues of 1-2 colors B&W and negative space helps to focus on pieces •
La Landing P Page (p (pt. 1/ 1/3) Gradient Icon of LA’s skyscrapers Don’t have access to the picture of you, so I first created this icon (can replace with other images). Initial Landing Page Users first see the upper half of this image when they click your link (labelled with yellow bracket). Fixed Navigation Bar As users scroll, the initial Nav Bar with “Home, Work, Services, etc.” options becomes the red- orange menu bar on the left with each option represented by icons.
La Landing P Page (pt. 2/ (p 2/3) Empty whitespace along left is where the fixed, red-orange menu bar would be. Note: user is only seeing half of these images at a time (labelled with brackets). Grey Font Colors Light and dark shades of grey adds a visual richness and realness to designs. Less harsh on the eyes since it’s not absolutely white and black. Doubling whitespace Increases visibility of text. Generous whitespace can make interfaces look more inviting and simple.
La Landing P Page (p (pt. 3/ 3/3) 3) Again, empty whitespace along left is where the fixed menu bar would be. Color palette can also change! 3-Image Slideshows Each type of service features a mini slideshow (you can pick your favorite pictures/pieces to share with users) (see next slide for a better explanation of this).
3-im image slid idesho hows Showcasing best, most eye-catching work upfront to get your customer’s feet through the door! • I picked a differing pieces so they know you’re versatile and consumer-driven with your designs! • • Slideshows would automatically flip through 3 featured photos every (maybe) 3-4 seconds. Wedding Images: Private Event Images: Interior Design Images:
al altogether SEE FULL LAYOUT IN E-MAIL TO ZOOM IN/OUT OF AND SCROLL ON!
More mockups to come! I still need to finish up the one with the line drawing, B&W image, color image idea you proposed. As well as mockups for the subpages (“Work”, “Services”, “Our Story”, etc.) I will be very free this summer so I can produce more mockups and possibly help you implement designs on WordPress!
Recommend
More recommend
