Responsive Site/WordPress Theme

The second & third and final projects for Advanced Web Design | Creator: K

Designing a site in a visual editor, “prototyping” said site/establishing animations and functionality, and subsequently developing a from-scratch WordPress customized theme for that particular site are amongst those aspects which define the crux of Web development. This entire, multi-step, multifaceted, and, indeed, multiplex project was a phenomenal learning experience, and utterly emphasizes the definition of being a Website developer. I truly acquired an superbly immense amount of knowledge pertinent to the ever-expansive assemblage of multiple programming languages which serve as the foundations of the Web: H.T.M.L., P.H.P., & C.S.S. All of the processes that a developer partakes in whilst engineering a theme to function cohesively, properly, and beautifully with the core WordPress software exist as a testament to one’s skills and ability to design. Creating a vision in code is no simple endeavor, as one must be quite fluent to fully comprehend the perceivable magnitude of a software that effectively powers over thirty percent of the Internet. With all this aside, it is, indubitably, tremendously enjoyable, and the cumulative magnum opus serves as a definitive culmination of achievement. And so, given this knowledge, I sincerely hope you enjoy my custom WordPress theme as much as I did developing it. 😊

The easy aspects:

  • Aggregating the resources necessary for development (underscores.me basic theme, images, etc.)
  • Creating custom classes and IDs and styling them via “style.css
  • Integrating previously dev’d code into the new theme

The challenging aspects:

  • Styling all of the custom CSS present in the PHP files that come with the template theme, from scratch, effectively, properly, and in a visually appealing manner
  • Discovering which CSS activates/affects other code in the theme folder’s files from the bare foundations of the template, without prior knowledge
  • Avoiding PHP errors and debugging successfully and with precision

What I learned:

  • An immense amount of knowledge pertinent to the core WP software and its codex
  • How to integrate PHP in various manners, and in various files
  • A plethora of information regarding CSS, SASS, and other relevant, associated data/aspects

How my project could be improved:

  • Different colors could be incorporated to enhance legibility (in regards to text gradients and clippings)
  • A more effective manner of media querying could be explored and implemented
  • Compatibility of the site with other browsers/operating systems should be taken into account

How the assignment could be improved:

  • Discussing more about PHP and its association with CSS and HTML, especially in direct regards to creating a custom WP theme from foundational code, would be beneficial
  • Code snippets and explanations of said code could be included in the directions for clarity and developmental assistance
  • Coalescing this project directly with a previous project to which it has pertinence, and simply coding that project itself, holistically, over time, could improve understanding of the task at hand, as well as permit for a deeper knowledge of the aforementioned languages

Application of knowledge for future assignments:

  • Development of future WordPress themes shall incorporate the knowledge acquired from this particular project
  • Awareness and utilization of online resources, such as the WordPress Blog and Codex, will exist/occur in the future
  • A more pedantic, profound, and acute understanding of modularized code, such as the code associated with this specific project, will be consistently considered whilst designing/programming

Inspiration (various readings, tutorials, YouTube videos, and in-class exercises/labs):

  • The WordPress Blog, Codex, and articles and information associated with the entirety of the structure of the open-source WordPress code itself, especially ones originating from or possessing direct ties to the WordPress.org Web site
  • Online videos and class presentations detailing various aspects of the WordPress universe
  • And, ultimately, none other than my professor, who encouraged us to delve into the universe of WordPress development. 😄

CSS

The first project for Advanced Web Design | Creator: K

CSS is the core manner in which to style/stylize Web sites and Web pages on the Internet—and, of course, give them a flair whilst doing so. A beautiful and modernized language with an unfathomable plethora of visual/aesthetic design capabilities, one may become creatively lost in its seemingly infinite intricacies and functionalities, and in the best way possible. And, in the end, the result—as one would hope—is a testament to the sheer might of this Web interface programming language: a beautiful, unique, and distinctly representative image of your capabilities that conveys the computing prowess you possess. A figurative light is shone on one’s abilities, especially in regards to, essentially, the absolute minimum required to establish such a contrivance: a singular computer. And with only a keyboard and screen necessary to accomplish the feat of programming and simultaneously designing the Web, you, yourself, as a person, are truly tested in the face of the Cascading Style Sheets language.

