Hashtag Cyberstar Portfolio

marissa_samrai_1003391

_portfolio egap 1

#

marissa_samrai

1003391 3rd Year Bachelor of Design Student Majoring in Architecture and Minoring in Urban Planning

This document is a Design Portfolio that aims to demonstrate the plan for the structure and content of my online portfolio (website), this takes the form of a sitemap, annotated sketches and wireframe mock-ups.

“

BRIEF The purpose of the Design Document is to aid in the planning, design and development of your online portfolio or other website. Over the course of the #Cyberstar elective you will complete a number of in-class tasks, each will contribute to your websites’ Design Document. Design Documents are an essential step in the web development process. Each section of the document requires the designer to consider

important aspects of their project. Your Design Document will specify the purpose of your website, its intended audience, how it will function, how it will look, what it will include, etc.

marissa_samrai_1003391

”

Website Overview ................................................................................... 4 Site Structure, Site Map and Functionality ...................................... 8 Design Look and Feel .......................................................................... 24 Social Media ........................................................................................... 56 Production and Page by Page Requirements ................................. 58 Implementation ..................................................................................... 60

Website Overview

_introduction My pursual of creative mediums professionally since High School has allowed me to build up a comprehensive portfolio of work over the past four years.

Not only has this collection developed immensely since 2016, but, is also diverse across the mediums, scale and vigour.

From my side interests in textiles, photography and painting to my current focus of Architecture and Representation, this collection currently stands as a mixed tapestry that is disjointed across social media platforms.

In short, my work can be simplified into three categories, university work, commissioned work and personal projects I take on in my free time.

The website aims to ultimately tie together this multitude of work from within university with those projects completed as personal explorations of media and interest.

I will test the capacity of a single online platform to store, display and promote my work in a creative yet clean and accessible manner. I want it to house my work simi-

marissa_samrai_1003391

lar to how a bookshelf houses books, logical, organised and accessible.

purpose_of_website While there are many purposes for this website, its main role is to contain all of the small and large projects of creative engagement I have completed since the beginning of my career.

I

will use this website to organise and store a personal record of projects big and

small, finished and unfinished.

My

friends and family

will use this website as a way of

staying up to date with my latest projects, as the website will be continuously updated with the most current content.

A

potential employee

could use this website to access

my work related to the role I’ve applied for, to demonstrate my ability and knowledge surrounding that particular subject area.

In addition to this, I hope for this website to be easily updated and therefore for its content to be as current as possible. I want for the layout to be suited to easy addition of projects as and when needed, in a modular manner. Furthermore, I would like for the theme to not become outdated, and therefore restrain from over complication of ideas, colours and text.

I believe that the curation of a website is best suited for these objectives, not only because websites are easy to update and add to, but more importantly, because scope of many projects can be showcased most efficiently in a website layout.

Ultimately I would like for this website to be a long term store and display of my current and future projects.

egap

5

Website Overview

target_audience The intended audience for my site is largely based off the current following I have on social media and in my day to day life. My current following contains mainly peers from university as well and family and friends. I believe the only diversion from this,

friends

university p

is to attract future employers to my site, who can access through a link on my resume. This way, the projects I have

current followers of my w

worked on during university can be captured in their best light, along side my commissioned work and personal pursuals of mediums. A website can show a more diverse and

family

up to date range of projects in comparison to a physical portfolio of selected work.

Apart from the great importance of this website helping me to organise and collect my work, I understand that displaying work for others to see is also equally important. The target audience captures those who may be interested in view my projects either for leisure or to gain a deeper understanding about my style and ability.

In view of the website being a reflection of my personal work over a period of

marissa_samrai_1003391

time, I hope to reflect my individual personality and character in the aesthetic, and thus engage with my audience through that. Staying true to my personal values and aesthetic aims to create an original and unique website.

I hope for the categorisation of sub headings and function of the site to aid the particular audience type to the part of the site they are looking for. I want it to be simple to find things and for the layout to be logical and clear.

