Interactive Design / Final Project : Design, Exploration and Application

21.11.2022 - 13.12.2022 / Week 13 - 16

Yung Siew Weng / 0339847

Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Project / Design, Exploration and Application

Final Project : Design, Exploration and Application

MODULE INFORMATION

INSTRUCTION
We are required to create a professional website based on the previous project 1 and 2. This website could tame the form of a web design portfolio, small business website, informational site or whatever else the client desires. Projects must be approved by the lecturer/tutor to ensure that they are feasible in an introductory level class, but are otherwise up to the client to decide. The client will decide of setting the project goals and providing all the content for the site. The designer is responsible for all other aspects of the site.

For this particular project, we are required to develop minimum of 5 pages of website based on the design in project 1 & 2. The Website should use valid XHTML and using external CSS. The content must use original text and original and graphic design. The website should not have broken links and properly use of HTML Tags.

EXPLORATION
This task was considered as the continuous version of the previous assignment; project 1 and project 2. Since this task was required a 4 minimum more pages for the website. I designed the appearance of the pages, and yet create the sites by using HTML and external CSS.

Before the exploration, a brief about; Jacqesign is the art saving site that owned by myself which is " Jacq (Jacqueline) + design". So, I will created the all layout design based on my personal "style".

The pages that I wish to extend for ;
- About Me
- Services : Project
- Services : Graphical Design
- Services : Typography
- Services : Illustration Design

- Shop

- Contact

//it consists more than the minimum requirements but I wish that I can created the full website; not just a half-way as it considered as my own benefits as the outcome was totally owned by me, myself.//

At the very first, I decided on the design of the extended pages, and *in facts* It was very difficult to decide which image is the best composition.

Fig 1.1 Development progress, AI (week 13/ 25.11.2022)

During the idea sketch, I usually had created the sites directly in order to make amend on the spot if figured on any of the composition was not smooth or great.

Before I start exploring, I insert all navbars and footers into all pages of the site. Also, at the moment I thought the footer was a little weird, the coloured lines in it wouldn't look good if moved to other pages, so I modified it to make the coloured line to be completely fulled.

Fig 1.2 Adjustment, Footer (week 13/ 25.11.2022)

#solution;

margin-top: 50pt;

padding-top: 30px;

padding-bottom: 20px;

}

After the navigation bar and footer, I started to develop the page design, creating mood-board, "sketches" and did some ideation on which or what to insert for the different pages. I spent some time (out of expectation) on constructing the idea and site.

#Final Idea Sketch (AI)

Fig 1.3 Ideation, PDF (week 13/ 25.11.2022)

During the web development, I had been struggle on the spacing between the footer and the context (since I am using a white background and not using jump break to separate them).

I had explored on several methods including set a line or change a background colour for the particular sections; but I don't prefer all of them. Thus, rather to make the layout to be irritating, I made a gaps between the contexts and the footer so the audience can differentiate easily on the contexts and footer.

Fig 1.4 Adjustment, Gap between contents and footer (week 13/ 25.11.2022)

#solution;

.design {

padding-top: 100px;

}

//I create a class attribute "design", insert under the class of the footer and yet adjust the padding-top. And, it applied to all the pages.//

#Website, First Full Version

Fig 1.5 Website, first full version (week 13/ 25.11.2022)

After I constructed the full version #1, I continued on exploring the style, making the pages to be more great and completed. In facts, I had some struggles on the previous working page, and yet to amend it during this particular task.

Firstly, the mail icon that can't linked to my mail. I did some research on checking how to link the icon to a direct mail.

Fig 1.6 Linked icon to direct mail (week 13/ 25.11.2022)

#solution;

< href= "mail to .." >

Since my preference browse is Safari overall, I had struggled on the icons which it cannot be seen through Safari web. I spend some time exploring (also in previous ass but failed); and I did it!

//left = Safari ; right = Chrome//

Fig 1.7 Icon on Chrome vs. Safari (week 13/ 26.11.2022)

#solution;

//previously using the code from Bootstrap with nav toggle //