The easy aspects:

  • Formulating a basic, single-page layout for the content of the page via digital sketching, mental imagery, etc. (without programming)
  • Creating appropriate files that coordinate conjunctively to establish a modularized Web page
  • Utilizing the appropriate workflow for this—Gulp (alongside “npm”/node package manager and “Node.js”)

The challenging aspects:

  • Properly and effectively utilizing Grid and “Flexbox” Layouts
  • Positioning, aligning, and—quite simply—laying out the entire page (in an exact manner) according to a vision of how it should appear
  • Diagnosing and immediately remedying complex errors (often with limited knowledge at the time)

What I learned:

  • The intricacies and complexities of the two above-mentioned layout managers
  • How to identify a scenario in which either or both of the two must be employed
  • The procedures associated with deploying a Web site/page which includes Grid and “Flexbox”

How my project could be improved:

  • A different coding implementation could have been utilized (either for simplicity, clarity, or other reasons)
  • Accounting for various browsers and their supported features, as well as the natural appearance of the Web page itself, should have occurred
  • Simplified class names and ID names would have improved the code, holistically speaking

How the assignment could be improved:

  • A discussion of various means of styling the page (such as via floats, absolute positioning, etc.) besides via these two aforementioned Website layout managers would have assisted in the page’s development cycle
  • Permittance to not be constrained to a singular color scheme, if possible
  • A different topic around which to structure the page could have been utilized

Application of knowledge for future assignments:

  • The designations between Grid and “Flexbox” will be taken into account when designing and coding future sites/pages
  • The proper manner of debugging of a site that employs these layout managers shall be understood
  • The varying complexity levels of both layout managers and their usage scenarios will be known

Inspiration (various readings, tutorials, YouTube videos, and in-class exercises/labs):

  • Articles from popular Web sites that centralize upon Web-based programming languages—especially CSS
  • A myriad of online Web videos that discuss CSS code, its proper implementations in direct regards to the Grid and “Flexbox” Layout Managers, and so forth
  • Online notes from the class itself that permitted this particular page to be built given the presented information

Personal Brand

The third and final project for Print Design | Creator: K

Through this project, we completely defined ourselves professionally. The resultant creations serve as true, official representations of that of ourselves which we choose to present publicly, especially amongst those who exist as our peers. We creatively, uniquely, and distinctly represent the most significant aspects of our character on these tactically discernible entities which seek to characterize the metaphysical elements of our being in a tangible, perceivable manner. We do this concisely, whilst still encapsulating the aforementioned—who we are as people, and what we offer to the various multiplex, pedagogically intensive industries of the world. One must strive to differentiate themselves in an ever-expanding metaphorical sea of individuals—via their (personal) work, accomplishments/awards, real-world experience, and much more. And, via these creations, this is exactly what is attempted to be done.

The easy aspects:

  • Formatting the InDesign documents for printing (whilst including bleeds, margins, and so forth)
  • Developing the content of the products themselves (id est, the résumé and business card)
  • Utilizing the software, generally speaking, to create each unique design

The challenging aspects:

  • Realizing the situation in which to incorporate the more distinct aspects of the software itself that allow for precise formatting (Tabs, precise line-height and spacing, etc.)
  • Conveying information in a concise, yet effective manner
  • Establishing circumstantially appropriate paragraph and character styles, and maintaining each one thereof

What I learned:

  • The procedures associated with developing strictly professional products that display information appropriately
  • The various advantages a software product such as InDesign possesses over standardized word processor applications
  • How to properly and effectively maintain reader interest with interesting, yet professional typefaces and styling