heard about me through word of mouth have seen my work elsewhere

peers

work

interested creatives who... follow me on instagram

work mates employer

future followers of my work

peers in the field

egap

7

HOME PAGE

Site Structure, Site Map and Functionality

site_structure

marissa_samrai_1003391

MAIN MENU

Upon opening the website, the user lands on a home page that presents a static image, logo in the left corner and hamburger menu icon in the right corner. On this page, the scroll function cannot be used as it is just one single page.

This information is the exact same for the mobile view.

MENU 1 MENU 2 MENU 3

MENU 1 MENU 2 MENU 3

After clicking the hamburger menu icon the full page become lighter with the menu items listed boldly as an overlay.

There is also a direct link to the Instagram page because Instagram is a major social media tool that I will be using.

The three menu items are Projects, About and Contact.

PROJECTS PAGE

FILTER

PROJECTS PAGE

FILTER

The Projects page will be the page with the most information and hopefully the most user traffic as well. Therefore, this page has a high degree of interaction and animation to engage the viewer. The selected layout of a horizontal scroll narrow image gallery allows many projects to be seen at once, creating a visual tapestry of information. The mobile view will show a similar layout, only in portrait orientation and therefore horizontal images maximising the screen length.

UNIVERSITY

PERSONAL

COMMISSION

The small filter button will expand into a long menu showing the three categories of projects. When hovering over an option it will transition to a darker colour. While on the phone, after tapping the filter button, a side panel will appear with the three options shown in bold in front of a transparent overlay on top of the images behind.

UNIVERSITY

PERSONAL

PROJECTS PAGE

FILTER

COMMISSION

FILTER

egap

9

FILTER

description

PROJECTS PAGE

Site Structure, Site Map and Functionality

FILTER

marissa_samrai_1003391

INDIVIDUAL PROJECT PAGE

Back to the project display, when hovering over a particular project an overlay will appear with a very short description or title of the project, this will allow the user to become more informed on the content before deciding what to select.

In view of the phone limitations, hovering cannot be a feature included in this design. At this stage a description cannot be seen without clicking through to the project, however, through experimentation this can change.

TITLE

SUBHEADING

TITLE SUBHEADING

Now, after clicking on a project the user will first see some key images of the projects, placed with ample white space around them. The title of the project and even a subheading will also be shown in the top left. This title and subheading will be fixed in place, such that after scrolling the information on the project name is still clear and present. Furthermore, the banner/header at the top with the (logo, only for desktop, and) hamburger menu icon are also fixed to increase functionality.

INDIVIDUAL PROJECT PAGE

TITLE SUBHEADING

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

INDIVIDUAL PROJECT PAGE

After scrolling down, the page will be short with just 3-8 images maximum and one body of text. The fixed arrow at the bottom of the page will help the user to direct themselves back to the top once they have finished reading and viewing the images.

TITLE SUBHEADING

TITLE

SUBHEADING

After clicking the button, the users will be directed to the top as shown.

egap

11

MAIN MENU

Site Structure, Site Map and Functionality

TITLE

SUBHEADING

MENU 1 MENU 2 MENU 3

MENU 1 MENU 2 MENU 3

marissa_samrai_1003391

ABOUT PAGE

The user can then direct themselves to the next menu item similar to the first steps earlier. Again, an overlay will appear over whatever was on the screen prior to clicking the hamburger icon. Note that by clicking the hamburger icon on the mobile version the logo does pop up, allowing the user to navigate back to the home page. Unlike on the desktop version, where viewers can do this by clicking the logo in the fixed header.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

Menu 2 is the About menu that is comprised of these sections, a biography and a head shot, a features section and a personal photo collection at the end. This page, more than any others is designed to really reflect who I am and create a very individual representation of myself today. On the desktop version this page will have a floating bar with the three sections represented as icons, allowing the user to click between the sections rather than scrolling.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

