Web Design
Narrative, Sequence and Interaction
This brief was to build and explore user experience and to develop an identity through an online portfolio showcasing my potential and easily spread my information to future employers or work experience.
Research
I found that W3school was an amazing source of information to get started on coding, using their YouTube tutorial to get to know the basics of HTML and CSS, as well as using resources provided by my tutor.
Not only this but simply finding information on a google search was very helpful finding thousands of different sites giving you examples of code and how to use it effectively.
Layout Planning
When planning my layout I knew that I would want to have white space and pops of colour throughout when scrolling to break up the empty space, by doing this I’m creating a balanced design leaning towards a minimalist and creative atmosphere.
With also wanting to adhere to a simple 3 column grid layout so that information and design can be easily accessible and ensure the user can have a pleasant and stress free experience.
Workshops
Due to many mishaps through the start of the year I was unable to attend all of the workshops held by tutors to help with factors like layout, web design, coding and text.
However, I did manage to get to the HTML workshop and grid layout workshop which really fuelled my interest in coding! I was able to take this information away and start to build my website.
Design Process
In my process I wanted to ensure that my personality came across in this website through using open space and the colour #FF7F00 a gorgeous orange!
I’ve always loved the illustrative style incorporating minimalism so this was something that I knew would be a great addition to add more of my self in my portfolio, for example using line and shape to create an identity by not perfecting these under lines and outline shapes I can create a friendly yet professional design.
As well as design I needed to ensure that I had a friendly font and a professional easy to read font to maintain the website user readability. I used the platform Da-Font to find my friendly copyright free typography called Shadows-Into-Light, I love that the font gives a hand drawn effect linking nicely to my imperfect line-art. Then as it’s a font that I’m drawn to I used Arial Bold as my user friendly and professional style font.
Code Process
With some set backs of grid layouts and multi use screening I found that my best option was to copy and paste code from my previous index and html’s to a new grid layout/folder to get the website working as it should.
If anything in this project has taught me I would say code can never be unpredictable it is simply the way you’ve written it, small minute errors can create big impacts but now being able to spot these with only a short period of time to create a website in this project, I’m very proud of the skills and code that I’ve learnt and will be going forward in future to offer and advertise web design!
User Testing
When arriving for user testing myself and web buddy Cream Likhitroekwit we’re worried due to not having a finalised website. However, this seemed to be the case with everyone having not completely finished their sites which was reassuring. Others work was very similar and more minimal however they had all of there content available and worked as it should.
User Test Feedback
My feedback given was elements that I already knew needed to be finished/finalised but it was very beneficial to have this testing due to finding an error with one of the project links.
I received lovely feedback about my design and that they believed this could be “great”, this feedback really helped me to understand what I still had to do and what was already going to plan. Following up with Mark the head of this project he mentioned that I may simply have a grid alignment issue which why aspects were not aligned as they should and offered to help and find the issue via Netlify. As I knew I still had multiple projects to code in to my website I made the decision to copy and paste my content into an unbroken grid to ensure my time wouldn’t expire when coding, due to deadline only one day away!
Reflection
Overall, I thoroughly enjoyed the process of this project and have developed a new-found passion for coding. I believe the design truly reflects my personality, bringing my portfolio website to life in a way that feels authentic to my identity. I appreciate the simplicity of the layout, as well as the effectiveness of the code and grid structures working seamlessly together. Although the current design may not perfectly mirror my original vision, I believe it facilitates easy access for users to find the information they seek.
The workshops and research conducted throughout this project have been invaluable, as coding often requires a solid foundation of knowledge to implement desired features successfully. I believe with more time and practice, I am confident I can enhance this website further by integrating new coding elements that will create more visually appealing and complex layouts to enhance user experience.
Having discovered this passion, I am eager to continue my education in web design and coding to become a more efficient web creator, as I found this to be a challenge during this project. I aim to incorporate more elements into the website, including visuals of my freelance work and work experiences, to provide a more comprehensive understanding of my background and showcase a deeper insight into my skills as a designer. This endeavour is not just about creating a portfolio; it is an opportunity for personal growth and professional development in the ever-evolving field of web design.