I felt that the icon's pixel was broken, and I re-build the new icons including the new icon: back to top.

Fig 1.8 Icon, new version (week 13/ 26.11.2022)

Fig 1.9 The new icon, Safari (week 13/ 26.11.2022)

//OS: it was super-duper amazing! No words can explained my current feeling ;- I am more confident to share my site to my friends and family that use IOS!//

Then, I continued on the exploration of the sliding button; I am struggled on this so much which I spent N hrs to discover. I felt that the carousel had blocked the cart button. The video below had showed the before and after the amendments.

//this also the challenge since project 2//

Fig 1.10 Before vs. After (week 13/ 26.11.2022)

#solution;

.carousel-control-prev {

width: 50px;

height: 50px;

left: 0;

top: calc(50% - 25px);

}

.carousel-control-next {

width: 50px;

height: 50px;

right: 0;

top: calc(50% - 25px);

}

Fig 1.11 Before vs. After (week 13/ 26.11.2022)

As my landing pages are having the idea of round border-radius, I tried on making the inner elements (under projects) to be a bit round too. I did not adjust to "very round" as it will affects the outcome of the portfolio. So, I determine the most suitable value for the border-radius. Also, I added a overlay effects for all the portfolio to stated their name and category.

Fig 1.12 Before vs. After (week 13/ 27.11.2022)

#solution;

stylise ccs

//code can be refer to the PDF - a bit quite long "overlay effect"//

Fig 1.13 After the full adjustment (week 13/ 27.11.2022)

To stay consistent, I styled the "dropdown".

Fig 1.14 Stylise , dropdown (week 13/ 27.11.2022)

#solution;

.dropdown-menu {

border-radius: 20px;

}

.dropdown-item {

margin: 5px;

}

Since I having the "shop and collection", I believed that it should be a cart there for the user to check out. But, I felt that the goods/ collections that I place in this website might not able for me to present physically on this moment (Imagine I shared the site to someone as my portfolio and they request for buying, it will be a difficulty for me).

At first, I think of link the button to a "Sign-up page" but I felt that people who are interested will also sign up but at the end getting the same outcome (which I not able to sell to them). After some research, I finalised the solution by using "Modal".

#Development (before and after) ; Taking the Home page (haven't make amendment) and the shop collection as a comparison.

Fig 1.15 Modal; before and after (week 13/ 27.11.2022)

Fig 1.16 Outcome (week 13/ 27.11.2022)

I created the modal contents by some informal words, which having the intention to have interaction with the user (the instagram icon was clickable).

Then, I having the intention to make the "JQ's Project" to hover zoom.

Fig 1.17 Hover Zoom effect (week 13/ 27.11.2022)

#solution;

.zoom {

padding: 0px;

background-color: transparent;

transition: transform .3s;

width: 100%;

height: 100%;

margin: 0 auto;

}

Since Mr. Shamsul had open for a private consultation, I requested to having some feedbacks on the current stage.

Feedback _ week 13 / 01.12.2022

Overall great and your website look very professional. If possible, it is recommended make the contents clickable which it might be more interesting.

After receiving the feedback and suggestions, I proceed to make all the artwork clickable. There are 22 art projects in total and I spent some time to design as well as mock up all the content materials. I divided into four categories :

Graphical : Logo (6)
Graphical (6)
Typography (3)
Illustration (7)

#Content Development

//the designed content and the layout might be different (del some to create a better composition/ layout) with the actual site//

Fig 1.18 Contents, Adobe Illustrator (week 15/ 09 - 10.12.2022)

During the creation of the layout contents, I had code the HTML source code for each different section (project) :

Fig 1.19 Development in DW, clickable contents (week 15/ 11.12.2022)

Fig 1.20 Proof, HTML folder (week 15/ 11.12.2022)

//I placed the different categories files & images in different folder. So, the main folder consisted with HTML and the other secondary folder.//

I did a rough screen recording to record the current progress (outcome of clickable contents). To be mentioned, since the duration might be long, I just simply click severals for the purpose of recording clips.