ABOUT PAGE

dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

The image above shows how the phone header is transparent so information passes behind it as the user scrolls.

ABOUT PAGE

When clicking on the camera icon the user is taken straight to the image collection section as shown below. Such images, similar to the projects, will create a vibrant tapestry of colour and content similar to an Instagram profile. The idea is that images can be easily added over time to build up a collection of personal images.

egap

13

ABOUT PAGE

Site Structure, Site Map and Functionality

marissa_samrai_1003391

ABOUT PAGE

When scrolling in the collection the user can also click on images to view them full screen, and as a light box. After clicking the image will appear in front of the collection along side a short descriptor. From here the user can choose to click out, or they can click either arrows to access the next images etc. This function is also available on the mobile, where users can swipe rather than clicking.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis

The user can exit this view by simply clicking or tapping out in the white space.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

ABOUT PAGE MAIN MENU

The user can then direct themselves to the next menu item similar to the first steps earlier. Again, an overlay will appear over whatever was on the screen prior to clicking the hamburger icon. Note that by clicking the hamburger icon on the mobile version the logo does pop up, allowing the user to navigate back to the home page. Unlike on the desktop version, where viewers can do this by clicking the logo in the fixed header.

MENU 1 MENU 2 MENU 3

MENU 1 MENU 2 MENU 3

egap

15

MAIN MENU

Site Structure, Site Map and Functionality

FULL NAME FULL NAME MOBILE NUMBER EMAIL

SOCIAL MEDIA ACCOUNT LINK

marissa_samrai_1003391

The third menu item is the contact page which I decided to keep very simple because there is no need to complicate it. It simply contains my Name, Mobile Number and Email.

It also has a link to my Instagram which, as I mentioned earlier, is a very integral part of my identity. Both the desktop and mobile have the ability to access instagram thus allowing the viewer to see my design page as shown below.

MOBILE NUMBER EMAIL

MOBILE NUMBER EMAIL

HOME PAGE

MAIN MENU

FULL NAME

As mentioned earlier, in the mobile version, when clicking the hamburger icon the logo then appears in the menu allowing the viewer to navigate back to the home page. This is designed to simplify the pages as much as possible as phone screens are relatively small compared to tablets, laptops and desktops.

egap

17

site_map

HOME

Site Structure, Site Map and Functionality

The Home Page will be a full page image accompanied by one hamburger icon, revealing the following three items... that’s it! I hope for this image/loop video, to draw the viewer in, engaging them and encouraging them to want to see more.

My logo will also be present on this page in the top left corner, and even, possibly incorporated into the image/loop video.

PROJECTS The projects page is the main page of the site as it will hold the most information and will therefore need to be organised the most effectively. Once clicking on projects from the hamburger menu on the home page, snippets of every single project will be revealed in a gallery like view, like a colourful tapestry collection. At the top, there will be an option to filter the contents of the page into the three categories (commission, university and personal). Furthermore, when hovering over any of the images in gallery view a short title or description will appear to inform the viewer of the contents when they click on an image. After clicking on any image it will appear on its own page with further images of the work and a short description.

ABOUT A short biography will be at the top of this page together with a head shot. Then there will be a section for appearances, with links to articles I have featured in. The bottom of this page will hold an album of my favourite photos that can be viewed in a gallery style. The idea of this is to showcase perhaps some of my inspiration

marissa_samrai_1003391

for my projects and also show my love for photography. This section will almost act as an Instagram page full of colour and ideas.

CONTACT The contact page should be simple and clear with an email and phone number, along with social media links.

www.marissasamrai.com

HOME

PROJECTS

ABOUT

CONTACT

commission

university

personal

biography

contact information

project 1

studio

painting

appearances

social media links

project 2

construction

textiles

photo collection

urban planning

more

egap

19

Site Structure, Site Map and Functionality

_functionality

FILTER

MENU 1 MENU 2 MENU 3

