It’s been more than awhile…

I have been away from this blog for some time, engaged in work and life but always thinking about art and writing. I work with a photographic collection in a library and that has occupied more than a little of my time. I also write for several institutional blogs and at another personal blog 23 Things- A Journey and Reflection, and design, create, read, look–my time is awfully divided some days.

But I’m always looking, thinking, filing away ideas. Then a person wrote recently to ask a very astute question about one of my posts, and I had the desire to revisit my writings here. So I’m back and ready to fill my need to write and reflect on art and design and, hopefully, to engage.

Here’s to new beginnings and to my mission that I articulated when I began this blog of writing it all down–or some of it anyway!
2.1 The search is on

Advertisements

Photography: Another throwback

I saw an article on Mashable Tech today that contained an infographic put together by the Adobe design team that is responsible for digital photography software production. It seems to me that every few months I see such a graphic or a story about the last Kodachrome chemicals; all inevitably pose the “provocative” question about whether people remember or miss getting film developed. Provocative, of course, because the questioners know it to be a cheap and easy way to elicit the predictable pro and anti, bleeding heart responses, with a few accusations on each side that people don’t recognize quality or (the only possible comeback) people that don’t love digital are OLD.

Despite the predictability of these responses, however, it got me thinking about why people are so vehement in their position and of course it got me a little nostalgic for film. For starters, let me refute the idea that all people that have a soft spot for film are old–I received my BFA in photography in 2000 and my MFA in 2004. I learned to shoot and process film and when I taught basic photography we used traditional darkroom techniques. This is still done in many places and it is not because those institutions are behind the times. It is done this way because the processes still have value and learning them tends to lead to a better mastery of the camera–this is unarguably a prerequisite to becoming a professional.

I should mention that I shoot and process my work digitally. It is difficult to argue against the accessibility of software as opposed to chemistry. However, I do remember the magic of watching an image develop on paper or the anticipation of waiting for the film to come off the reel. This was part of the collective experience of traditional processing and to deny this would be inhuman. But to dwell on this mysticism is also to trivialize the value of chemical processing. It taught me patience and made me learn how to control my camera. I learned to shoot a lot, but also to pay attention to what I was shooting and to how I was composing. Digital often robs people of this ability because the idea that everything can be fixed in post processing takes over. Shoots get sloppy and there is no need to pay attention to the single frame. Memory is cheap, so just shoot, shoot, shoot and hope for the best. Also, as our level of patience has diminished our expectation that electronics will handle all the details has increased. Thus, using the manual functions of a camera, still necessary to fully control your imagery, is becoming unthinkable to many. This is, perhaps, what some of those sputtering respondents mean when they proclaim digital will always be inferior to film.

There is, I believe, another reason that digital photography has inspired a backlash unlike the digitization of other materials. Interestingly, photography has a dynamic history that is still young, at least compared to that of ceramics, sculpture, or painting; and yet, while truly archaic processes are still prized in those fields, basic photography has a rap for being old and outdated. It carries a sense of backwardness and those clinging are not valuing history, they are simply anti-technologists. This is unfair, but perhaps fitting in such a rapidly changing medium. However, while improvements in chemistry have replaced early methods–daguerreotypes, anyone, how about nitrate films–and have been embraced along the way, digital processes are different. Digital photography does not build on tradition; it is not the next advancement of process but instead a radical departure. It is perhaps the abject rejection of film and chemistry that stings for so many people. It is, like so much in our culture, easy to perceive this as a rejection of history, tradition, and wisdom–it is youth gone wild.

So as not to end with poetics, which seem to exacerbate the existing perception problems, let me stand in a gray area. Digital photography is the obvious path. It is cleaner, more environmentally responsible, and more accessible (I won’t touch the subset of photographers that think it is this very accessibility that deflates the sails of a “complex” field; I will save that for another day). It is a powerful tool that has come into its own. But there is still a need for film. It imbues us with a sense of patience and sharpens our skills; this is crucial in the learning stages. There is a Zen-like quality that needs to be realized in order to combat the instantaneousness of digital photo. Not to diminish instant photography, but in the learning stages a full mastery of the medium and tools is just not encouraged by this approach. So bring on both–it will keep future photographers grounded in excellent technique and will prevent us from slipping into the perpetual cult of the amateur.          

Kodachrome