Fig 1.21 Outcome, clickable content (week 15/ 11.12.2022)

Continued after the progress, I proceed to the next struggle - Navigation bar. Since it was my struggles from the beginning, I did some exploration and investigation on the files code that Mr. Shamsul provided to solve the issue.

#Issue [for the smaller device] :

The text (nav-item) on the nav bar are not aligned to left properly.

Fig 1.22 Adjustment, Nav Bar Issue (week 16/ 12.12.2022)

#solution;

@media (max-width:768px){

.nav {

display: flex;

flex-direction: column;

}

.nav-item{

width: 100%;

}

//I was very shocked and speechless when figuring that the issue was the width..🤯//

After, I had figured that an issue which was when I went through my portfolio project, I had experienced that it was very uncomfortable to back and forward to view a different project. So, instead, I created a left and right icon, coded into the layout.

I linked the connection between the 3 different project which when the users clicked on any of the "graphical" project then he/she can click the left & right button within the "graphical" project; when the users clicked on any of the "typography" project then he/she can click the left & right button within the "typography" project; when the users clicked on any of the "illustration" project then he/she can click the left & right button within the "illustration" project.

Fig 1.23 Left and Right Button (week 16/ 12.12.2022)

#solution;

</div>

Continued to the final stage, the nav bar ; cart and search icon. There are no "findings" towards the icon and yet I had spent some period of time exploring the best methods to allocate the search bar and the cart. Yet, at the end, I finalised it by having the search bar pop out on the top header (unluckily I did not managed to make the search bar active) ;

Fig 1.24 Nav Bar : cart & search icon (week 16/ 12.12.2022)

Last but not least, as I still having the persistent to make the sites active in the browse, Safari. I had make some adjustment on the button (when I export the site and figure that the button was not been stylised in Safari) ;

Fig 1.25 Issue in Safari (week 16/ 12.12.2022)

#solution (Icon, #issue in Safari);

</a>

</a>

</form>

</div>

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</script>

//popover features will only active when adding the script//

After the long process of adjustment and amendments, I finally stopped myself to being perfectionism due to the time restrictions. But, the final outcome was satisfied by myself overall. And, the most important aspect was I do really enjoyed the process of creating something for myself! :D

#Different devices overview

//The site was defined as user-friendly in desktop, somewhat user-friendly on mobile and iPad. The main was desktop whereas mobile and iPad version was just a review on layout display.//

Fig 1.26 MacBook Pro 13" overview (week 16/ 13.12.2022)

//since the original clips was quite long, I had trim a bit and place some text caption inside. For the more detailed version, do check my final submission link.//

Fig 1.27 iPhone 11 Pro max (6.46") overview (week 16/ 13.12.2022)

Fig 1.28 iPad Pro 11'' overview (week 16/ 13.12.2022)

#FINAL OUTCOME @ FINAL PROJECT

Submission Netlify Link : https://jacqesign.netlify.app

Fig 1.29 Compilation of screenshot (final outcome on web) , PDF (week 16/ 12.12.2022)

Fig 1.30 Compilation of Jacqesign Full HTML and CSS , PDF (week 16/ 12.12.2022)

FEEDBACK

Week 13 / 01.12.2022

Overall great and your website look very professional. If possible, it is recommended make the contents clickable which it might be more interesting.

REFLECTION

Suffice it to say, I really threw myself into this task. For me, it's more than simply a task; it's a chance to pursue my own interests and something I can do for myself. In my experience, I seldom create for "myself," therefore the whole process is quite thrilling, and in facts, I expected too much from myself to build my vision. While each investigation took a long time and I became concerned when the HTML code failed (my code screwed up once and forced me to retake a specific session), the results were quite satisfying. Overall, although the outcome was not 100% perfect but I concluded that this was a good first step for me toward UI/UX design, and there is much more to learn in the future. "There are more to amend and to form a better outcome".

Yung Siew Weng / Jq 0339847

Search This Blog

Interactive Design / Final Project : Design, Exploration and Application

Comments

Post a Comment