When clicking the Project page item from the menu and going to the Projects page, the gallery view automatically passes through a slow animated scroll encouraging the user to scroll more to see the projects. If left to scroll the projects would continue the automatic scroll and eventually present all the projects until the end. This animated scroll is only available in the desktop version.

marissa_samrai_1003391

FILTER

FILTER

UNIVERSITY

PERSONAL

COMMISSION

When clicking the filter button on the Projects page, the additional categories pop out in the bubble overlay, revealing the three options. If the user was to click on the filter button again, the bubble would compress back down into nothing.

FILTER

description

When hovering over the individual projects a ribbon overlay will animate from the bottom of the strip to the top. Then the text description will appear over the top of this.

TITLE SUBHEADING

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed

The ‘back to top’ arrow will spring the user back to the top of the page.

egap

21

Site Structure, Site Map and Functionality

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis

When clicking the arrows in the light box mode (in the photo collection) the images will swipe through, similar to how they would if you were scrolling.

MENU 1 MENU 2

marissa_samrai_1003391

MENU 3

In the mobile version, the hamburger icon will rotate 90 degree when you click it and rotate back once the user has exited the menu.

PERSONAL

COMMISSION

FILTER

UNIVERSITY

FILTER

In the mobile version, the filter bar will transition from the left when clicking the filter button. The transition will retreat once the desired category is selected or if the user chooses to tap out.

egap

23

design_research When researching existing websites and media related to the website you are building, it is important to consider the functionality, usability, content and design of the sites you have found.

The following pages provide a brief analysis of 10 website examples, five good and five not so good. The analysis will cover what works well in the sites, what does not work well and what aspects of these designs are informative to my design

Design Look and Feel

I specifically chose to analyse websites that I understand the ethos behind or, are related to the portfolio style website that I aim to create. The websites that I understand the context behind are either architecture websites I have researched through university in the past, or, small business from my home town.

NOT SO GOOD

Austin Maynard - Award Winning Architecture Firm located in Melbourne

Suzanne Collins - Famous Author

Clinton Krause - Locally Established Architect

Form + Function - Locally Established Architect

Autografix Signs - Locally Established Graphic Design Company

marissa_samrai_1003391

GOOD

Mikiya Kobayashi - Japanese Product Designer

Studio Bright - Award Winning Architecture Firm located in Melbourne

Verena Michelitsch - Inedepent Designer based in New York

Melaie Daveid - UX Designer and Art Director from Austria living in Berlin

Pascal Vangemert - Web Developer located in The Netherlands

Austin Maynard https://maynardarchitects.com/

While the general principles behind this website are good, there are some details that do not appeal to me. Firstly, logo style does not match the aesthetic of neither the website itself or the Architecture firms nature and values.

Next, the header font and style feels detached from the rest of this home page.

While the gallery view is appealing, some may think that it is overpowering and thus makes it hard to locate a particular project.

When clicking on a project, there is al ot of wasted space on the right side, furthermore, the page has a very long scroll on it, making it hard to get alot of the information quickly.

egap

25

Suzanne Collins

Design Look and Feel

http://www.suzannecollinsbooks.com/index.htm

I believe that this website is fine and plays its role in presenting information clearly however I also think that the aesthetic does not reflect Suzanne Collins at all. The colour pallet is lacking in interest and the font style and branding is very simple and not very memorable.

marissa_samrai_1003391

There is also a lot of text on the pages as you scroll down, which could have been broken up by imagery and graphics.

In saying this however, I appreciate the use of quotes along the left side to break up the text and overall appearance of the page.

Clinton Krause http://www.warrnamboolarchitect.com/contact.html

As many websites are, this website appears to be an after thought that was hurriedly put together. The tile of the page itself is not very unique and does not appear to have any real branding attached.

While the use of white space is generally good, at times, there is too much here, thus making the page feel blank and unfinished.

The style of the website seems outdated with the combination of fonts and the use of image transitions etc.