Today seems like a good day for a little nostalgia. New year, looking forward, looking back–you get the idea. I received a BFA in photography in 2000 and an MFA in photography in 2004. That means that I honed my craft in the wake of transitions to digital photography. Those transitions were swift and sometimes difficult for many who had been invested in film photography for the better part of their lives. I shot many roles of film, developed many prints, and spent hours bent over chemical baths. And this process was wonderful. There is indeed something magical about watching an image appear on paper or unrolling that film from the reel. I have spent more time on digital processes, but I can still admit with the most ardent film supporters that something intangible is gone from the process.

In my entire life I have only shot one roll of Kodachrome. It was difficult to have processed because it needed to be mailed to a lab. I am more of an instant turnaround time fan. And yet, the colors truly were superior. I can see why it earned legendary status in the photo world and even in popular culture. It was jarring a few years ago to hear the inevitable announcement that Kodak would no longer produce the film. It was simply sad to hear last week that the last role was processed. The last of the chemicals are gone. It made me think of holding unprocessed rolls. Of people discovering rolls years later and revealing the contents, sometimes after the photographer had died. It made think of the excitement and mystery of stumbling upon something and the anticipation of waiting for the reveal. And it made me sad to think that those undeveloped Kodachrome rolls out there in the world will be lost. We have lost a little slice of something monumental here and it warrants reflection.

Check out the Mashable Magazine article here:   
http://mashable.com/2010/12/30/say-goodbye-to-kodachrome/

Creating a website: Design and technical issues – Part 4

Future Directions & Continuity:

Now for the last post about the design particulars of Taste the World Online.

Blog:

In order to keep the website current, I created a blog for Anne using Blogger. To date I have written all the contents for the site, blog, and Facebook page, however when her schedule settles down a little she will be able to keep the website updated with content through Blogger. The blog will allow her to add recipes and party ideas directly from the Internet, without having to either modify the website or ask me to make frequent additions. What I will maintain are the box areas that feature announcements (like upcoming events). These areas are small, however, and maintenance will be minimal. The blog, however, will ensure that users can find current content associated with the site, so there should be no sense that the storefront might be abandoned. My other hope is that through blogging Anne can develop a following of users that will discover the store website through that forum.

Check out the blog here:
www.tastetheworldonline.blogspot.com/

Site expansion:
The website is small in scale right now due to a number of factors. First, the store is newly opened, so the number of products available is relatively small and the number of products I was provided for photography purposes was even smaller. Therefore some of the category pages have less products listed and some product pages have alternate views while others (that could) do not. The space on these pages will allow for future growth, as will the addition of additional linked pages in each category.
Second, I have left space for buttons and shopping carts associated with ecommerce. I have researched some options and will likely use Zen Cart, which is an open source program that can be customized to fit the look of your website. I have encouraged Anne to create a PayPal Merchant Account to handle the payment (although to date she has been preoccupied with opening the physical store and is not ready to engage in online ordering). After reading about the pros and cons of the PayPal system, I feel that she would benefit from their small commission fee, recognizable status, and the protections they offer for ecommerce. The payment functions seem easy to set up, and they are compatible with many third-party shopping cart applications, including Zen Cart. Adding this functionality will be the next logical step in expanding this site in the future.

For now, the Taste the World website strikes a balance between informational pages (i.e. how to present cheese, why bother with roasted coffee, etc.) and product pages that give descriptive information and prices. Anyone trying to scope out the physical store prior to actually heading down there should find all the information they need on this website. The design and information on the Web should assure potential customers that the physical location—which they can see pictures of on the site—will live up to their expectations of high-quality products and a pleasant ambiance. The future of the site is exciting, as it is designed to grow at the rate of the business, and areas for expansion are already engineered into the basic design.

Creating a website: Design and technical issues – Part 3

Part three of this four part commentary on Taste the World Online addresses issues and challenges. If you have been following my posts over the past few months you are familiar with the discussion of some sticking points. Below are some of the larger challenges I encountered.

Graphics:
I photographed or drew all the images on the website in order to avoid any copyright infringement issues, with a few notable exceptions. I sent my father to photograph the store location images since the physical location is in Upstate New York, which is inaccessible for me at the moment. I also sent an email to the owners of Blair’s Hot Sauces (a small company) and they were nice enough to send me a number of product shots that I could freely use to sell their products. All other icons, buttons, logo, texture elements, and imagery were completed using a combination of Photoshop, Illustrator, photography, and hand drawing. For the logo and quote on the index page I incorporated the font Zapfino, for which I purchased a commercial license. The other font, Caviar Dreams, which I used for the navigational elements, was available under a Creative Commons license that allowed for commercial use.