How my project could be improved:

  • Typefaces/font families which are slightly more legible may have been integrated to increase readability
  • Different colors, card sizes, or card layouts would have allowed for even more design-based diversity, theoretically
  • More information pertinent to myself could have been integrated into the business card

How the assignment could be improved:

  • Including an even more rich explanation pertinent to InDesign’s tool set would have been an improvement
  • The manners in which various Adobe products interconnect for the purpose of such products could have been elaborated upon/discussed
  • Including more information on how to professionalize our résumé and business card(s) would have been of significant value (such as discussing lamination, various formatting approaches, and so on)

Application of knowledge for future assignments:

  • An understanding of personal professional representation will be implemented in future work
  • Manners in which to assist others with the above-created products shall be utilized
  • Software functionalities and printmaking techniques will be employed

Inspiration (various readings, tutorials, YouTube videos, and in-class exercises/labs, et cetera):

  • Class-pertinent articles relating to proper and improper résumé design techniques were of prominent importance
  • Personal research into the format, layout, and appropriate appearance of the aforementioned was quite significant
  • Online/Internet videos elaborating upon and displaying interesting business card designs were of use, as well

Merch

The second project for Print Design | Creator: K

This particular project was especially inspired by a wholesome love and curiosity of my own, as well as my country’s, heritage, culture, and background, as well as my personal interests and fascinations. All of the creations resulting from this product were developed with utter, ecstatic cheerfulness, as witnessing my culture and interests come to life was a phenomenon like no other. To perceive a visual representation of my digital work was truly inspiring, and, naturally, I have come to understand how to successfully proceed in making such physical representations of my mental conceptualizations, frameworks, and, ultimately, designs. Actively partaking in first designing the poster and subsequently manually commandeering the process of developing a tangible print, then mounting it on a canvas only served to supplement the design with beauty, elegance, grace, and professionalism. And as for the sticker portion—the second aspect, which consummates the project itself—the same applies, truly. Quite simply stated, this was a phenomenal learning experience which allowed for personal discovery and educational acquisition, and I am glad to have partaken in it.

The easy aspects:

  • Setting up the program and file constraints & dimensions accordingly and appropriately
  • Utilizing the software with previously acquired knowledge to create above-mentioned images/designs
  • Incorporating various design elements and tool functionalities in order to create cohesive visualizations (and, thus, the project itself)

The challenging aspects:

  • Precisely and effectively utilizing mechanical, manual tools to frame the poster image precisely as well as the stickers
  • Incorporating bleeds and margins effectively when printing, so as to establish a successfully printed design (trial and error-based procedures)
  • Discovering the best possible manner in which to go about performing the above-mentioned

What I learned:

  • Standardized, as well as personally applicable, practices and methodologies
  • How to efficiently and felicitously utilize available tools to derive a professional product
  • The significance of all details—however seemingly discreet or, inversely, prominent/conspicuous—in the creation of such a project

How my project could be improved:

  • The backing and foam-core boards could have been even more precisely framed
  • More distinct colors may have been implemented
  • A different icon schema (flat/skeuomorphic design, etc.) might have resulted in an improved creation

How the assignment could be improved:

  • Via the implementation of a proj. structure that is more open to interpretation, such as one that permits for completely arbitrary poster sizes, materials, colors, etc.
  • An even broader scheme of choices for designs would have allowed for more variety
  • Even more software- and printing-specific, helpful information could have been mentioned

Application of knowledge for future assignments:

  • Commercial-based product-creational knowledge will be utilized
  • Oversize printing information and processes shall be implemented in similar projects
  • Awareness of the time-length and complexity of certain tasks will be understood

Inspiration (various readings, tutorials, YouTube videos, and in-class exercises/labs, et cetera):

  • Class “lab” assignments and presentation data was essential in the creational process
  • Distinct online/Internet tutorials pertinent to oversize printing
  • Embedded project document articles relevant to such processes