Project/Client Request Outline: Coen Drexler, Website Portfolio Assessment, Coder Academy
Website Purpose/Intent:
The purpose of this website is to serve as a personal portfolio for me, and as a public representation/access tool for my brand. I should be able to access this site and the material it contains as an administrator, while visiting users cannot. I should retain complete control over all material on the portfolio site, and it should be built in such a way to make the distribution and updating of said material as simple and maintainable as possible. Whilst it is inevitable that for a period of time, the work contained in this site will be irrelevant, it is important to demonstrate investment and work on a personally branded page, and to build it with the intention of expanding/updating all contained content.
It should have 4 pages: a home splash page, which itself links to a comprehensive find me/blog section, a portfolio page, and a personal motivation page, each containing all relevant information for each topic.
Intended audience:
"The intended audience of this website is anyone seeking someone such as myself with development skills motivated by creative personality. Therefore, the official intended audience is anyone wishing to review my overall portfolio of work, and the details of me/my brand. In making a portfolio page, the intended audience is intentionally kept as broad as possible, so as to maximise the potential passive reach, as well as to reflect the inclusive intention of my brand. In general, it is expected that focusing the UI around the potential experience of any industry professional interacting with it (see appendix a: user stories) will be the most effective and demonstrative way to communicate my suitableness for client projects.
The intended audience of this website is anyone seeking a worker with development skills and personality. Considering this when deciding how I wanted to portray myself in a website format, I considered how it is my website could be used with user stories.
User Stories: (See Appendix A for a copy of the all user stories)
Use cases for intentional and unintentional visitors of the website, through to administrator and accessibility dependent users were considered. From these, I was able to outline what functions and overall function my website would require.
Story Feature Dependencies:
Referencing the user stories, I considered what each use case would require. They are as follows:
Case: Always access contact information
Requirement: A navigation bar of contact details always stuck to the top of the window
Case: At all relevant times, locate navigation content
Requirement: Where a user would require navigation prompts, the page navigation bar will be visible.
Case: Access the site with minimal data/processing requirements
Requirement: minimise image size, use, and JavaScript script node count.
Case: Access the site with no offensive or confronting imagery/sound/text
Requirement: use only generally friendly images and text on my website. No sound will be used.
Case: At first glance, identify the individual’s expressed personal values
Requirement: using a banner image containing a musical instrument/a laptop with a development environment open, and me sitting in-between both, will convey the different interests I pursue actively. Additionally, supportive text will help emphasize the message, give it more memorable phrasing, and assist screen reader users in understanding the brand.
Case: Immediately identify the page intention, author, and risk
Requirement: the banner image being the first visible element of the page, it will contain the basic semantic information about the page intention.
Additional Design Elements:
Animated scroll bar: in order to subconsciously encourage the visitor to scroll further, and also to demonstrate a certain level of developer ability, it was desired from the beginning of the project that I would like to control the size/visibility of elements in the navigation bar to reveal themselves in proportion to the amount the user has scrolled down the page.
Experience page ‘skill’ tiles: I’d like to incorporate a more visually engaging representation of my abilities as a developer than a simple list of current skills. Instead, while still a list, I accentuate the impact of the content as a whole by presenting my skills in separate rows, containing a graphical depiction ‘tile’ for the skill itself, and a description of my experience in the skillset adjacent.
Contact page ‘contact’ tiles: Much like the experience page tiles, to make for a more engaging experience and to properly consider the UI of my website, I wish to incorporate interactive button style tiles that link to my alternative media.
Branding Choices:
When considering what separate elements of my brand I would need to consciously design and outline prior to development, I consulted several sources on how to divide up the different categories of brand structure. The most useful of these was titled ‘Brand Strategy: The 6 Key Elements’, by Mandy Movahhed. See Appendix H.
In this article, she outlines the different key areas in defining your brand. These are:
Target Audience: Who are you marketing towards?
I am targeting anyone seeking a technologically capable and independently creative individual for a project. Additionally, anyone who could assist me and my brand in moving forward and improving trajectory.
Brand Promise: What should the audience expect from your brand?
The audience should expect creative expression, inclusiveness, accessible design, political/social neutrality, and encouragement for other developers.
Brand Perception: Understanding your brand perception and how to manipulate it:
I am in a position where I can leverage my youth and motivation towards contributing creatively in the technology industry against both my low wage entry level value, my trajectory as a developer/creator, and the demand for personality-driven creative workers in an adapting, dynamic industry.
Brand Values: What core values dictate the decision making behind your brand?
Creativity, acceptance, work ethic, more iterations for better results, and ingenuity.
Brand Voice: How does your brand ‘speak’? What is its personality?
Casual yet professional, prioritising human interaction and idea expression/understanding over pure efficiency. The craft is a creative one, so it should revolve around creative expression, not necessarily conciseness and managerial prowess.
Brand Positioning:
Continuing on from brand perception, the positioning of my brand will primarily be achieved in an ongoing fashion as I am able to expand my skill-set, both in development and otherwise. By updating my portfolio of work, (and my website by extension), while also learning to navigate the industry more efficiently, using my brand perception as a reference point I will be able to continually improve the positioning of my brand. This will mainly come in the form of improving content quality, brand polish, and the readjustment of brand values.
Additional Branding: Logo Design/Purpose
My aim in my logo design was to reflect both my personal interests, and also the industry I am targeting. In doing so, I additionally wanted to keep it as simple as possible. To achieve all of this, I decided to use my initials, and relate them to familiar symbols/characters in development.
My initials are CID, (Coen Isaac Drexler), which in my case is luckily symmetrical. The simplest and most aesthetically pleasing character equivalent would be < | > so that was what I used as the starting point of my logo. See Appendix C for a rull resolution copy.
Additional Branding: Brand Colours:
Following the basic establishment of a logo design, I turned my attention to the colour scheme of the website, and by extension my brand as a developer. Having recently discovered that I am heavily colour-blind (Deuteranopia), I decided to use grey-scale for my starting point on my colour scheme. By primarily using grey-scale for the website layout, I can simultaneously ensure it remains legible to all users, and also for those who can register certain or all amounts of colour, (myself included), it can be used to draw emphasis to certain elements.
An example of this would be a contact link turning blue on hover in a greyscale page - the way the insertion of colour can break up the natural flow of a grey-scale page is useful in drawing the users attention.
The primary design was nonetheless done in a greyscale oriented fashion, (see Appendix D), and implemented in a global fashion to ensure consistency across the website.
Wireframes:
Several stages of wireframes were done. An initial draft set were done before basic development was started, to give a good visual basis for the final product. This featured separated media link and navigation link bars, that once the user scrolled the appropriate distance, would combine to form one navigation bar. A mobile and desktop design of this was done. See appendix F1, F2, F3 and F4.
During the test development of these wireframes, I had particular difficulty in mobile devices incorporating the JavaScript function to effectively achieve this, however, so instead opted to redesign the layout for a simpler, and more aesthetically friendly single, collective navigation/media link bar that sticks to the top of the screen in the same manner as the original draft. See Appendix G1, G2, and G3.
These designs were utilized in the development of the final implementation of my website.
Accessibility Considerations:
Colour-blindness/Contrast: by using a predetermined colour scheme, I can ensure beforehand that the contrast between text and background is appropriate, as well as colour neutral.
Blindness: by incorporating a tabindex for navigating the main website elements and pages, as well as labelling all visual elements, my website is interpretable by a screen-reader using visitor.
In general, feel the accessibility of this website is the primary reason I would like to reformat and redesign a large amount of this website in the future, to make it simpler to improve the content on my website, but more importantly to know that there are multiple, easily navigable routes through the website, for all forms of user.
**
**
Implementation/Development plan:
Monday: Outline page intention/user stories/user story dependencies/begin wireframing mobile. Using mobile wireframe, begin creating mobile splash page framework, to adhere to mobile first development. The reason for developing before wireframing the computer interface is if any issues occur in the mobile development stages, it will be more efficient to design an already revised wireframe when I know what content will be required after initial testing builds. Wireframe tablet site. Continue documentation.
Tuesday: Begin developing tablet website interface. Repeating process from monday, outline any issues with current development plan and adjust accordingly. Once basic tablet layout is satisfactory, wireframe the full sized layout. Begin writing the document content for each page in documents to be modified and included later. Continue documentation.
Wednesday: Continuing on, develop desktop website interface and implement basic styling. Troubleshoot any issues with design implementations (JavaScript or other), and polish responsive dynamic elements. Design logo, compile images and media for website.
Thursday: Complete large majority or remaining documentation and complementary design/research, organise supporting documents. Continue styling and content implementation of website features, ensure responsiveness with mobile first priority.
Friday: Final documentation additions and writing, debug final aspects of website, additional styling and responsiveness implementation/testing. Run audits, test alternative accessibility.
Using this timeline as a reference, I prioritised the tasks that would be time consuming, were unfamiliar to me, and/or were difficult to achieve. This meant initially focusing my time and energy around some of the more obscure design elements, such as the basic wireframe models, my logo design, background images, colour schemes, and especially just understanding what it is my brand represents.
**
**
Hosting/Analytics:
To initially host the site, the most appropriate solution is to utilize the Github Pages function to host it for free as the static site it exists as currently. However, in the future, as my skills increase, it would be beneficial to utilize the site properly by hosting it professionally, and sharing it as my primary interface for my brand. In doing this, it reflects my own personal investment in my project by being willing to improve, reuse, and utilize this website. Inevitably, once it requires other functions I wish to implement, such as an email list or more interactive aspects, I will require paid professional hosting.
As a benefit of this, I would gain access to the analytics of my website, and I would be able to track a far more scope of what requires development, and see first hand what works best on an implementation scale.
Notes:
Known issues:
-
the cross-platform functionality of this website, in a smooth and consistent manner, was one of my key priorities in this design. Unfortunately, I did not appreciate the functionality differences between a Safari iOS browser, an Android browser, and a desktop browser on a deep enough level to have foreseen some of the development bugs that have occured. The most notable is the navigation bar not functioning on iOS Safari, despite a number of redesigns, solutions, and reformats. To remedy this in the future, I believe it would be a better starting point to make a list of known iOS Safari implemented features, and simple expand this to other versions of the website. This would primarily follow mobile first development, and would hopefully also solve the cross-platform issues I have found in this assessment. Nonetheless, it works fine on all browsers but iOS Safari.
-
When the browser screen is detached from the base of the screen, it seems to impact the scripting in a way that changes the scrollable distance, resulting in a navigation bar animation that will begin at 0, but never quite return to it. In a genuine mobile browser on Android (Chrome for example), as the window will not become detached for any ordinary reason other than multi-screen use, it is less of an applicable issue. Still, it would also benefit from a more mobile-first designed scripting system, to ensure no bugs in the overarching framework that the index page relies on for impact.
In designing/approaching this website, I should have done far more research in how problematic the concept I was trying to execute would be. A large portion of my working development time was done attempting to repair issues with the navigation bar responsiveness across all platforms, and in particular, iOS Safari/Chrome/other browsers.
Completed for Coder Academy by Coen Drexler on the 22nd of September, 2019.