All the images were sized in Photoshop and then optimized using the “save for web and devices” option. Whenever possible the images were saved as JPEGs, however it was necessary to save some images as PNG-24 files in order to preserve transparency. While this increased the file sizes, in some cases it was necessary in order create an effective design (such as in the creation of the rollover buttons).

I created all the page elements within Photoshop, and then created a CSS file in Dreamweaver that incorporated appropriately placed divs to contain the separate elements. As for the look of the overall page, I incorporated some modern trends to make the page appear sleek. This included the use of rounded corners, which have come to be associated with Web 2.0 design. Far from wanting to invoke that computer feel, however, I balanced transparency, color scheme, and sharp edges with the rounded corners. I made the header fall short of the page edge in order have the background begin to blend with the active area of the page at the top, and added a round corner just at one edge. I had the hand drawn graphic spill over from the header to break up the potential boxiness of the page. I was looking for something sleek and sophisticated that still seemed rich, glamorous, and natural. Similarly, the drop shadows and rounded edges on the transparent boxes were intended to add depth and a stylish edge without screaming out “contemporary.”

Challenges:
Preparing this site from scratch was both interesting and at times frustrating. There was a point when I somehow tweaked the code in a way that caused the website to develop serious issues; I was ultimately unable to recover and after many hours combing the code and reviewing discussion forums in an attempt to discover what I might have done, I simply rebuilt the template. This has made me acutely aware of the fact that I can do simple hand coding and rectify simplistic errors that crop up, but beyond that my skills need serious development. A class will be helpful in refining the basics, as will additional practice.

There were also some elements that proved to be beyond the scope of my knowledge. For instance, I understand that using graphical text poses accessibility and search engine optimization issues. I have read about several alternatives to utilize fancy fonts without creating image files, but decided against incorporating them. First, using SIFR in order to replace fonts seems to be quickly becoming obsolete. Using the CSS rule @fontface is preferable. This method, however, requires that the font carry a web license, which is not necessarily included in a commercial license. My Zapfino font could have been handled in this manner, in particular on the index page where a graphic font occupies a large area in the main content box. This graphic, while it has attached alt text, both bucks accessibility and adds unnecessary size to the page. However, as I read more about the @fontface rule I found a lot of information about it not working in Internet Explorer; the proposed workaround was simply beyond my current skill. I prefer Firefox as a browser, however many people do use IE, so I felt that ignoring such a display issue was problematic. When I have better honed my skills I will definitely rethink the text-graphic issue, but for now it had to suffice.

SEO and promotion:
Since ideally this website will help to attract customers to Anne’s business, I tried to do some things to help with location. For starters, I made sure to include a good, concise Meta description in the code on every page. I also included the Meta keywords, although I remember that the MacDonald text and forums I have seen note that Google mostly ignores keywords because of past abuses. Even so, I added them just in case it will help (and I noticed while combing page sources that most web designers are still including them). I also made sure to include a link to the website from the blog page I created for Anne, as well as from Facebook. I added a link to the page from my own blog as well and put a web link when I created a location for the business on Google Places. I realize that these links fall far short of building a web presence, but it is a start. I attempted to make as much of the page as possible decipherable for web crawlers as well, and despite the exceptions I noted above, made sure heading text was handled in the page as a web-safe font instead of a graphic.

One other challenge I struggled with was the decision about whether to use a pop-up window for the Recipes button. The main issue was that I modified a Blogger blog template to look like the rest of the Taste the World web pages with the intention of using FTP to publish the blog to a page on the main website. Unfortunately I was unaware that Blogger stopped supporting this feature earlier this year. I have been unable, to date, to successfully point the logo on the blog page back to main website, as it defaults to linking to the Blogger page and as far as I can tell they remove the target attribute from the code view within the blogger application. I will eventually rebuild the template from scratch, as I know you can use unique CSS to control the behavior of your own pages, but have not had the time to invest in this project yet. As such, I felt many people would be confused by the similar look of the blog page, yet the lack of functionality of the logo linking back to the index. There is always the back button, but I believe that in not realizing they had left the main website, users might be frustrated by the inability to navigate.