Meanwhile the display of projects is probably the best feature of the website as they are quite clear and the images load quickly.

egap

27

Form and Function

marissa_samrai_1003391

Design Look and Feel

http://www.formandfunction.net.au/

Similarly to Suzanne Collins, this website is clear and provides all the necessary information. However, the whole aesthetic of the website does not match the ideas of the firm and their ethos. This firm creates innovative and modern residential architecture and is very well known in the area. Unfortunately neither the branding of the website reflect this.

While the whole aesthetic is of-putting and lacking in creativity, there are limited active links for the user to use to discover more about the practice. Being a leading firm, having social media links to this site would definitely bring alot of traffic and possible clients to the page.

Some aspects of this site seemed unfinished and lacking.

Autografix Signs http://autografix.com.au/

I was surprised at the lack of quality this local businesses website had mainly because of the graphic design service they provide.

The branding and website as a whole does not reflect the level of graphic design work this company is capable of.

Another aspect of this website that I disliked was the lack of linking through the ‘pages’. Essentially there is only a single page with the headings at the top linking to different parts on the home page. I believe this feature is disappointing to the viewer because it is pleasing to click and see more of the website, rather than just more of the same.

egap

29

Mikiya Kobayashi

Design Look and Feel

https://www.mikiyakobayashi.com/projects

Unlike Austin Maynard’s Website, Mikiya Kobayashi uses the gallery tile view effectively and is much easier to digest, being the home page. When hovering over the tile, it become darker and reveals more information about the image and link, this technique is very useful.

marissa_samrai_1003391

I especially appreciate how simple the headings are, thus making the information easy to find.

Everything is very clear, yet each of the pages contains a lot of information. It is neither too much nor too little.

Studio Bright https://studiobright.com.au/

I think the opening page of this website is great, the use of a loop video is also super different and innovative. Again, the very simple layout gives the user a clear direction in finding the information they need. The simple branding of this Architecture Firm also makes it easy to read and identify, while the colour pallet is determined largely by the images of projects.

Another take on the gallery view is a disjointed grid system with plenty of white space to allow the images to breathe.

When hovering over an image it comes to life with colour, thus encouraging the user to click into it and seeing more about the work. At the top of the projects page there is also a filter to organise the projects based on various categories.

egap

31

Verena Michelitsch

Design Look and Feel

https://verenamichelitsch.com/

The creative and unique photography used in this site brings each page to life with colour and identity. Again, while the branding is kept simple, is the vibrancy and content of each image that gives the website its identity and character.

marissa_samrai_1003391

After scrolling down, large images are broken up by blocks of tone and small snippets of text, an interesting contrast.

While the quality and professionalism of photography used here will be hard to match, the ideas and formatting behind this website is inspiring.

Melaie Daveid http://melaniedaveid.com/

Dissimilarity, this website relies on the branding and colour scheme of that branding to define the aesthetic. The logo, as seen on the home page, becomes animated as one ventures into the website more. The hand become more and more disjointed in one scroll, adding interest and creativity to the site operations.

The way the site was split up according to page content was interesting and different. One half, or sometimes one quarter, of the page would stay pinned to the side as you scrolled and saw the information and content on the right. This allowed the viewer to focus on a specific part of the page rather than become distracted.

egap

33

Pascal Vangemert

marissa_samrai_1003391

Design Look and Feel

http://www.pascalvangemert.nl/#/profile

I thought that it could be interesting to see how successful an online/interactive resume could be. I found this one that used very simple ideas to execute an interesting and captivating presentation of a resume. While I will not present my work like this, there were some design features I could use.

The rectangular menu bar was a great aspect of this page. It stuck with you while you scrolled down and up, and when click on a section of it, it redirects you to that particular part of information. This tools works particularly well for sites with a single page of information, thus saving the user from scrolling so much.

Overall this design research process has allowed me to develop an idea of what does and doesn’t work well in websites. Additionally, there are many aspects of some sites that could be used in my site, because they correlate with the intended function and use of my site. These aspects include:

