INTERACTIVE DESIGN PROJECT I + II: Prototyping Resume & Developing Resume
MODULE GCD60904: INTERACTIVE DESIGN
15 may 2024 - 29 May 2024 : Week 4 - Week 6
Bachelor of Design (Hon) in Creative Media
Project I: Prototype Design – Digital Resume/CV
MODULE INSTRUCTION:
“APR - JUL 2024: GCD 60904 / ADVANCED TYPOGRAPHY MODULE INFORMATION BOOKLET”
Project I: Creating Prototype Design (Week 4 - 6)
Prototyping PT I: Students within this cohort are expected to develop a custom UI Design & interface for their personal curriculum vitae (CV) using prototyping software such as Adobe XD or Figma. This UI Design Prototype should showcase the general layout, visual elements, user-interactions and function the student plans to include in their final version. Students should prepare some content for their resume, including their personal details, education & work experience, skills, previous projects etc and any other field relevant to the student. With all the content decided, students then need to organise said content in a hierarchy based on their importance and relevance.
PROJECT I: CUSTOM RESUME & CV (Week 4 - 6)
WEEK 4: Website Analysis
As outlined above, this week (and the upcoming ones;) students have been tasked with making a ‘proof-of-concept’ website for their Resume or Curriculum vitae. Going into this project, I already had a rough idea of what I wanted the UI of this site to be. For the CV, I wanted to style it after the minimalist, dark mode look; designed to look very professional and simple to read. However, I wanted my design to stick out a bit with the introduction of vibrant colours which would be used to present my portfolio. However, before I started designing the website; I thought it would be useful to look online for some examples of digital CVs as well as interesting website designs.
With some minor research completed, I began developing my ideas on paper which I would hopefully be able to replicate using Adobe XD; a software designed to replicate websites for conceptual purposes. While designing, it is important to remember that this portfolio is meant to promote my capabilities while presenting my services to clients. Additionally, it should reflect my own identity and how I wish to be seen. In my design, I wanted all parts of the website to be accessible from the first landing page, while also being able to show who I am to people viewing it.
First major inclusion is the header bar, a website element which displays the “Home, About, Portfolio, contacts” buttons - allowing anyone to get to any part of the website immediately. The reason this bar is shown to be ‘floating’ and not static is because I want it to follow the viewer as they scroll down the page; allowing them to check anything else at any time without needing to scroll back up. Additionally, on the home page, I wanted to feature little panels which feature snippets from the “Home, About, Portfolio, contacts;” giving them information and another way to access those pages.
“Example of the Homepage”
For the “About page,” I wanted to feel more like an actual CV or resume: a document which is straight to the point and displays all the necessary information potential clients may be interested in knowing. Despite its bland concept, I did want to keep the idea of vibrant colours to appear around the most important information of the site.
“Example of the About Page”
The “contacts Page” also follows a similar design philosophy, something that is rather basic and gives what it needs to. While I would take more time in designing this page for the final project, I feel as a proof-of-concept; it works.
“Example of the Contacts Page”
As for the “Portfolio Page,” I wanted to experiment with a mode adaptive design; the page changing depending on which section you pick on the top carousell. The standard version of this page serves to display the best of my works while also humanising the page in explaining why I would choose to pursue the hobbies I have into a career. Again, this resume is not only meant to display my work but is also meant to help characterise my identity. At the end of the page, there are links both to the contacts as well as the about page, should any clients find my work interesting enough to reach out. As for the adaptive elements for this page, the idea is that both the colour theming and content would change to display that section of the portfolio. I feel that this can help reduce the amount of pages people normally click on to get a specific form of information - making it easier to manoeuvre around the site without needing a paper-trail to show where the reader has been.
“Examples of the animated Portfolio section of the Resume ”
Other small inclusions would be an animated bar which displays how far the reader is through the page to gauge if there are any additional resources they may have missed. The small dots which appear under the carousels have been included to better display how much content is present. Overall, I am quite happy with how this final presentation turned out. Although it is not a representation of the final product, I believe it is designed well enough to get my original ideas across.
“PDF VERSION OF THE WEBSITE LAYOUT”
PROJECT II: WORKING WEB PAGE (Week 9 - 10)
WEEK 9: Developing web page
Continuing on with the previous Projects work and having the need to develop the necessary skills required to make and manage a website (as per the final task); the next two weeks would mainly see the cohort revisiting our Mock Resumes and turning them into functioning prototypes. Up until this point, the lecturer has been providing students with preview assignments which were designed to teach us how to use more complex commands in both HTML and CSS to create a more uniquely styled website for our final Project. As a part of this teaching requirement, the cohort was also presented with our current task, Project II which would see us needing to adapt our Resume and CV designs into a functioning website while learning how to better structure content and make the designs more appealing.
However, due to our limited practical experience writing code for a website (especially in my case;) our designs would need to be somewhat simplified to fit a one-page website; limiting the original creative scope which was not a bad idea. While this was a smarter idea, I feel that I may have overestimated my capabilities working with HTML and CSS and made a site which I believe is a little too complex in some sections which damaged the overall presentation. For this project, I decided to simplify the design down using the original homepage design as well as the original Resume page, allowing for a more creatively dynamic layout. Despite the simplification process seeming like an overall improvement; I believe that how I intended to structure the webpage was too complex for my current understanding which led to a majority of the coding being compartmentalising everything and working to resolve graphical issues.
Using the previous week’s work as a reference to begin, I first began the project by laying-out each section and coding them separately and trying to emulate the concept design into a functioning page. The first major roadblock for me was the “about the artist section” which would see me needing to add a profile picture alongside texts with varying layouts and dimensions. The starting idea would see me working with a parent division where I could introduce two more divisions to make up the written section as well as the image section. For the image section, I found it difficult to format the one image I originally intended to use as it would fit dimensions of the first division. As a work around, I ended up instead making the image become the background of the division instead - leading to a panelled approach which I was not too sure on how to fix. Moving on with the text section, I would create another two children divisions to help style the text in the desired format (the titles appearing ahead of the main body of text.) This proved a little difficult to manage as it led to weird design issues such as the one below. I ultimately resolved this issue by tying each child's divisions to a ‘row’ section which to the end design.
“Examples of the failed attempts ”
The second major hurdle came in me needing to build a functioning carousel design which I would use to display “featured pieces of the portfolio.” While I was able to get the text to be formatted correctly, I was unable to get a satisfactory carousel design. Using some online examples, I was able to build a functioning carousel (as shown below) however, I was not able to get the buttons to function the way I intended. The design did not work as it would only respond to the horizontal swiping commands rather than the button inputs originally made, thus I decided not to pursue it as I was short on time. As a result, I ended up scrapping the design and instead shifting to a segmented design which had its own issues; mainly the presentation of the images. For an unknown reason, I was unable to get the images to function the way I wanted (shrinking at smaller resolutions, scaling up at larger ones) which led to some technical difficulties.
“Attempts at making a functioning carousel ”
The final major difficulty came in the form of the input box at the end of the website. For some unknown reason, the box was unable to be centred in the middle of the page; any attempts to do so would just crush the box into overlapping text. Once again, when I tested it on a blank document, there were no problems which confused me as to why it was stuck in the corner. My leading theory is that there had to have been some element which was restricting it which I am unable to determine.
As for the CSS, I have a mixed opinion on some of it. While I was able to translate most of the designs onto a functioning website; the work however felt too clunky and was prone to breaking-down when features would change. Furthermore, some of the code that worked in previous assignments would not make any notable changes which lead to me getting frustrated with the project. Looking back on it, I realised that I may have made this project more difficult than it actually needed to be as I was trying to introduce new ideas which I hadn’t been briefed on before; leading my project to look as if it was held together by spaghetti code.
Overall, I am not that happy with how the final project turned out; however, I’ve been unable to dedicate more time to the project given other circumstances. While ambitious, I believe that I should not over complicate my design and should look more into asking the lecturer more questions about how to make specific designs more feasible.
Link: HERE
Comments
Post a Comment