I read a lot of opinions about the frustration a pop-up window causes viewers, but ultimately decided that it was necessary. The users can open the Recipes blog while the main ecommerce site remains open. This seems, for now, to be the best compromise. I also read some heated debates about the controversies between using target= blank or JavaScript to point to a new window. Target= blank is non-compliant with WC3 standards, however it also easy to drop into a site and for now proved to be the best solution… real world design.

Next up, future directions for the website.

Creating a website: Design and technical issues – Part 2

Design Elements:



Good design helps to communicate a message, rather than obscuring the contents of a website. As such, simplicity is a great design consideration. However, simple, clean design does not mean boring design. The following considerations were part of my process to create a layered and sophisticated look that would reflect the gourmet food theme of the website without adding a lot of clutter.

Functionality:
I created the design for this website with a few functional issues in mind. First, since it is a store website featuring products there are certain elements that users expect to find. I kept in mind that such visitors would be driven away from the site if they had to hunt too hard in order to locate these elements. The information about hours and store location is prominently placed on the contact page. Additionally, the address, phone, number and email address are footer elements that remain consistent on each page. Most importantly, however, I considered the ease of navigation. If users can’t find something quickly, they simply move on; quickly equates to within one or two clicks.

The main navigation is situated on the right-hand side of the page, with clearly labeled categories of About, Shop, Contact, and Recipes appearing horizontally in the header. Simple rollover graphics help to indicate that these are links. There is no Home button, however the logo in the upper left is placed in a typical location and links to the index page from all other pages; this is so common that virtually all users would attempt to click there prior to looking for an actual home button (I certainly do). The addition of a button that actually read Home seemed redundant, and I feel that typical Internet users are past the point of needing such a text-based cue to return to the index page of a website. 

The secondary navigation is located on the right-hand side as well, with the main product categories listed vertically. I had initially planned to have this secondary navigation appear when users clicked the shop page, and remain on all tertiary category and product pages. Upon viewing dozens of ecommerce sites, however, I noted that almost all of the designs kept such product navigation intact on every page, including the home page. I decided that this was likely an ingrained expectation of viewers, and that removing the category buttons on the index, about, and contact pages would be aggravating to users.

I also considered whether cascading menus would be appropriate, since the main categories control navigation to particular products. Many sites do use such stacking features to obscure and reveal increasingly specific categories, but I decided in the end that the selection on Taste the World was too small to justify this feature. In fact, it would probably be aggravating to see stacked menus reveal only 3-4 choices, and would create extra clicking, which is a serious design faux pas. Instead, the shop page contains a descriptive category list, with each subheading linked to the appropriate category page. These links are the same as the navigational links on the right, so users can bypass the shop page altogether if desired, or click from within the main content area on the shop page, if that is what they are used to. They can return to any category page at any point within the site simply by using the secondary navigational menu.

The category pages offer thumbnails of products, as well as brief descriptions of the overall category. Ceramics and Accessories, therefore, contains images that link to individual product pages detailing specific price, use, and imagery of serving pieces. The category pages reflect another trend in ecommerce sites, which is to have a series of images on one or more pages that link to more detailed product pages. It is a logical organizational tool and one that is likely expected by most users. The individual product pages are also designed with typical expectations in mind. They include a sizable product shot, and when available and appropriate, alternate views. The alternate views are located as thumbnails below the main image, and are remote rollover buttons. Eventually, the site will include a functional shopping cart, so an add to cart button will be added to each product page; ample space has been left at the bottom to accommodate this future addition.

Beyond navigation, there are some other functional considerations. I used the color contrast analyzer available at Colors on the Web to check my text/background combinations to make sure they met accessibility standards, which they do. The only contrast area that was flagged as problematic was the dark logo on the red header banner. I could not find a color combination that worked in this case while still fitting within the site color palette, and simply made the assessment that the combination was contrasty enough for the majority of Internet users. I also made sure to label all images with alt text to ensure that text readers could effectively process what is a relatively graphics-heavy website. This includes the rollover buttons, which are an image that utilizes text. Beyond the logo, navigational buttons, and a decorative quote on the index page, all text is written in the Trebuchet font, which is approved for the web. Therefore, all text should render correctly in most browsers. Additionally, I increased the spacing between lines and made sure the smallest text was set to a 12pt size to increase the readability of the website contents. I also made the main content block light in color so I could use darker fonts in that area. I felt that light on dark fonts (which I like the look of) should be reserved for the side boxes where short snippets would be easy to read. I felt that the longer text sections required for the main content area might cause fatigue if viewers were expected to read light text on a dark background for such passages.

