Portfolio prototype
Project description: As my first project i had to make a markup / prototype of what my dream portfolio would look like. The overall idea behind the project was to give me an understanding of the concept of a portfolio as well as how a portfolio is used as a tool of communication to future employer.
My design: I went for a simple yet proffesional design, and here is the result:
To see prototype click https://xd.adobe.com/view/e910355d-821c-497e-84eb-8a33e514a797/
Redesign: Is the website that you are using right now!
Photoshop: At the start of the semester we were introduced to the basics of photoshop, however i was already self taught in photoshop and had some experience with it. I used this program to resize and crop images and to make all the projects i put in it.
Experience Design To be able to do make this project i was introduced for the first time to Experience Design which I used to create a simple interactive click-through prototype. At the end of the project i had mastered the capability of Experience Design.
Portfolio Website
Now it's time to implement a working online version of your portfolio in the form of a website that you develop from scratch using HTML and CSS. Use your prototype as a presentation - Perhaps you get close to the first draft, maybe your project takes a new and unexpected creative direction?
My design: I went straight into coding the website, however I started to dislike the prototype and made a whole different version which at the end was a way better design. Here is the result:
To see the website click http://kristjansson.dk/old-website/index.html
Redesign: As a redesign for the portfolio and my old website, I have created this website from scratch!
Html: In this flow I was introduced to Hypertext Markup Language which is the standard markup language for creating web pages and web applications. This was very exciting and caught my interest straight away. After learning the basics I got this project and had to put it straight into use.
CSS: I was also taught Cascading Style Sheets which is a style sheet language used for describing the presentation of a document written in a markup language. This allowed me to make the website look good.
JQuery: We weren't taught JQuery, but i found a script online which made the smooth scrolling possible.
APP PROTOTYPE
Project description: The project for this flow, you must design and create a prototype on a mobile app. You choose the type of device / smartphone and tablet you are developing as well as the operating system.
The app should be a solution to one of the following issues. You want to use Adobe XD to demonstrate the screens in the app and their flow as well as use Adobe Illustrator for graphics to the interface and Adobe Photoshop for images.
Choose one of the following topics for projects:
The assignment can be developed in collaboration with others, The app needs to be developed for both mobile and tablet and there must be content in at least 3 menu items and at least 3 levels. Content must be sufficient for user test to be carried out but generic content and process text may be placeholder.
Develop interface gadget elements including icons for the app, all drawn in Adobe Illustrator.
ou must test whether users understand your design. You should investigate how to best organize content in the app using the shortcut test method, and whether users understand how the app works, by performing user-experience tests on the potential audience.
My design: I Here i chose to make a weather app. I chose to create an app that would be easy for the main streamer but would also for a businessman who might liked to know the the time and weather at the same time. Therefore I created the app simplicity in mind and a “don't let me think” as a main goal. After that I created a special section in the app where you would be able to see at least 6 places at the same time. Here is the result:
Try out the prototype https://xd.adobe.com/view/b75bd13d-8ebd-4b69-9619-a9cd0aaee409
Redesign: After some User experience tests and feedback I found out that the font was to way to small, so I made the text at least 16px size and gave the app an background which gives you the feel of the weather.
Try out the new prototype https://xd.adobe.com/view/88983f39-a317-4156-bde1-60e702542653/
General: I learned that font sizes are very important and the basics of Illustrator.
Illustrator In this flow we were introduced to Adobe Illustrator which is a vector graphics editor. I used Illustrator to make all the app icons for the type of weather, and because it is a vector graphic nothing loses quality when I resize them..
Experience design: To make the prototype we used Adobe Experience Design and in this project I learned the full capability of Experience Design as well its limits.
Responsive Website
Project description: In this flow, together with your group, you will develop a responsive website (prototype) for the fictional web-development company Sweetbot. With the help of the web agency's step-by-step style guide, you and your team members should make suggestions for the company's online presence, including bidding on visual elements as well as information architecture.During the flow, you must work in a team of 3 students.
Original Design
See the original design here http://kristjansson.dk/sweetbot/index.html
Redesign:
To see the the full redesgin click https://xd.adobe.com/view/3bc2e926-5562-44cc-b43a-dbe62a62b6ee"
Html: Now this was the second project using Html so everything went a bit more smoothly this time.
Css:For this project we were introduced to media queries which was a big part of the project as the website had to be responsive.media quiries idea is Instead of looking for a type of device, they look at the capability of the device. Media queries can be used to check many things, such as: width and height of the viewport.
Jquery: At the start we were introduced to JQuery which is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software. For this project we added smooth scrolling when clicking on things in the navigation bar.
Weapons used: Photoshop, Illustaitor, Experience Design, HTML/CSS and JS/JQuery
More infoPortfolio Redesign
Project description:The purpose of the portfolio is to present and document your professional level and show your professional development as well Make yourself aware of what you have worked with and what you have learned. The final exam project on the 1st semester has two focus area:
See full project description in danish here http://kristjansson.dk/images/eksamensprojekt%201sem%202017.pdf
Website prototype:
First website
This website
Photoshop: Used photoshop to scale all the images and also to fix them as well as creating the color of the background image.
Experience Design: Used it to showcase some of the redesigns. At this point this program only has limits for me and makes me feel i have to move on to another program.
Html: I got a better understanding of html and how to make the markup and I probably took the biggest leap in html in this project as it was a lot of coding at the i end I felt my self starting to really understand it and coding faster.
CSS: Learned how to use grid which was groundbreaking for me and helped me alot with this project as its makes it easier to create responsive websites I also got a better understanding of CSS transition.
JQuery/JS: Is really something I see i would like to master at some point. I used it to create the smooth scrolling the hamburger menu and also the skill bar.
Illustrator: Used this to create my logo but at the end I didn't think it was necessary for the website, I might implement it later or for when I redesign it again.
See the full design process here http://kristjansson.dk/images/KRISTJANSSON.DK%20(1).pdf
I am Bjartur Kristjánsson, a 21 year old Icelandic designer who is studying multimedia design at Cphbusiness in Denmark.
I do not have a lot of professional experience but I'm a really fast learner and one of the most motivated person you will find in this area and I love to create something new and different.
If you are interested in a multimedia designer intern Start of 2019, you are more than welcome to send me an email. Contact here.
Currently seeking intership start of 2019
if you have any interesting opportunities, get in touch!
Copenhagen, Danmark
+(45) 52 22 50 57