Design Methodology

As this portfolio is an artifact itself, I would like to reflect on my choices from prewriting to publishing.

Initial Considerations

When I was an undergrad, I minored in Information Technology. My experience in web design between the PTW and IT programs, along with my own self-improvement, is what lead me to create this portfolio without the use of a What You See Is What You Get (WYSIWYG) web editor (e.g., Wix, Google Sites, Weebly, WordPress, etc.).

No stranger to a template, I began searching the internet for Bootstrap web templates. Bootstrap is a popular framework for developers to use for building out-of-the-box responsive sites. This means that as long as I follow Bootstrap formatting (e.g., applying the right div class or ID tags in the right places), I can nearly guarantee that anyone navigating to my website can access it no matter what device they are using.

This is because Bootstrap relies on columns and rows to break content up. As users with different devices (i.e., screen resolution) navigate to my portfolio, the content will adjust to ensure ease-of-access.

My Resources

The following resources were crucial in the development of this website:

NOTE: I work in a Mac environment. Some of these tools may not be suitable for Windows, Chrome, or Linux environments.
  • Bootstrap Website Templates and Resources - The free-to-use template I built this website from.
  • Snagit - Used to quickly crop or minorly edit images. Also used to create gifs.
  • Affinity Designer - Used to create or edit banner and section break images (both .svg and .png).
  • Textastic - Used to edit raw code for this website (HTML, CSS, etc.)
  • Coolors app - Used to create a color pallet to follow for webiste branding
  • Some image resources were purchased from ShutterStock
    • (You can find free, open-source images to use or modify too on your default browser or the Creative Commons Search)
  • A text editor or file converter to access and output artifact files as .pdfs
  • A File Transfer Protocal (FTP) tool such as Cyberduck (some code editors have built-in FTP functionality)
  • A domain to upload and house your code. An alternative to a paid domain could be GitHub Pages (which does require some technical background)

Though you may see I utilized tools you have to pay for, I am a huge fan of open source and free tools. Consider using image editors like GIMP and Inkscape. Most operating systems have a native screen capturing tool, but Greenshot is one external suggestion I could recommend. There are tons of code editors out there that support a varity of features (this may require some research). You can find ones such as Notepad++ or Atom.io that may be helpful.

motion gif scrolling through site page and HTML code

Drafting

Although I save a lot of time by starting with a template, I had an overhaul of alterations to make to the site's organization and formatting.

This meant going through the HTML and CSS pages to understand the initial design of the template. This necessary process provides me with some familiarity with the site's current organization so I can best assess how to tear it a part.

My first step was to strip all of the filler content from the template and remove the existing color scheme. Adding my own "Lorem Ipsum" (filler text), testing the site's code and formatting pages (spacing, font choices, image placement, etc.) were my first priority. I prefer minimalist designs because it reminds me of software manuals like .chm or static generated sites. I feel like it is pretty common with information design to focus less on flamboyancy and more on the accessibility of content.

image of site color scheme

I'm not sure how long I had this green color palette, but I did have these greens and the off-black ready for this very occassion. Why? because it is one of my favorite colors. I didn't make any changes to the fonts used in the template because I prefer a sans-serif typeface. Plus, this font is widely acceptable and further backs my claim of usability.

motion gif demonstrating editing and reviewing code

Revising

As I have changed my writer's site, I've used a git repository to save most of the changes one class at a time. (Some of those early iterations were too beautiful to live.) I stored my source materials in a cloud folder. I used atom on my laptop and Textastic on my tablet.

Usually, after (though sometimes during) a meeting with my portfolio committee, I would load my source code into Textastic and begin applying the changes directly.

Most of my earlier revisions weren't content specific but related to my purpose. I had difficulty visualizing the rhetorical situation this site addressed because I wasn't sure how I wanted to present myself. Unsure of my own goals, how could I commit to a specific message?

I knew I was very interested in education because of my time in the University Writing Center (UWC) at UALR and teaching. I also have my B.A. in Professional and Technical Writing (PTW), and I have a developing career in said field. Somehow focused on needing to present myself as a fully-developed professional in every area, I couldn't see myself delivering this message because I lacked experience in each field.

When I began to apply the PTW M.A learning outcomes as a lens to my experience, I saw the value in unifying all of my work. Each project or experience, education or corporate-based, convey that I am a person working in the industry with the capability to guide learners through processes and learning objectives.

motion gif of uploading raw files to domain

Publishing

Regardless of what phase I was at during this project, there is always an excitement that comes with launching my File Transfer Protocal (FTP) application.

Of course this process is important because it is the only way I can make my website accessable without sending mass emails containing a zipped folder and a "README.md" (markdown file).

However, even though I can preview the website on my local machine, uploading it to my domain is when I get to code to make sure each page functions properly. My final saves and pushing my code to my domain (updating the server with the new web files) isn't my last by any means. Once the site is live, I then load each page and compare it to my local preview. After making ends meet (publishing, troubleshooting, repeat), I am able to focus on content development without chasing down pesky bugs.