• effective use of gallery view to see many images at a time, therefore allowing the user to click on what they are most interested in after appreciating a variety of options • use of simple yet recognisable branding to allow the images stand out and become the focus of the page rather than a logo • use of a very minimal colour pallet to again, allow the images stand out and become the focus of the page • limited number of pages to reduce the users need to search for information unnecessarily • careful curation of photography and graphics to add interest and vigour in the design of the site

egap

35

marissa_samrai_1003391 Design Look and Feel

_moodboards

These four mood boards are inspired purely by selected images of my projects. They are categorised based on the layout of the site and the various sections I plan to include in the website.

egap

37

marissa_samrai_1003391 Design Look and Feel

egap

39

marissa_samrai_1003391 Design Look and Feel

colour_palettes

egap

41

marissa_samrai_1003391 Design Look and Feel

The experimentation on the first pages shows colours that have been extracted from my mood board and variations of these colours. Such a technique shows the variations on the types of pinks or types of blue for example, thus displaying more and less saturated versions of colour. This is useful because depending on what the colour is used for, such as a block of colour, coloured text or background colour, different opacity and intensity of the chosen colour is required.

Although my website will not intentionally use colour widely, it is important to use it well when it is used. Therefore, the exploration shows how I decided that the use of colours behind white text is too intense and not suitable for my website. However, the use of colour in text on a white background can be used in small parts to make something stand out or allow it to intentionally blend in the background. While coloured text on a white back ground does not work as well with large paragraphs of text, it proved to be successful with small sub headings among black text.

Next I chose my final colour palette and the incorporated these colours with the text, menu options and also logo. This then gave me an idea of how the colours from the colour pallet may look on the website. Although these are my final designs I will only choose a select few for the website itself depending on the layout and contents of the page I am designing. For example are more simple logo could look better next to a very colour project while a bolder logo would like nicer on the contact page, which has the least amount of information.

egap

43

marissa_samrai_1003391 Design Look and Feel

_typeface

egap

45

marissa_samrai_1003391 Design Look and Feel

To begin the design process of choosing typeface, I first selected some of my most favourite fonts that I have often used in my personal work. Many of these fonts have variations such as bold, italic, light, semi light, etc. Such variations are used to give hierarchy and interest to the a page, and allows for information to be ordered and presented with variety.

From here, I then decided on my three favourite fonts styles and presented them each with an example paragraph to demonstrate their appearance on a larger scale.

The final font choice of Segoe UI was selected based on order of elimination.

After choosing a font style, I then experimented with the colours established in the following pages of colour palette exploration. While I don’t want my website to appear colourful in the text, logo and overall design layout, it would be nice to incorporate a hint of colour in sub headings or short main headings to create a relationship between the colour in the images and the accompanying text.

The page on the left shows the final choices of typeface including four variations of the Segoe Font. Next are some examples of this font in menu bar styles to show how it could appear on the website. Then, I experimented with the use of small hints of colour within the text. I really liked how this turned out, especially because I can see it working well on the site.

I believe that the final outcome of the typeface design reflects a clean and modern take on website design. While this website will not be particularly text heavy, when text is used, like in the biography, it should be clear and easy to read.

egap

47

marissa_samrai_1003391 Design Look and Feel

logo_design

I was certain from the beginning of this design process that I wanted for my Logo to present as a personal reflection or stamp of myself. I believe the best way to achieve this in a creative and succinct way was to create a signature that can be used in my art, alongside any branding and of course as the main logo on the home page.

All of these font styles were created using an online generator which I then edited in Photoshop to change colour and add backgrounds.

As already mentioned, I hope for the images and content on the website to provide the main focus, including the colour pallet, therefore I need a simple yet recognisable logo that is clear and suitable for the context.

Given the options displayed, I have chosen my final logo along will possible variations that can be used if and when necessary.