Balance, texture, and space:

The design is arranged using the rule of thirds, with the main content area occupying two-thirds of the horizontal space, and the navigation and announcement blocks occupy the remaining third. This gives the content area a greater presence on the page, and should pull a viewer’s eye there first. Additionally, the use of burgundy gradients in the header and footer areas creates a sense of balance and unity as the repetition of the colors creates a mirror effect on the page. Additionally, textural elements add interest to the background and help to draw the viewer’s eye across the page. First, the translucent coffee cups in the header bar both mirror the logo design and draw attention across the page towards the navigation bar. The graphic overlaps the background slightly in order to eliminate the boxy feel that might otherwise prevail on the page. The drawings of star anise seeds repeated on the left and right sides of the background help to draw the gaze up an down the page. They also create an asymmetrical balance because the same images are repeated on the left and right, but occupy different spatial areas. The smaller but more numerous left-hand seeds are placed closer to one another, while the larger and more flowing seed drawing on the right is surrounded by more open space. These size and space differences offset one another on the page. Both the coffee cups and spice images reference the store theme and products, and so are not just arbitrary textures.

As for space, some areas have been left open to create an uncluttered feel. There is also room for growth here as there is plenty of space to add a small shopping bag icon and/or search box under the header if the site becomes large enough to warrant such a feature. On the secondary pages there is a lower box in the right-hand column that is intended to contain important information or add graphical interest through images, depending on the page. The separate container box helps to set important sound bites of information or announcements apart from the main content area. As such, the grand opening announcement initially occupied this spot, and has now been replaced by an announcement of a new Bean Club promotion. This important area has been removed on the tertiary product pages, however, in order to make sure the space there remains uncluttered. This is due to the large graphics already in place on those pages; the open area under the navigation bar creates a good balance with the product space, and trying to feature additional content in that smaller box would compete with the main content on those pages.

Color:

