Project 01 - Preliminary

[mmisson_01]

Hi everyone,
Here is all of my preliminary work for Project 01!
The person that I chose to revolve my website around is "Fourleaf-Island", otherwise known as Willow Woods or Wyll. If this name might seem familiar, they are best known for their webcomic "Laika's Comet" on Tumblr and Webtoons!
(You can check it out here, it's a really enjoyable read and Willow's use of color theory will absolutely blow you away! https://www.webtoons.com/en/canvas/laik ... _no=857623)
This was also a part of the sole reason as to why I choose Fourleaf-Island in the first place for this project, since discovering them early this year has helped tremendously with my own drawing and coloring process.

(Here is another link to be directed to Fourleaf-Island's Tumblr Blog if you want to view their other work as well: https://fourleafisland.tumblr.com)

DESIGN A
Format 01 - Standard Size (1920 px X 1080 px)
(For Design A, I wanted to go with a more simple and clean approach in order to get back in the groove using Dreamweaver. I also did not want to overburden myself with trying to add in a lot of elements that I don't know how to code for yet, but I am still very eager to try out new things such as the animated fishing-rod drop-down list as viewed here:)

Format 02 - Smartphone Size (640 px X 960 px)

(Since the fishing-rod element can't really be used in this format without complicating things, I thought it would be best to switch it to a scrollbar to indicate that the page the user is currently on has more below it than what's visible on their screen. So when a user slides their finger up to scroll down all the way to the bottom, the fishing-rod would *reel* in the fish).

Style guide for Design A (640 px X 960 px)

(If you'd noticed, I didn't really use the icon a part of the typographic logo throughout Design A very much, but if I do go through with this Design, I will probably make sure to incorporate it more than what I did here in the preliminary work).
.
DESIGN B
Format 01 - Standard Size (1920 px X 1080 px)
(For Design B, I was really intrigued to know Fourleaf-Island had an exclusive print club on their Ko-fi page, so I thought what better than to incorporate a postcard layout throughout this design to relate to that aspect! As you can tell, this is widely different from Design A, however, it will definitely be more of a challenge trying to replicate everything here through Dreamweaver, but I am especially delighted with how this design looks for now).

Format 02 - Smartphone Size (640 px X 960 px)

(The additional inner page is to show how the user can switch between pages, via the red-paw button on the lower left corner of the screen).

Style guide for Design B (640 px X 960 px)

.
.
Thumbnails

thumbnails_pg_01_mmisson.png (37.22 MiB) Viewed 121 times

thumbnails_pg_02_mmisson.png (34.55 MiB) Viewed 121 times

thumbnails_pg_03_mmisson.png (29.84 MiB) Viewed 121 times

thumbnails_pg_04_mmisson.png (35.28 MiB) Viewed 121 times

.
Brainstorming

brainstorming_mmisson_01.png (41.3 MiB) Viewed 121 times

.
Site Map

site_map_mmisson_01.png (35.89 MiB) Viewed 121 times

.
Site Needs & Goals Analysis

[LMisher]

Hello Meghna,

I think that you are definite off to a good start with your website. I am enjoying your work so far. Your thumbnails and brainstorms were on point and your color schemes (especially in version 2) were very nice. My only suggestion would probably be to use white text on the darker background so that it is easier to read. Other than that, it's looking good. Well done!

[ChloieKonrad]

Hello Meghna,
I really like both of your designs!
I think my favorite is design B, I really like the Pawprint being the button to switch between pages. My only suggestion is on the smartphone version of Design B, I would make the stripes on the edge go fully around the design like they do on the full web page.
Great Job!

[Aub]

Wow!! This preliminary work looks too good to be preliminary! I love the designs you made for all the pages I can't wait to see what it looks like in the end, I'm having a hard time trying to find something to nitpick on so maybe it's that some of the black text gets hard to read on the dark blue background, everything else is amazing!

[Olivia_haltom]

Hello! I absolutely love the look of your design b. The warm tones give a home, comfort feeling and it's a website I would love to click around on. The hamburger menu design is also looking really strong! Great job! It was also really nice to see your style guid and all the colors you are going to use.