404 Error (Neon Pony Enterprizes)

I wanted to make a design that incorporated bright bold colors but was not difficult to read or understand. With this in mind I did a creative take on a page that typically does not get a lot of design, the standard 404 error message page. A quick google search resulted in an article discussing creative takes on this landing page so I opted to use it as inspiration and created this visual. I did the design in Photoshop and incorporated Illustrator to ensure conversion for larger or smaller sizes as a vector image which would scale across platforms. According to Crowe (2020) your 404 page should show off your creativity and personality while also helping users. I feel that this is conveyed in the bright layout that incorporates visual hierarchy, typography, and color (Myers, 2005).  

Client Testimonials (Building Maker)

This design is probably my favorite as I spent the most amount of time creating the simplistic background. I reviewed ‘The 10 Best Architecture Websites [2023 Edition] by Cheryl Barr’ for inspiration. I found many sites that incorporated leading lines and complicated backgrounds. With this in mind I created multiple layers of color, blending, and building of the barely visible buildings create texture, interest, and a backdrop for the client testimonials of this fictitious real estate development firm. I kept the typography for the logo and header the same and they are mimicking that of an architecture’s marks; thin yet crisp lines to convey a message in the simplest manner possible while maintaining legibility (Myers, 2005). Visual hierarchy is present in the content for each review and the grid layout creates a well-balanced visual with a drop-shadow to add a bit more dimension. I created the visuals in Photoshop and then assembled the entire design in Illustrator using alignment tools.

Clothing Stop Shop

The original design for this website was fun and playful but I decided to elevate the brand for the revision because many online clothing retailers use fewer colors to allow the product’s colors to stand out (Vettorino, 2023). With this in mind, I used blue to block in the center focal color of the bright dress against the monotone background and branding keeping the colors neutral and monotone. I used the grid system to place the two outer columns so that they mirrored one another, I also added texture to the background to create additional interest and play off the light from the images, elevating the feel of the site to something of sophisticated fashion. Typography selection was made to ensure clear headers, and text blocks that drew interest yet remained a secondary focal point to the site’s content. Stock photography was used but the assembly of the website was done in Photoshop with finishing touches done in InDesign. The most complicated aspect of this design was the header; getting the banner to ‘shimmer’ like a piece of fabric took a few layers and played with the opacity and blending of different shades of grey, white, black, and blue. I opted to use InDesign because this could easily be converted into a print handout of clothing samples or an ordering magazine.

Pet Fundraiser

This design was created with the intention of demonstrating the power of less content on a simple landing page. I created dimensions with stock images of real dogs and a worn brick background which I feel also adds much-needed texture to the design. There are also shadows incorporated to help create additional dimension, so the elements are simply laying on the screen. I kept the call to action simple and easy to locate. Visual hierarchy is present in the sizing of the typography, and I selected fonts that lend themselves to a feeling of comfort and wanting to assist (Web4agoodcause, 2019). Made using Photoshop and Illustrator, this design is easily altered to accommodate multiple screen sizes without losing the general message or feel. Though off-center, the design is still balanced based on a horizontal alignment utilizing the rule of thirds.

Shelly Burkhart

The primary focus of this first design was to create a sense of emotion related to ‘spiritual direction’ and elements of mystical or alternative belief systems. This is accomplished with layered elements to create a multidimensional background that is bright lights, floating with elements of shine as seen in the starbursts of lights under the menu (Brown, 2014). I also opted to use rounded images to further emphasize the feeling of femininity and softness which are often associated with spiritual practices (Myers, 2005). Color values were selected to ensure that the headshot stood out against the multiple colors used in the background. Visual hierarchy and typography selection dictated the placement of the H1 tag, paragraph and button placement to ensure overall balance and a logical flow to the design (Myers, 2005). The background was created in Photoshop using the shape tools, and blur effects with many layers of color, some blending, and a bit of masking. The entire image was finalized in Illustrator so that I could incorporate shadows and text alignments.

Patty Pasta House

This design was inspired by the required Italian restaurant from another course, however, this is the first time I created a site for pasta; originally I opted for the Japanese restaurant. This design was created in Photoshop and then finished in Illustrator. The layout is again done with a grid but I opted to utilize a hero image to draw attention and drive engagement with an oversized ‘order online’ button and a large message about the ‘dinner special’. These elements incorporate visual hierarchy and highlight placement with images as a way to move visitors through the website (Myers, 2005). I kept the color palette simple and opted to only highlight two colors: black and brown. All other colors are provided from the visuals associated with Patty Pasta House’s offerings which allows the site to remain simple yet engaging. My favorite part of this design is the incorporation of the noodles in the background, it isn’t too busy but it also helps the site design remain relevant and informative by using visuals to convey a message (Brown, 2014).

HTML and CSS Website

Click to view website

Town Chinese Cuisine Website 

As part of my degree program at SNHU I was tasked with creating a website for a fictitious restaurant. All of the graphics on this site were created as a part of this process along with any copy you may encounter. This project was completed by utilizing the website design process from wireframing to sketching and layout development. Created with HTML and CSS this site came to life with bright colors, bold graphics, and hover effects that are sure to draw your attention. Although this is a work-in-progress piece, it is not mobile-responsive at the moment so please keep this in mind when viewing the site. 

I have every intention of continuing to develop this site as I further my understanding of HTML and CSS to ensure a mobile responsive design and as this is created from scratch I am positive that my layout designs could easily be translated using a CMS platform such as WordPress.  

Resources

Barr, C. (2022, December 28). The 9 Best Architecture Websites [2023 Edition]. Bizop Media. Retrieved November 26, 2023, from https://bizop.media/article/top-7-architecture-websites-from-around-the-world/

Brown, A. (2014, December 3). How does color and shape affect your design? Howard School of Media Arts. Retrieved November 26, 2023, from https://blog.specshoward.edu/blog/how-does-color-and-shape-affect-your-design

Crowe, A. (2020, August 31). The best 404 pages: 37 examples you need to see. Search Engine Journal. Retrieved November 26, 2023, from https://www.searchenginejournal.com/404-page-examples/211154/

Myers, D. R. (2005). The Graphic Designer’s Guide to Portfolio Design (3rd ed.). VitalSource Bookshelf version.

Retrieved from vbk://9781118872413

Vettorino, M. Z. (2023, February 21). 22 Fashion Website Design Examples We Love. HubSpot. Retrieved November 26, 2023, from https://blog.hubspot.com/website/fashion-website-design

Web4agoodcause. (2019, October 25). 8 elements of a successful fundraising landing page – 4aGoodCause. 4aGoodCause. Retrieved November 26, 2023, from https://4agoodcause.com/8-elements-successful-fundraising-landing-page/