Web Design Studio
Jake Aaron Cohen
Introduction This course will be an opportunity to create a fully working and usable portfolio website to showcase my work as a designer and photographer. With the knowledge gained from this class, I will continue to maintain my online portfolio and construct new websites.
Synopsis The World Wide Web is a medium where anyone with an internet connection can view and interact with websites. This course focuses on the creation of such sites through concepts and practical application of interactivity.
The classes are comprised of both lectures and practical exercises where individual creativity is stressed as well as understanding and use of interactive devices in the communication of ideas. The outcome will be a working website.
University of the Arts Fall Semester 2015
Web Design Studio 8 week project
Requirements
1-4
User scenarios
5-8
Site Mapping
9 - 12
Competitive Analysis
13 - 20
Inspiration
21 - 22
Wireframing
23 - 34
Prototype
35 - 36
Interface Design
37 - 46
Final Outcome
47 - 49
Reflection
50
Requirements The first step for this project is to draw a list of requirements that define what the site is, who it’s for and its purpose. This was particularly useful in understanding how to go about designing the website regarding content, functionality and accessibility.
www.jakeaaroncohen.co.uk The website I would like to create is a personal portfolio page to showcase some of my completed projects and works in the making. In addition to this, I would also like to display my photography work as another part of my creative practice. I would like the website to also serve as a blog, where I can easily post updates on what I am doing, allowing people visiting my portfolio
know what I am doing and to be able to comment on and share my posts if desired. The website I want to create will also become a useful source to display social media links and contact information. Adding to this, not only should the website act as a portfolio, but also an online resume which displays my experience, skills and qualifications as a designer & photographer.
Requirements The foundations to my website Target Audience: Individual
What is the age range? An intended audience of 18 - 40 years old. Will your site appeal to more women or men? What is the mix? As a portfolio website, I believe that my website would appeal to any gender with an interest in my work. Which country do your visitors live in? The majority of traffic for my website will be from friends, family, acquaintances and companies based in the UK. However, my website should be treated as a multinational portfolio, so could draw in guests from any country across the world. This perhaps might be the case as well, as I have many contacts that do not exclusively live within the UK that may potentially visit my website. Do they live in urban or rural areas? Both - The majority of my target market audience will live within urban areas, but those in rural areas should easily be able to access my website if desired.
1 | Web Design Studio | Jake Cohen
What is the average income of visitors? My anticipated audience varies between students to young professionals, all the way to successful companies, so the average income can span widely. What level of education do they have? Typically, the level of education to appreciate or show interest in someone else’s work is high. Potential visitors to my website have obviously come for a reason, however, it is possible for someone to stumble across my website accidentally, so their needs should be considered too. What is their marital or family status? I do not believe the marital status will affect who will visit my website, therefore, either or. What is their occupation? Likely to be in the design profession or professional companies looking to hire. Professions of the viewer can span widely as it could be anyone interested in my work or anyone stumbling across my website.
50:50
high school +
to promote myself
email only
18 - 40
web & mobile
How many hours do they work per week? This can vary from person to person; most likely visitors are employed, so working at least 10 hours per week. How often do they use the web? Likely to use daily or every few days.
What kind of device might they use to access the internet? Computers, mobiles, tablets or any other wireless device. Ideally, I would like my website to be accessible and usable through any platform desired.
Jake Cohen | Web Design Studio | 2
Requirements
the foundations to my website Target Audience: Companies
What is the size of the company or relevant department? Small local companies to large multinational companies.
Will visitors be using the site for themselves or for someone else? Likely to be both cases, depending on the situation.
What is the position of people in the company who visit your site? Likely to be in charge or hiring and firing, directors or designers.
How large is the budget they control? Varied - likely to range from nothing to a significant amount.
3 | Web Design Studio | Jake Cohen
family members
design critiques professors
artists
craftsmen
WHO? industrial designers design agencies students potential employers bloggers Jake Cohen | Web Design Studio | 4
Dylan Frietas Dylan is a twenty-one year old student at The Glasgow School of Art. He is studying Product Design and is halfway through second year. He is interested in art and design, photography and music production. Like most students his age, he has a fairly busy social life, but spends most of his time working on his project assignments or in his part-time retail job.
Access date 16th October 2015 User group peers and acquaintances Aims browse project work, look at the latest blog updates and comment on a post
User Scenarios Who will use my website? Scenario one
Being a fellow Product Designer, and being one of his main interests, Dylan decided to click a link to the portfolio and have a browse of some of my work. Reaching my website, his eyes are drawn to a fading carousel images showing some of my recent projects and blog updates. Alongside seeing these updates, he also scrolls down the page and discovers some featured projects, some of which he is interested in finding out more about. He decides to click “Read more” on one particular project. Upon click this link, he is taken to the project page where he can see visuals of the project alongside a short description of the design brief and process. After reading through the post, he decides to share this on Facebook using the social media buttons listed below the content. Next, Dylan sees navigational links at the top of the page just below the title of the portfolio. He clicks “Blog” in order to see my latest works in progress. Upon clicking this, he is taken to a new page which uses WordPress content managing. Browsing through the posts, he decided to comment on a particular
update which catches his interests. He fills in a form with his name, email and his message, and then this is posted under the content with the other posted comments. Next, Dylan heads back up to the navigation pane at the top of the screen. He clicks “Photography” to see some of my latest snaps. Upon reaching the page, he is greeted by a large fading carousel which shows some of my featured photography. Scrolling though page, he sees navigational options showing different categories of photos. He clicks “nature”, and this changes the thumbnail images below the carousel to images fitting this category. Scrolling through these images, he decides to click on a photo of a whale I had recently taken. This brings up a lightbox which shows the image larger, and also displays a caption and social media buttons for sharing the photo. He continues to repeat this process looking at different photo categories. After browsing through my website, Dylan then adds my portfolio to his favourites in his browser and then closes the tab and continues to use the web.
Jake Cohen | Web Design Studio | 6
User Scenarios Who will use my website? Scenario Two
Sophia types in the URL she found on my resume. Upon entering the URL, she is greeted to the homepage of my design portfolio. On this page, she is immediately attracted to the carousel of recent projects. After the carousel has rotated through some of my posts, she decides to click “View project” on one of them. This takes her to the project page where she is able to find out more information. She reads the brief description, and the techniques and processes used to complete the design brief. She also scrolls through some of the imagery of the project. She makes some notes in her notepad about this. Next, she decides to head to the navigation pane at the top of the screen and clicks “About”. On this page, she is able to find out more information about me as a person alongside the information provided in my printed resume. She then notices a link to an online resume, which she decides to click. This brings up a new page, where she is able view my qualifications, experiences and hobbies. Even though she has a printed copy
7 | Web Design Studio | Jake Cohen
of my resume, the online version includes a more visual representation of what I do and who I am, and she can find out more about me here too - it is not duplicated information. Upon reading more into my interests and hobbies on the resume page, she learns that I have an interest in photography. Learning this, she heads to the navigation pane and clicks “photography”. On the photography page, she browses some of my recent and past work and believes this might be a useful skill for the job vacancy. Next, she decides to click the “Contact” link in the navigation pane. This takes her to an information page that displays different methods of getting in touch with me. She notices that there is a “Send me a message” form, where she can fill out his name, email and the message she would like send me. After typing his message, she then clicks “Send” which sends this message to my email account, where I can reply, and then she will receive the message to her emails. Following this, she decides to close the tab and finishes the session.
Sophia Warburton Sophia is a 36 year-old director of a design internship based in Manchester, England. She has recently received a resume in print which I posted to her office. She noticed that I had included a link to my online portfolio and wanted to find out more about me and the experience I have.
Access date 23rd February 2016 User group potential employers Aims browse project work, read information about me and review resume
Site Mapping With an understanding of the requirements for my website, the next step was to produce a site map. This helps with understanding what pages are required and planning how users can easily navigate between them.
09 | Web Design Studio | Jake Cohen
Level 1
Level 2
Level 3
Level 4
Level 5
home about resume blog archive work projects
photography art design product
industrial visual contact social media
11 | Web Design Studio | Jake Cohen
Site Mapping Proposed pages & content Page Descriptions
Home This is the landing page and will show featured projects and photography, intended to direct the user straight to my work. About This is the page people can find information on who I am, what I do, and where I am based. A resume will also be downloadable from this page. Blog This is the page for me to keep visitors updated with what I am working on, what I am learning and a form of self-documentation for my projects. It will be powered by WordPress, and will have categories and an archive to filter published posts. Work This page will include tabs to my design and photography work, and further sub-categories to filter projects for ease of use and quick navigation to certain content.
Projects These pages will give the project title, dates, disciplines and description. At the head of the page will be the “money shot� to sell the project, and following this will be a selection of images that document the project and the resulting outcomes. Photography lightbox The lightbox will be a pop-up element when a photo thumbnail has been clicked on the Photography page. It will show a larger version of the image, a short description and social media links to share the photo. Contact This is perhaps one of the most important pages within my website. Here, visitors will find my contact information (email addresses) and also an online form to send me a personal message. This page will also include links to my professional social media channels such as LinkedIn and Instagram, where the user can also connect with me.
Jake Cohen | Web Design Studio | 12
Competitive Analysis In order to gain an insight into how my website should function, feel and visually appeal, I looked at existing portfolio websites. By doing this, I am able to perceive and what a portfolio website should show, what the functions are, overall usability, aesthetics, and most importantly, the purpose.
13 | Web Design Studio | Jake Cohen
Tino Klaehne Industrial Design Portfolio tinoklaehne.com
15 | Web Design Studio | Jake Cohen
Thoughts Tino’s website is quite different to the typical portfolio website, with the use of a sketchbook theme and an overall hand sketched design. It certainly has a charm that most portfolio websites for Industrial Design do not give off. Whilst it’s different, I am not sure I want to take this route
with my portfolio. I feel that information could be organised much more neatly and professionally, holding a range of different content. Although saying this, I believe his CV page is really well designed, organised, and minimal, and would like to take this layout as inspiration for my CV page.
Jake Cohen | Web Design Studio | 16
Robert Bye Product Design Portfolio robertbye.com
17 | Web Design Studio | Jake Cohen
Thoughts Robert’s Product Design portfolio website is sleek and well designed. The content is displayed in a really appealing way that isn’t too much for the reader to be scared away, instead drawing them in with beautiful photography and minimal text. This is an approach I would like to take for my website.
Whilst I like how he has organised the information about himself on his homepage, he doesn’t use a dedicated “about” page to display this information; some people may not scroll all the way down to the bottom of the homepage and thus not come across this crucial information.
Jake Cohen | Web Design Studio | 18
Eric Ryan Anderson Photography Portfolio ericryananderson.com
19 | Web Design Studio | Jake Cohen
Thoughts This is a really well designed photography portfolio - it gets straight to the point of the website - to display his photography. As soon as you get to the homepage, you see his work straight away. I like this concept as a hook to reel people into my work as a sense of intrigue, capturing and making the viewer to
want to know more about me and my work. This being said, I do not like the use of the styled scrollbar on his portfolio. By using this scrollbar it makes the logo and navigation at the top of the screen appear uncentered, which I feel takes away from the overall flow and design of the page.
Jake Cohen | Web Design Studio | 20
www.sociodesign.co.uk
Inspiration My main source of inspiration for the design of my online portfolio is a website named Socio Design, a design strategy agency. Their use of grids, fonts and overall layout is minimal and pleasing and the information and content is organised in a structured method that makes you want to read more.
21 | Web Design Studio | Jake Cohen
Wireframing Now feeling inspired and with an idea of how I wanted my website to look, I began producing wireframes for each of my proposed pages. This was particulary useful in planning the layout of information and components.
23 | Web Design Studio | Jake Cohen
Sketching In order to understand how I could create a layout that works for my portfolio, I sketched various wireframes and content placeholders. By doing this, it allowed me to see which layouts work best and which grid should be used for each page. This was also a useful process in actually finding out the content
that needs to be, or should be, placed on each page, as well as establishing a visual hierarchy of information. From these sketches, I could then progress to build digital wireframes in the appropriate dimensions for the world wide web.
Jake Cohen | Web Design Studio | 26
Digital Wireframing
fixed navigation
Project Link brief description of project
image carousel
featured work
home Jake Cohen | Web Design Studio | 28
header navigation
profile photo
working photo
photo link to resume
social media links
home / about
29 | Web Design Studio | Jake Cohen
page breadcrumbs
blog update photos
blog post photo
home / blog Jake Cohen | Web Design Studio | 30
portfolio categories
sub-category filter tabs
home / work / design / industrial design
31 | Web Design Studio | Jake Cohen
load more photos
home / work / photography / nature Jake Cohen | Web Design Studio | 32
main project photo
“money shot�
project imagery
home / work / design / industrial design / project title
33 | Web Design Studio | Jake Cohen
contact photo
email address
contact form
home / contact Jake Cohen | Web Design Studio | 34
www.jakeaaroncohen.co.uk/wireframe
Prototype In order to visualise how my wireframe designs would work on the web, I created a prototype with working links and effects such as rollovers, opacity changes and lightbox pop-ups. This was a useful technique in seeing the functioning of my proposed design, allowing me to perform user testing and receive constructive feedback.
35 | Web Design Studio | Jake Cohen
Interface After developing a working prototype, I then progressed on to designing the interface. With my online portfolio, I wanted to use a minimal style so that my work stands out; so, I decided to keep colour to a minimum in my design. Combining this style with the content intended makes the imagery a key visual in the communication of my work, and sets the tone for my portfolio.
37 | Web Design Studio | Jake Cohen
home
39 | Web Design Studio | Jake Cohen
home / about
Jake Cohen | Web Design Studio | 40
home / blog
41 | Web Design Studio | Jake Cohen
home / blog
Jake Cohen | Web Design Studio | 42
home / work / photography / nature 43 | Web Design Studio | Jake Cohen
home / work / photography / nature [lightbox]
Jake Cohen | Web Design Studio | 44
home / work / design / industrial design / project title
45 | Web Design Studio | Jake Cohen
home / contact
Jake Cohen | Web Design Studio | 46
Final Outcome After completing my interface, I then designed and coded my website through trial and error over a spread of 4 weeks. My final website is responsive, thus adaptable based on the screen size of the device used.
47 | Web Design Studio | Jake Cohen
responsive design
49 | Web Design Studio | Jake Cohen
Reflection
Web Design is always something I have had a passion for, and I have enjoyed making websites in the past both for myself and companies. The Web Design Studio at University of the Arts seemed like the perfect opportunity to brush up on my Web
the future for new web-based projects. I am excited to implement these skills as I continue to maintain the web portfolio built in this class.
Design skills as I have always self-taught myself since a young age.
for this class. I have had online portfolios in the past, but none as well designed as this one. I anticipate to maintain this website regularly and update it with the work I produce both in university and in my free time. I believe a great asset for a designer is to be well connected on social media, and a portfolio website helps to communicate my work to a global audience. With my website now complete, I am excited to see how it develops as I produce and upload more work, and how it can act as an intangible medium of communication.
Each 6 hour session in the studio provided a great learning environment where new skills and techniques were taught, which then could be practiced and adapted. Although I had a wide understanding of Web Design prior to this class, I have learnt new methods of coding, discovered new applications and understood key terminology, which will push me further in
I am very pleased with my final outcome
Jake Cohen | People & Mechanics | 50
Jake Aaron Cohen
Industrial Design
University of the Arts