Single Page Website

The Crunchy Kale

For this first project in Web Design One class we were given the copy and the general idea an organization on what the site needed to be about, mostly a recipe/content blog website. We were asked not to use images, so we needed to create visual interest by use of color, typography and a well-designed icon set.

Research

I looked at similar recipe and cooking blog websites to get some inspiration and see what the existing designs looked like. Also to get an idea of what color palettes and overal layout were used."

The Process

Ideation And Sketches

I decided to explore a few options in terms of layout for the page and create a menu of options that would take the user to sections of the website based on the categories given to us.

I also used the copy given to estimate the size of the sections and to determine what colors and type to use to create proper hierarchy and visual interest.

Digital Concepts

Here is a sample of what the initial digital concepts looked like, based on instructor and peer feeback, I made a few changes and structured the page for better legibility.

I also started to design an icon set for the different sections of the page, again to create visual interest. It was also suggested that different color headings would make the page stand out a little bit more.

Revisions

During this phase of the project, I finalized the look of the page as well as the logo and the icon set. The site was also renamed The Crunchy Kale.

Final Design

For the final design, a drop shadow effect was given to the header to create some depth as well as some other minor adjustments to the page.

The biggest wins for me on this project was seeing how the original design improved over time and learning to use HTML/CSS and flexbox. Also having to create a unique non-pictorial logo and icon set for the page to create some visual interest as working without images to convey information proved to be very challenging.