As part of my Agency Ready unit I have been asked to explain my techniques used to research, design, build and launch my new portfolio website as part of my assignment. I will discuss the decisions and choices I made during the processes of making my website. Before making anything or thinking of the design of my portfolio, I needed to decide what is the purpose of my website. Because I am a digital media student, I decided to focus on my videos and my art. Because I have videos on Youtube and on an art website called Wysp, I had to make sure my is a central hub for my social media and previous work. Before I began my research I decided I wanted to make my website a one page layout with a simple design that would work on other devices on the future. I began researching one page portfolio sites online and stumbled on a bunch of good websites like onepagemania. The common theme I loved about these examples were the header/navigation that seems to be a common theme with one page websites. What I also really liked is how people when designing would section off parts off their website with large headers. I really wanted to implement this into the design of my website because I thought it would make my sight simple, slick and easy to use. Before I began coding anything, I decided I wanted to design my website in Photoshop first. This would give me a good feeling of where my content would be, and also how big they needed to be. So I first created my Photoshop document in the size of a standard monitor resolution (1425 x 1776). I began experimenting with the integrated header and navigation bar at the top of my website, and would be visible when scrolling down my website. I first made my logo and navigation to the far left and right of the page, but then I decided it didn’t look right and made it the same width of my content (roughly 900px). After designing the layout of my website, I showed the design to my friends and classmates and changed a few things around, mainly the sizes of my headers and images. The feedback for my website were mainly positive, they liked the design of my website and thought it was very nice and easy to use. The most important thing in making my website is that it is simple, easy to use and has working links to my work. Then it came to my actually coding my website. I found it quite difficult when I got around to coding my website, but I did find it very helpful that I designed the website in Photoshop first. This let me know exactly how big everything needed to be on my website, so it made coding the CSS a lot easier. Because I find coding sometimes difficult, I made it easier to use sources online like Treehouse to learn how to code parts of my site. The thing I really learnt when making this site was how to make my code easy to read for myself, because I would reach the point where I didn't know what part was what or where a div tag for example started and ended. I took full advantage of the comment tool in HTML and made it easy for myself to section off parts of my website to easily code style in CSS. Overall I thought I did a good job with my website. It’s obviously not as flashy as some of the sites I have seen from my peers but I really like the design and experience of my site. I will not be going into the web industry as a career but this website will help as a central hub for all my social media and web presence. I intend to update my portfolio with more work I've done because I want to keep my website update for future opportunities from employers. What I've learnt from this project is that making a draft version of your website in Photoshop helps bring your idea to life.
You do have to decide what purpose a website will serve before you embark on any part of the design journey. How will you know what layout to use unless you have decided what you hope to achieve? The focus of the topics that are discussed will be influenced by the site's purpose. Likewise, the images are decided by purpose.
ReplyDeleteSteven @ Cambridge Local Marketing