The variations to the logo includes alterations such as colour change to provide an alternative design that can be used when suitable. For example, some pages of the website may contain much less information that others, thus allowing for a more prominent and creative logo.

egap

49

marissa_samrai_1003391 Design Look and Feel

The final logo design with its variations is presented on the left. I believe that this style and colours shown reflects both my personal aesthetic and beliefs, but also reflects the whole theme of the website. Because the colours were taken directly from the mood board that was entirely inspired by some of my personal projects, the feel and emotion should match when presented on the website as a whole.

The variations of the final logo allow for different logos to be used where necessary.

For example, if I wanted a coloured logo in the corner of a grey-scale project I can insert one. Or, if I wanted to add some colour to my Instagram feed while promoting my Website and brand, I could post a coloured logo to my page alongside a project.

Ultimately, it reinforces my branding and name in a creative and varied manner, rather than just using one standard logo for all contexts.

Furthermore, an advantage of having a logo that is similar to a signature in its nature is that it can easily be used to sign off a message or sign off a piece of work. I think its great how versatile a single logo can be, even without the many variations I have designed in addition.

Having a logo that is also your name is another great way to reinforce branding to make a name and visual recognisable to the viewer. This way there is less information to digest and therefore more chance of remembering it.

egap

51

marissa_samrai_1003391

Design Look and Feel

mock_ups

Above are two variations of the home page with two different images. While I plan for a single static image, it may be interesting to change the image every few moths to keep it interesting, or alternatively, create a slow sideshow. The final decision will be based on how it looks in the website builder.

Below is an example mock up of the about page showing an example of a head shot, a short biography and then a feature in the University of Melbourne Website. It will be interesting to see how I link the University website content to my website without just providing a URL link.

egap

53

marissa_samrai_1003391

Design Look and Feel

The photo collection page aims to show a whole tapestry of colour and memory presented like a tiled album. Below shows the collection layout, at the bottom of the about page, and also the transition when clicking on an image.

egap

55

social_media_ intergration_plan Given the fact that I already have started gaining a following on Instagram via my Design account conceived less than a year ago, I will use Instagram to promote my website and use my website to promote my Instagram also. I believe that having selected forms of social media could work better than bombarding the user with many accounts across a variety of platforms. Additionally, some platforms are better suited to certain information types, Instagram is definitely suited to design and presFULL NAME

entation of imagery and graphics, whereas something like Facebook is better suited FULL NAME

MOBILE NUMBER EMAIL

MOBILE NUMBER

towards businesses of a different focus.

EMAIL

Currently, I use Instagram to promote my work in a varied manner. Some posts show my work in a formal lens, in their finished and refined stage, whereas other

marissa_samrai_1003391

Social Media

posts show sketched drawings and various other moments of the design process.

After launching my website I hope to formalise my Instagram more, creating a completely refined and finished paged.

@marissaxsamraixdesigns

While I have already mentioned that I have set up a Design Instagram account, I have also posted my projects on other sites including Pintrest, Vimeo and Issu.

While all three of these sites are very functional and support my projects in their own way, I believe that it is not necessary to add links or intentionally incorporate them into my website at this stage. As I mentioned earlier, I think that it is better to stick to select social media accounts that best promote my work, at this stage, Instagram is perfect for that. Furthermore, the type of content I have begun to develop on Instagram is largely images but also includes some video content too. I like how Instagram has a variety of formats for videos such a boomerangs, loops and even Instagram TV, I think this helps to add variety to users feeds.

Similar to my website plan, my Instagram contain projects from all three categories of University work, Personal work and Commissioned.

In view of the participation from the majority of leading designers across the globe, Instagram is one of the most powerful social medial platforms that allows for international communication and accessibility of information.

The link to Instagram is featured in the main menu on my site as well as on the contact page. Given that Instagram can be accessed through both mobile and desktop applications, I believe this placement is sufficient and appropriate. I plan for my Instagram biography to contain the link to my website in order to integrate the website into the social media platform.

