I did not play around with any of the class activities after doing one of the lessons and it instructed me to just have this hideous looking solid coloured page that glared at you, showing the resizing. After that I worked on my own developmentations. I didn't waste time with a wireframe as a portfolio is basically just a 1 page wonder that doesn't beget complex design and sitemaps and i've seen enough to know the basic layout that they should follow. So what I started was with research and looking for inspiration. I like to use codepen for inspiration and search for key words there as it's often hard to find a wide range of live websites that suit your needs like I had no idea what to look for on google to find enough portfolios to get my own creativity working. I wanted to create a simple design for my portfolio because it seems more professional to me, in contrast to the flashy, colourful and fun design I did for my fansite. I used a bit more javascript in the portfolio, just for simple things like changing opacity of some elements on the page on scroll. There was not much else I could think of doing with it. The development for the portfolio did not take much time, although I was set back about a week's worth of work for deciding to scrap the first design. Otherwise it was very straightforward.
A lot of the designs I saw used minimalism combined with a nice looking colour scheme and played on bold background images as the main points of the site. Well at least those are what drew my attention the most. The skills of the designer can be reflected in how the sections of their portfolio transition and flow. A lot of them all seemed one and the same but I suppose when it gets down to it, there is altogether too much that you can do in such a space. I'll share a few links and what I liked about them.
https://codepen.io/uiswarup/pen/rNNLgoa I love hex shapes in images and things like this, and used a similar pattern for an image gallery in a Twitch.tv redesign I did last year. It would be really cool to use something like this for a menu however it makes having a topnav a bit redundant and I like the idea of a topnav too much, and this is a bit to big for me to include in mine.
https://codepen.io/Divium/pen/MeWePg This is a super professional looking page, although I wouldn't have the animated shapes on the background like that, but it does show his CSS skills to be able to create them. I liked the way the text changed colour in the same block, and have used that idea on my own page. The page is simple, I think the 2nd section says overview and gives a little info about him and then follows down with some links to outside work then a contact form. Its all that a portfolio needs really.
https://codepen.io/F1N4/pen/RjjBRb I liked this portfolio a lottttt. The animation on the page is fantastic and just works so well on the page. The slider that goes down each time you scroll through a section, the animated text and animated sections that fill out as you scroll. Just superb. The skill bars was something I used on one of the first experiments that I did, but mine were just static and not fancy animations like this. The image gallery of projects he'd created was so clean. I would have liked to have something like that too but just didn't have the time to spin everything I have made back up and get it in such a polished state like that to put on my page.
https://codepen.io/melluvia/details/JXOWrM Last one here, I liked the colours of this porttfolio a lot and have decided to go with a similar colour scheme for my final version. Like the others, it has the basic info that a portfolio needs. No fancy animations but the fonts used and the colours still make it look professional and skilled.
First I tried out one of the basic white minimalist looking pages, using ideas that I had off some of my inspirations. I did like the way it looked a lot, especially with the little linework under the sections, and how neatly everything fit together, but I felt like it was lacking something, lacking something that has a part of me in it. I guess like, it would be easy if you had a job for a client to create something basic and what they wanted, but personally like a white page without any cool pictures or effects is just so bland. So I remade the site more in line with my style instead of trying to base it on a popular aesthetic that others might like. I downloaded the files before restarting though so I still have it all saved in case I want it. [pics of the main and about] It looked like this and then there was a small image gallery that I filled with stock photos and a basic contact form at the end, with social media buttons.
In version 2 of my portfolio I was much happier with it as it was more like a reflection of myself in it. I wanted to try out this parallax effect that I had seen a tutorial for and So decided to try it with a random background image from google inside a glowing div to separate some of the sections and just to see how well it went with the website.
share working link to final website, include screenshots
For some reason this was easier than my fansite, I guess because there wasn't any fancy effects and such that I wanted to get right aesthetically. I spent a lot of time working on that kind of thing, but for this site it was a lot more basic, using a standard black red and white. One of my favourite colour combinations. All the images were just stuff I pulled from google, the font was just ol' reliable, Open Sans. For the colours I was also inspired by the Sith colour theme from Star Wars, being a fan of the Old Republic, they use the red black and whites a lot too. You can probably see bits and bits of my influences coming through from the inspiration links I showcased earlier. I used a lot more div elements in this to set everything in place. Usually I only have a few main ones, but the more I work on front end stuff the more important I see it is to have unique elements for each component, and how to section everything off to improve the positions and overall layout of the page. The portfolio could have been a bit more substantial if I knew what to write in it. However I am terrible at writing about myself and all that stuff. Every other portfolio I've had to make for classes hasn't had much content at all. If I had more time I could possibly make some kind of gallery with screenshots of previous work but it is a bother to me because I would have to dig through all this old code and figure out what is what, make it live again, and so on. If you have a chance to check the site out on mobile it looks really really nice. Much better than in a browser where it can look a little sparse. There isnt any of the glow effects from the div depending on what mobile browser you're using, but the repsonsiveness is so clean. Tapping the top left of the screen at any time takes you back to the top of the page, and tapping the top right opens up a menu. The parallax div I used is a super cool effect and I think it turned out really nice. It adds a touch more creativity to the page while still keeping it fairly simple. I've seen examples of pages that use that effect to scroll down from like the sky to the earth to deep underground, and each like biome is a different section of their page, I wanted to try something like that but couldn't really find an image to fit the colour scheme I wanted to stick with.
I will be expanding upon my formative professional practices draft, summarising contracts as an area of professional practice, and more specifically investigating the area of ethical and legal practices to be outlined within the contract. Having a contract that outlines your agreement with a client is an essential part of business practice. For even the smallest jobs, a contract is the way that you protect yourself and your work. If there is no contract, a client can simply do anything they want, back out after you've delivered your work, not pay you, any of that nasty stuff. Contracts legally bind both parties to deliver what they promised.
The contract must dictate what services are being provided to the client by the developer. In addition to designing the site's web pages and graphics, devs often register the client's domain name, promote their client's website on the internet, provide extensive tracking data of the website's usage by the public, and often write custom programs that offer enhanced interactivity to users who visit the website. (Gussis, 98). If the developer is not contracted in by the business to deliver ongoing technical support or hosting services, sometimes they will provide technical manuals and documentation so the company themselves can understand how to do this themselves.
It will also contain timeline of the project, expected budget, developer pay rate, copyright details, and maybe some terms or conditions, dealing with delays and time extensions, change requests. The contract an be negotiated on by both parties, and of course signed.
A good contract should cover ethics and legality and what is expected of both the client and designer both, making sure that neither are infringing upon these issues and both are aware of what is unacceptable. There is quite a lot of practices that are considered to be unethical, despite not having an actual law to define them, and while these are still technically legal, your reputation as a developer rides on priding yourself for complying with the standards of ethics. A contract should endeavour to make clear the ethical standards and ensure practices related to their projects are within these boundaries.
Some examples of standards that a contract could cover are:
- Spam, opt-in and opt-out email systems
- User privacy and information collection practices
- Trademarking, intellectual property laws
- What country's laws the contract will be governed by (if doing freelance work for overseas clients)
tutorials used https://www.w3schools.com/howto/howto_css_parallax.asp
Geoffrey George Gussis, Website Development Agreements: A Guide to Planning & Drafting, 76 WASH. U. L. Q. 721 (1998). Available at: https://openscholarship.wustl.edu/law_lawreview/vol76/iss2/8
Certification Partners LLC, Ethical and Legal Issues in Web Development (2013). Available at: https://www.okaloosaschools.com/fwb/sites/okaloosaschools.com.fwb/files/users/anthonybryant/wds_v1.1_ssg_l11.pdf