Color is perhaps the most important element I considered in this design. I began with the intent of using burgundy because I felt it conveyed a certain richness. Jason Beaird backed up this assumption when he suggested that such deep red conveyed associations with fine living, but that such colors were also associated with power and hunger. This seemed perfect for a gourmet food store. I initially began with the intent of using an analogous color scheme, incorporating other colors that suggested associations with food—namely yellow and orange. After working with these colors, however, I could not find a combination of yellow, orange, and burgundy that appeared sophisticated (no matter how “burnt” the orange color I chose). It simply created a site with a harvest look.
I then decided to use the color palette generator at Colors on the Web to try out different looks. I began with my original burgundy (#80021F) and tried triadic and complementary color schemes. Interestingly, I would never have independently used a complementary color scheme with red and green because it sounds Christmas-like. However, the burgundy was offset by a rather rich green. I then tweaked the green so it was not quite exactly opposite, and ended up with a rich light olive color (#78752C). I then took my new color scheme to Adobe Kuler in order to generate a full palette for my website. There I added tints and shades of the original colors, as well as a rich brown that suggested the idea of coffee to me (an important element of the store). I ended up with a dark, medium, and light version of brown, burgundy, and olive green, and added an ivory color as the lightest tint (in lieu of white). This color palette reminded me of a winery, coffee house, or other sophisticated food topic, and therefore seemed perfect for Taste the World. (I also made my new color palette public, since I love the type of resource sharing that drives the Web.)

The actual website displays all the colors and ranges in the described palette. Every color is repeated somewhere in order to add unity to the elements on the page. The deep brown of the background, for instance, reappears in the hand drawings (which were re-colored in Photoshop to fit the overall palette). The ivory from the main content area is repeated in the main navigational headings, footer text, and rollover graphics. The dark burgundy is repeated in the text heading, and so forth. This all sounds very “matchy,” but it makes for an overall unified look and ensures some weird background element doesn’t suddenly compete with the site contents.

Next up I’ll relay some of the issues and challenges I faced during the design.

Creating a website: Design and technical issues – Part 1

In the next few posts I will cover some of the design and technical issues associated with creating the Taste the World website. Reflection is key to improving design skills, so here goes with part one. 

Audience:

The first consideration in any good web design has to be ensuring that it will communicate with the correct audience. Obviously a website is freely available for anyone on the Internet to view, however the purpose and content of the site does need to vary depending on the likely users. For instance, if I created an informational medical website it might have a sleek but authoritative design with a limited color palette. It is unlikely that I would include hand-drawn graphics or dancing animation since it would be difficult for users to take the site seriously. If I was designing a site advertising new art classes for kids, however, the hand-drawn graphics would be perfect, as would lots of bold primary colors. The two diverse audiences would call for two radically different designs. 
 

TasteTheWorldOnline.com is a companion site to my aunt, Anne Backer’s, newly opened gourmet food store. As such, the expected audience is visitors looking to read about or purchase gourmet foods and coffee; additionally, these visitors would presumably be looking for information about the store, including its history, ownership, mission, physical location, and hours. They might also be interested in viewing recipes that incorporate the available products as well as suggestions for hosting parties and events. All of these elements are included in the website and are intended to meet the expectations of this audience. Additionally, the informational sections are intended to draw in visitors that might be searching for information on topics such as roasted coffee or cheese pairings, but not necessarily products. These users would benefit from the information and as a bonus their interest in the gourmet products available might be piqued. Either way, it is clear that designing for a largely consumer audience requires attention to certain details common to many ecommerce web sites.

Tools & Methods:

Over the course of creating this website I utilized a number of different software packages, hardware, and freely available scripts. Following is a description of the major elements that went into producing the website sections.

Hardware:
I used a Nikon D5000 SLR camera fitted with a Nikkor 18-55mm lens for the product photography. I also utilized Nikkor close-up rings (+2, +2, +4 in various combinations) and a daylight-balancing filter on some of the shots. The design and graphics work was completed on a Macbook Pro with a 2.66 Ghz Intel Core 2 Duo processor; the operating system was Mac OS X Snow Leopard, version 10.6.5. I used an Epson Perfection V600 Photo Scanner to scan the hand-drawn graphics incorporated into the web site.

Software:
In order to complete the logo design that appears in the upper left corner of the header I first drew the complete design on paper. After scanning I used Adobe Illustrator CS5 to create a scalable vector file and subsequently converted the file to PNG-24 format for use on the web. All of the graphics work, including cropping, retouching, image optimization, and the creation of rollover buttons was done using Adobe Photoshop CS4. The web site design was completed using Adobe Dreamweaver CS5. I designed the site from scratch by creating an external style sheet to govern all the major elements of each page.

Scripts and web resources:
The remote and resident rollover graphics were created using the scripts that Dreamweaver automatically generates when using the “behaviors” menu of the program to swap images. The rotating slideshows on the index and shop pages were added using a free script from the Dynamic Drive website. This script was simply changed to customize the images, size, and timing and inserted into the header section of the page; then some additional script was added to the div where the slideshow would appear. I also used a few Internet based tools to refine the design process, including the color creation and analysis tools at Adobe Kuler and Colors on the Web, and the link checker at the WC3 website. I also used the Google map generator at www.map-generator.org; this was actually easier to use than the official Google version and allowed a slightly incorrect marker placement to be corrected prior to acquiring the code. It was not possible in the Google Maps application to move the marker (which was placed across the river on East First Street instead of West First Street).

Web host and domain name:
The website is hosted by GoDaddy, and incorporates an SSL certificate, which will be useful for future development of site elements, such as functional ecommerce. I advised Anne to purchase a package with SSL certificate (so no non-secure messages pop up when a shopping cart grabs the logo), domain name, and business hosting. Her chosen domain name is a little long, but was the best of the available choices that included her full store name. I felt the inclusion of the full “Taste the World” name was not imperative, but Anne felt that the unaltered name was important. I did convince her to avoid uncommon extensions, even though the original title was available. For instance, TasteTheWorld.biz, .mobi, .us, and .me were available. Instead, the addition of Online to her title allowed for a .com extension. She did also purchase TasteTheWorldOnline.net, which I have set to forward to her main .com website.

Next time I’ll talk about the design choices I made, including the color palette, textures, spacing, and balance.