Given the high likelihood of further expansion of my website to include more diverse projects, it is likely that Apps such as Vimeo will be linked in the future in order to provide full accessibility to my projects.

egap

57

_production HOME The home page will feature a full screen image with the hamburger menu in the top right and the logo in the top left.

PROJECTS This page is a complete gallery of images showcasing each and every project. After entering through to a project, more images and a short descriptor provides the context and information surrounding each project.

ABOUT The about page is broken into three sections including a head-shot and short biography, a section displaying articles I’ve featured in and finally the image collection (roughly 50-100 images). These three sections are in the same page because I strongly believe that they are all related to one another. This whole page is all about me, my achievements, my appearances in media and my album of personal images. Additionally, I do not want the user to struggle to find the information they are looking for, this way, all the personal content information is on one page. This also

marissa_samrai_1003391 Production and Page

by Page Requirements

minimises the need for a lot of options in the main menu bar, which again, simplifies the whole websites functionality,

CONTACT The contact page is extremely brief with only the necessary information; Name, Mobile Number and Email. There is also a link to my Design Instagram Account at the end of this page.

www.marissasamrai.com

www.marissasamrai.com

URL

HOME

PROJECTS

ABOUT

CONTACT

TYPE

Home Page

/ projects

/about

/contact

Projects

Text, Feature Links and Gallery

Text

META TITLE

META DESCRIPTION

Marissa Samrai, Design, Architecture, Website, Home

Welcome to the Website of Marissa Samrai, Designer practicing in Melbourne, Victoria

Marissa Samrai, Projects, Architecture, Personal, Commission, University

View a diverse range projects from Marissa’s Portfolio including Commission Work, Personal Work and University Projects

Marissa Samrai, Biography, Feature Articles, Photo Collection Gallery

Head-shot, Biography, Features in recent Articles and Social Media, Gallery of Photo Collection

Marissa Samrai, Contact

Contact Marissa Samrai, Designer practicing in Melbourne, Victoria.

MEDIA

TEXT OUTLINE

Full Page Image No Text Small Logo

Multiple images of every project

Head Shot Feature Articles Photo Collection

Captions to each project

Biography Captions to Feature Articles Captions to Images in Photo Collection Full Name

No Media

Phone Number Address

WIX Verified :

egap

59

_implementation Having used WIX before to create a website, I plan to use it again for this task because I am familiar with how it works and its capabilities. I believe that there are a lot of options when it comes to customization. I am certain that what is outlined in this document can be created in WIX. Another great advantage of using WIX is that they provide many links to external Apps to improve your website, such a bookings, buying products in an online shop and even mailing lists, which can be implemented into the site as and when needed.

WIX is also very useful in providing inspiration for the site. Although I am very happy with the plan contained within the document, when creating the site, it is likely that some ideas will change and develop based on the capacity of WIX and what it is suggesting for you to do based on the content. I am certain that WIX will be the most useful and comfortable online program to work with to build my website.

WIX also has many options when it comes to plans that allow for the user to purchase their own domains and other exclusive features. Given that the free WIX version give all the adequate features for the current use of my site, I have chosen to

Implementation

marissa_samrai_1003391

stick to this.

After playing around in WIX for a bit I decided to mock up in the program some possible layouts for my home page (one is below). It was a great exercise to do, as I was able to see which images looked the best as a full screen size and also how the proportions of the menu bar and headings look in front of the image. As already mentioned, WIX is very easy to customise and there are many opportunities for creating a completely unique design, so I look forward to experimenting more when it comes to building my website.

In addition, it has been a few years since I used this website building site, so I hope to find many changes to the layout and functions of the program to allow for the user to create even more creative and interesting designs. In saying this, I am aware of the current capabilities including interesting animations for text and image transitions. I believe that my most interesting page will be the Projects page, where I will have many opportunities to experiment with such animations and features.

egap

61