This project consisted of creating a single-page, scrollable web design. The final deliverables included a polished design comp and a style tile showing the color scheme and typefaces, along with a folder of the design image assets for use by Dorothy’s web developer.
Dorothy DeLong reached out to me to create a web design for her portfolio to showcase her powerful feminist photography. Dorothy wished to appeal to magazines and museums in hopes they would contact her with requests to feature her work.
In this project, I functioned as Dorothy’s sole web designer, working with her to understand the goals she had for the website and how the look and feel of the final site could best represent them.
Dorothy wanted a design catered for her new portfolio site as she was previously using a Facebook page to present her work, but decided with her growing popularity that she needed a more professional platform to show her work to better interest museums and magazines.
Dorothy requested the design showcase four of her favorite pieces of work with the option of adding to her gallery later. Along with that she wished for a short section about herself as the artist that would feature a photo of her, and a method of contact so anyone looking to display her work could reach out and connect.
The project started with gathering information from Dorothy about what vision she had for her work and to better understand how to represent her professional personality. Dorothy returned the questionnaire along with her logo, the photos she wished to feature, a statement to use in her about section, and a quote about her work.
With the information Dorothy provided, I separated her requirements into appropriate sections and created a wireframe to estimate the layout of her site. I decided a Hero Image was apt for a photographer’s portfolio along with a simple header of her logo and name across from the navigation. The most pertinent content to feature next was her photography work, so I intended on a simple gallery void of any other elements to take any of the attention away from her work. The about section would feature the statements she had provided and a centered photograph of Dorothy herself. Then, lastly, a footer with all of the contact information she provided.
With the basic layout decided I then transferred the layout over to digital form using Adobe XD. At this stage, I decided that to draw more attention to her photos I would vary the sizes they took up in the grid, and also enlarge the space they took up in the grid overall.
It was then time to decide on a color scheme for Dorothy’s site. I didn’t want to shy away from any femininity as that is the entire theme of her work so I knew I still wanted to have a pink but went with a more desaturated palette to bring the scheme into a more serious tone and to leave the attention on the saturated hues of Dorothy’s photos. I chose analogous colors to keep the feminine and serious tone throughout.
Afterwards came typography, I knew I wanted something bold that seemed to embody as much action as the photo I had selected for Dorothy’s hero image, but also a sans-serif font for any smaller texts to make sure they were legible but also fit with Dorothy’s modern professional personality. I decided on Rock Salt for her name and quote, and Comfortaa for the smaller text fields.
I then proceeded to add the decided colors and typography along with the provided images and some text to her layout, again enlarging the area the photos take up in the design to give a better sense of “engulf” as the term Dorothy uses. The statement was shifted to only the right side as there was not enough volume of text to split it.
The design was then submitted to Dorothy for feedback and revisions to make sure I was on track with the look and feel she wanted for her website, at which point she requested the addition of two more photos along and a fourth social account, along with some minor sizing adjustments.
For the final layout, I removed the dividers to make the photos more proportionate, changed the about section to a two-column design to better frame Dorothy’s statements and increased the white space around her contact section to add more back into the design. Below is the layout that Dorothy decided on to move forward with development.
In creating this portfolio design for Dorothy, I researched current design trends to add to my repertoire and new ways to accomplish design goals that add refreshing design elements to show the same content forms in modern ways.
While working through the projects I noted improvements to be made to my workflow by implementing copy earlier, but the larger changes further into the process caused by this were easily overcome by adaptability in evolving the design even at later stages.
The final design gave Dorothy a more professional presentation of her work, focusing on the power of her photographs and giving them the attention they are due. Any prospective museums or magazines will easily find the means to understand who Dorothy is as an artist and to connect with Dorothy should they wish to feature her work.
Dorothy was provided the final design comp, a style tile to replicate the style of her website should she chose to use the style for any accompanying resources, and the exported design assets to hand off to her web developer.
The owner of an ethical furniture retail company, Yolanda Lopez, contacted me to request a responsive single-page website design that would showcase her stock of sustainably made chairs in hopes to begin allowing customers to pre-order designs from her catalog. Yolanda priortized the ability of her customers to shop from their phones so I started on a mobile-first design.
For the project I would be deciding on the color scheme and typography of Yolanda’s website as well as ensuring that her website could be formatted across all devices in a design that fit the brand’s values and encouraged the pre-order of her beautiful, ethically built and sustainably produced chairs.
As Yolanda’s sole web designer, I personally oversaw all layout and design decisions regarding her website and reporting all progress updates to Yolanda herself.
Yolanda’s wonderful business ethic and beautiful hand crafted chairs need a platform to be showcased to buyers across the globe to give her the best chance at success. Obtaining pre-orders for her existing designs will allow her to direct production to only making in-demand pieces, furthing her sustainable initiatives and ensuring that each chair made has the highest likelihood of being purchased and not having wasted money and material on unsold chairs. Highlighting Yolanda’s initiatives and brand personality will also be imperative to reaching her target audience.
As always the design process started off by gathering information, what vision did Yolanda have for her site and what business goals needed to be met, among other specifics where relayed by questionnaire. Yolanda’s answers implied a priority on emphasizing the ethical and sustainable principles of her brand and prioritizing access for customers to input pre-orders for her designs.
Given these specifications, I began wireframing. Starting, of course, with the mobile layout, ensuring the visual hierarchy reflected Yolanda’s needs by implementing as much space as allowed for a call to action pre-order button and displaying large images of Sit Conmigo’s chair selection to ensure all attention was on the offerings of her business. I then progressed my wireframes to mobile and desktop versions maintaining an attractive layout and a clear visual hierarchy promoting her chairs.
The paper wireframes were then translated into digital format with Adobe XD, adding in Sit Conmigo’s text and copy to ensure the layout would frame her content well, making minor adjustments to maintain the cleanliness of the design.
Click to enlarge images
At this point it was time to decide on a color palette, as Sit Conmigo did not have any previous media to pull from. I decided on a yellow-green as the main color to still embody the environmentalism that is well associated with green but also bring in warmth that you would want to imply for furniture purchases. For accent colors I decided on a warm yellow and green-ish brown to bring in more earthy elements to the design.
I also needed to decide on typefaces to be used in the design, given Sit Conmigo’s trustworthy tone I thought a serif font would be most appropriate, only truly playing in terms of stem width for the typeface choices. I used Yeseva One on titles, headers, and pre-order buttons to add boldness, and used Ibarra Real Nova on smaller text passages.
Having decided on my general layout, color choices and typefaces it was time to apply these elements to my digital comp. On each device the layout starts with a yellow hero image with a sneak peak of one of Yolanda’s designs and a button enticing visitors to ‘discover’ Sit Conmigo’s offerings. Following the eye-catching hero image is a listing of all of Yolanda’s current design options with a simple title. Each also has bold and easily identifiable pre-order buttons to encourage customer interaction with the element. I chose to keep most elements in the design with sharp corners and white backgrounds to hopefully call to the clean practices in which Yolanda operates her business.
When we get to the ‘About’ section that changes to bring in more warmth and friendliness to Yolanda herself with a rounded image of Yolanda herself and a warm-green background for Yolanda’s statements. The goal was to hopefully emphasize the human aspect and set her apart from big box stores by familiarizing visitors with the person behind the brand.
Finally the site ended in a large footer in the warm brown tone to set it apart from the rest of the site design with warm-yellow text and social media icons for Yolanda’s contact methods, should any visitors hope to reach out to Yolanda with any questions or concerns.
Click through to Results to see the Final Iteration
Here are the three finalized and approved design comps for Yolanda's responsive website.
From this experience I took away the importance of focusing on what is minimally needed for a design, as on a smaller screen focus is lost much more easily between any elements competing for attention. I also learned to prioritize what is needed content and what is not to have an effective use of space on a small screen. I also learned a lot from researching usability of phone screens as they are set apart from devices with cursors or even tablets by the means in which users interact with them one-handedly, and even more often one-thumbedly, so placing your content in accessible locations on screen and attributing proper spacing is exponentially more important in mobile media.
By the end of this project I had three fully fleshed design comps to deliver to Yolanda: mobile, tablet and desktop. Each of the designs brought focus to her beautifully designed chairs and the means to obtain them, all wrapped in a professional looking site that echoed the personality and principles of Yolanda’s brand - all while having scalable content that reads as just as compelling, no matter the device.
On this project I worked with aspiring entrepreneur, Karla Kahvi, to create a full brand identity for her upcoming neighborhood coffee shop. By the end of the project I had crafted a color scheme, logo, brand typography set, icon set, social media headers and provided her with imagery to fully outfit her brand in time for it’s launch.
Karla Kahvi was looking to open up a new coffee shop in her local neighborhood. As she was starting from scratch, she wanted help with determining the overall look and feel of her business to ensure consistency in order to build familiarity with her community.
For this, Karla and I decided that for a full brand identity she would need a color scheme, type scale, logo design, accompanying icons, social media headers and some preset imagery - all delivered in a comprehensive style guide to inform future decisions made with the assets provided and beyond.
As Karla Kahvi’s lead designer I collaborated with her on setting the identity and personality of her brand, Deja Brew.
Karla wanted to begin building recognition for her upcoming coffee shop and do so with a brand personality that would last far into the completion and lifetime of her business. She was aware that the look and feel of the imagery surrounding her business would set the tone of her business in her future customer’s minds and wanted to start off on the right foot.
I aided Karla in determining the mission, personality and target audience for her coffee shop and used that information to shape the design decisions surrounding her business. Karla had a three month timeline to ensure she could obtain signage, printed materials and build an online presence - all of which would be incorporating the designs we decide on.
Firstly, I had to decide on a color scheme for the friendly, casual and optimistic personality Karla wanted to embody with her coffee shop. I selected a bright orange and yellow color pair to express excitement and warmth, along with a delectable brown to get her audience thinking of the coffee they would soon be associating with her business.
Next I worked on the typography, choosing a casual and laidback font painting to display the tone Karla wanted for her business. For the brand name, I decided on the ‘groovy’ 70’s inspired typeface, Autolova, to bring in some of the casual ‘good vibes’ of a friendly neighborhood coffee shop and to also play off of her chosen name, Deja Brew, by ‘revisiting’ a retro aesthetic. For headers and titles on her displays I went with Salsa, because it had similar traits to Autolova but more simplified so it would also bridge the gap between it and the general text typeface, Nunito. Nunito was selected due to it’s easy legibility and rounded lines which tied in well with the relatable tone of the more distinct typefaces of the brand.
With both the color any typography decided I moved to the logo, which is to be the most identifiable piece of a brand. I sketched a few ideas relating between coffee and loose symbolism of ‘deja vu’ until I decided on a design of a coffee bean, tea leaves, and an arrow which turned back upon itself in place of the distinct curved split line in a coffee bean.
Using Adobe illustrator I recreated the design in a vector format so it could be used no matter the size of media, it could be scaled accordingly. I created variations with and without the brand name and different color versions to maximize utility of the design.
Next I used the style choices I made in making the logo to create an icon pair to accompany her business offerings. To best represent those I decided a coffee cup and a croissant as Karla intended to serve both coffee and baked goods in her shop. Both icons repeat the color scheme of the logo and compliment the casual personality of Karla’s brand.
After completing the iconography I moved on to the social media headers that would be representing Karla’s brand in the digital space. I began by collecting a set of stock images that exemplified the personality and tone I had decided on so far. Using the images, typefaces and color schemes I created three different options for Karla to use on various social media platforms. All three headers incorporate the orange and brown color scheme while maintaining a casual and friendly atmosphere for her social media pages.
Finally, all that was left was to amalgamate all of the imagery created for her brand identity into a style guide for her or any future designers to reference for any future additions to the brand’s styles and supporting imagery. I created the document using Adobe InDesign to create a custom layout that reflected the brand but also was easy to follow for any readers to comprehend the decisions made about the designs and the standards and guidelines set forth by her founding design, including rules for logo and icon usage and the hex, RGB and CMYK information for our selected color choices.
Click through to Results to see the Final Style Guide
Click Here to View Deja Brew's Style Guide
Karla Kahvi had a strict three month deadline in order to assure she could complete the produtions all of the desired printed media and signage as well as begin promoting her business online - all in time for the launch of her coffee shop. To assure we were on track to have the completed designs within her timeframe it was crucial to keep in frequent contact and update her on the progress of the project to ensure the project met her expectations for her ideal customers and make any revisions she felt necessary to avoid any last minute change delays. The project moved along quickly all while obtaining her approval at each stage. The end result being a cohesive imagery identity and graphics that fit her intended personality for the brand.
Karla Kahvi received a full branding package including a logo, color scheme, typescale, icons and social media headers to help her establish her brand personality in the public eye all laid out in a style guide including standards for usage and reiterations of the elements which her brand personality was designed with - all within her timeline with plenty of time to secure the production of everything needed to launch a coffee shop. She can begin building recognition and excitement in her community and among her customers before she even opens her doors.
I'm Niki, a digital designer.
I 've had a desire to design ever since being introduced to Adobe Photoshop in my 7th Grade Business Technology class. The route I took with it being mainly digital art, but seeing the growing digital world I finally gained the confidence to pursue doing what I loved as more than just a hobby.
This lead to learning new skills and honing in the self-taught skills I had harnessed along the way by also learning how online designs are built and taking courses that emphasized the user's experience with design.
-
-
-
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form :(
