This assignment was a challenge for me. My html and css skills are basic and I find coding itself to be a difficult task. Once I got into the swing of designing my static html and css I didn’t have too much trouble. I did take advantage of Dave’s php tutorials and other online tutorials and workshops including those at w3schools. As mentioned in ‘design process’ there were a few items that could possibly have been altered using new coding, however I am still pleased with my end result.
To add to the user experience I added two widgets and one plugin. In my side bar I incorporated a calendar and a social networking connection widget, both for the purpose of the user. I felt that the calendar seemed relevant, especially to current clients and dated posts as records could be kept on there and that the social networking widget allowed online connectivity which I think is very important. I linked the social networking straight to my professional Facebook; which will act as a separate type of portfolio, my tumblr; which documents some of my inspirations and influences at any given moment and my email, purely for contact reasons. I felt that all these were valid and helped build my portfolio site. The plugin I used was a ‘lightbox 2’ plugin, which affects the display of my actual portfolio images. Once installed this plugin allowed me to upload my work and then display it in an ‘enlarged, up-close’ kind of way over a transparent black background. I felt that using this plugin was slightly more professional then a user having to click through some pictures to see my work. Because my portfolio is only just beginning, I do hope that I can expand on what I have created so far and possibly add more widgets/plugins, to create an even better portfolio for myself and my clients.
The original sketches for my website. The first is a very rough mock up, the second a photoshop mock up. The centering of the content was an important aspect to me consistently through my design process.
Logo Development:
The logo changed as the website design changed. I originally found this font that I really enjoyed using, and I tried to keep with that. However after changing around my website layout I felt that it didn’t work as well. It is for this reason that I found the new font, that I felt was simpler and purely just worked better for my layout and overall visual.
My original layout was slightly different to the finished product. I began with a large header,that was intended to be my logo at the top of the page. The content was then directly underneath that, along with a large image and then an unobtrusive footer. However, I did find fault in this when deciding that my photography career has only just begun and was not yet ready to be showcased. When I removed the use of an image, it sort of drained the excitement away from the space. Even with an image logo the site looked flat and informative and the black, white and grey colour scheme looked dull. It was for this reason that I started altering my main header, instead of concentrating on the site as I felt that once I could capture the excitement in a word (logo) it would be easily transferrable into my portfolio. I finally came up with the final ‘header’ using just my first name in a hand written / slightly retro font which I felt was a nice portrayal of myself. From here I moved my div’s around slightly, and alternated between a horizontal and vertical navigation bar at different points to try and enhance usability but also the design of the site.
In the end, I decided on a horizontal navigation bar, without background colours, but with hover lines so the user could still see where they were on the screen. I made the heading texts larger for this same reason. I am quite content with the logo, and the overall layout of the site, however unfortunately in some areas my php and html skills may have failed me slightly. I would have really liked to alternate the logo between the names of the pages on each page (eg. The biography page read ‘bio’ in my logo design font) and I would also have enjoyed being able to alter my fonts to something customised rather than a standard serif or san-serif. All that said, I don’t think either of these aspects take away from the user experience and I believe my goal of creating a simple but effective portfolio was achieved.
Design Process:
After looking through a range of websites, blogs and design portfolios I found the ones that caught my eye the most, and that I kept going back to, were those without illustrations, those with just simple layouts and typography used to portray the designer. It is for this reason that my portfolio has come out in a clean and simple design.
A visual for the portfolio.
http://www.coullon.com/ - Claire Coullon
This design portfolio is based entirely on the work of a graphic and type designer and who creates her own fonts. While being a portfolio this space also shows a lot of her creative work and processes and includes sketches and explanations from the designer. The layout uses clean neat lines and a pale dusky colour scheme which portrays an earthy feel towards the whole project. It also gives the designer herself that same approachable vibe. I really enjoyed exploring this portfolio because it has so many layers and insights into the design itself; one of my favourite features on the homepage is a small slide show of her work/fonts/designs which adds what feels like interactivity with the website when you first enter. Everything is laid out really well, and even though there is a lot of content it is difficult to get lost inside the navigation, the actual content itself is set up in a square centre which I find really eye catching. Overall, this is probably my favourite portfolio site that I have found, possible because I am so interested in type. However I find all aspects of the sight well thought out and finished smoothly. Again the main thing I am looking at here is the layout and how she works with simplicity. I am genuinely interested to look through this lady’s portfolio for my own exposure and observations about design.
A screen shot of Claire’s portfolio.
http://www.vanityclaire.com/ - Claire F Scroggins
Claire’s portfolio is colourful, eye-catching and exciting and when looking through her actual portfolio, reflects her style really well. The layout makes me want to interact with it, and this is most likely the main point of its orientation and design. The way she has used typography in the visual also makes it exciting to read. The visual design changes on every page so it differs from the homepage, to the print portfolio , to the contact page – I think this helps display a little more design and keeps every page interesting for the audience. There is a really bright retro colour theme used in this design, and although it is not something I would normally pick, it really works here. The retro colours and the quirky visuals designs interact with each other, creating a really successful web space.
Again, the layout is really simple and only uses a background image with a text box and type. I like the way that it works, I also really love her use of type. Because it is something I am interested in I am hoping to include some sort of typography in my design for my own portfolio.
