Week 6: End Game

This is the final week I’ll be working on my site before it’s submitted.

I’ve primarily been working on positioning elements on each of the pages following feedback, and exploring fluid design as much as I can. Unfortunately I haven’t been able to implement this as much as I would have liked, but after it is submitted I will definitely be working on getting the site as responsive as possible in the future, because that will obviously be an important consideration for the user, particularly when accessing my site on mobile devices. All of the updated pages are below with the code underneath. All of my individual project pages haven’t changed since they were shared last, so I haven’t included them here.

index_wk6

index_html

index_css

folio_wk6

folio_html

folio_css

about_wk6

about_html

about_css

contact_wk6

contact_html

contact_css

One of the main issues I had to work on this week was getting my nav bar menu items at the top of the page working on all browsers. I had initially trialled it on firefox and i.e. and it had work, but following feedback from another class member, I learned that it wasn’t working on other browsers. I discovered that along the line it had been set to position:sticky instead of position:absolute, which based on the position settings I had created for it, caused it to drop off the right-hand side of the page on smaller browser sizes. This was fixed eventually, and I decided to move all the menu items further toward the centre of the page so that there wouldn’t be any issues on other browsers in future.

All of the work I wanted to complete on the site has now been completed, so please let me know if there’s any issues that crop up for you when accessing the site here: C2 By Design.

 

Advertisements

Week 5: Carousel Images

This week I’ve been working on updating a few issues on my site in response to feedback I’ve gotten. I’ve been able to implement most of the features I wanted, but there are still some elements (like responsive design) that I haven’t had the time to properly look into yet.

The major achievement for me this week was creating a carousel of images on my homepage – basically having a hero image which changes every few sections, scrolling through my portfolio works. I used a guide over at w3schools.com which was by far the easiest to implement out of all the different methods I looked into. I’m hoping to potentially be able to include links with these images to their respective portfolio page, but that will probably take some time to wrangle.

index_wk5_state2

index_wk5_state1

index_wk5_html

index_wk5_css

As you can see, the first image is the initial state will cycle through each of the portfolio project images, as seen in the second state in the image below. This cycles every three seconds, so visitors can see at a glance some of my work in a short amount of time.

I’ve also been working on this week’s SBEs; here’s a screengrab and the code below:

table_navmenu_wk5

table_html

table_css

It’s a little hard to see, but the nav menu with the white background is being hovered over, using a: hover to change its state.

I’ve been working primarily on creating a back button on the individual project pages, which you can see below:

honestea_wk5

honestea_html

honestea_css

This helps it act in a much more user friendly manner, and doesn’t leave users ‘stranded’ so to speak, when they access each individual page.

The site is:

C2 By Design

Feel free to take a look, and I’d love to hear any feedback about it!

Week 4: Visual Mockups

I’ve been working on my visual mockups for my folio website. I’ve had to refine a few things following beginning working on the site, so I’ve made some adjustments to these to reflect that.

The homepage:

mockup1

The folio page:

mockup2

The about page:

mockup3

The contact page:

mockup4

The contact page was initially supposed to include a contact form, but following some issues I’ve decided that for now I will leave it as a simple info page, and potentially down the track work on converting it into a form.

I’ve developed all of my pages now, including all of the individual portfolio pages. I also included the background as specified on the visual mock ups above. The code is linked below each page for reference:

mockup1

index_html

index_css

folio-page_wk4

folio_html

folio_css

about-page_wk4

about_html

about_css

contact-page_wk4

contact_html

contact_css

honestea_wk4

honestea_html

honestea_css

sunsilk_wk4

sunsilk_html

sunsilk_css

arthousepage_wk4

arthouse_html

arthouse_css

illustration_wk4

illustration_html

illustration_css

conceptsketches_wk4

concept_html

concept_css

hotel49_wk4

hotel_html

hotel_css

designfoundry_wk4

foundry_html

foundry_css

dancefest_wk4

dancefest_html

dancefest_css

I’ve also optimised all of my images to include on these pages, and I’ve just used the Export>Save for Web function in Photoshop:

image-optimisation

All of my images are now ready to include on the pages at the right size and quality, which will help loading speeds.

Let me know what you think, feedback is always welcome!

C2 By Design

Week 3: Beginning my Site Creation

This week I’ve been focused on creating the initial stages of my folio site.

We began by creating a content matrix, to determine all of the content which would need to be included:

content-matrix

Following this, I created a visual mockup of my home page, to use as a guide for creating the code.visual-mockup

After this, I began coding the home page itself. This wasn’t a straightforward process, despite my attempts to make the design as simple as possible. Most of the issues came from aligning all of the divs to be where I wanted them on the page, and as you’ll see, I still haven’t got it working as well as I had planned in the visual mockup.

home-page-screengrab

There’s some issues with the distance between the social media icons and the line above that I can’t figure out for the life of me…but hopefully I’ll be able to get this working soon!

My (attempt) at coding, just using placeholder links at the moment, is below:

Untitled - Notepad

And the CSS code:

Untitled - Notepad

Untitled - Notepad

SEO Improvement

We also looked this week at SEOs (search engine optimisation), and I personally found the whole process to be a little confusing. Between search engines there seems to be different ways of improving your SEO, and particularly in the case of Google, it seems to be mostly automated by them with the exception of using paid advertising. My aim for improving my SEO ranking will most likely not include advertising, at least unless there is a need for this later down the track. I think the main way to do this will be the strategic use of keywords, particularly related to my brand, so that this can be read by the ‘spiders’ Google uses to read the content of websites. I think using social media could also improve this, as using a branded username will also improve search listings when there are multiple brand presences available to choose from.

The link to my page is www.c2bydesign.com. Feel free to take a look!

Week 2: Developing Concepts

This week I’ve been working on the concept for my folio site, creating site maps, mood boards and wire frames to explore the direction I want to head in.

I tried a couple of directions for the site map, but I think the simplified (second) option is going to be the best.

sitemap_version1

sitemap_version2

The first concept:

moodboard-1

wireframe_1_homewireframe_1_aboutwireframe_1_foliowireframe_1_contact

This concept is quite feminine and contemporary. It would primarily use a brush script typeface, with watercolour and gold accents. There would be a hero image used as the background, with content boxes placed over the top. The navigation would be on the footer, with small icons used as links to social media.

The second concept:

moodboard-2

wireframe_2_homewireframe_2_aboutwireframe_2_foliowireframe_2_contact

The second concept is a bit moodier, and would use an almost monochrome palette. The typefaces would be a combination of a classic serif and contemporary sans-serif, and could potentially use texture and pattern as the background on each page. The menu for this option would be sticky, attached to the top of the page while navigating.

The third concept:

moodboard-3

wireframe_3_homewireframe_3_aboutwireframe_3_foliowireframe_3_contact

The third and final option is a lot cleaner than the other two. It uses a pared back navigation menu and more white space to allow the content room to breathe. This concept would use primarily a monochrome menu, with small amounts of yellow and other bright colours used for emphasis. There would also be more images used in this option on each page, to create uniformity in the design.

At the moment my preferred option is the last (third) concept, purely because it is simpler and allows the content to be viewed much easier. Going forward, I’m hoping to develop this concept further.

 

Week 1: Brand Values & Site Purpose

The brief for Assessment 1A is to create a folio site which showcases our work to a particular target audience.

We were required to brainstorm how we wanted to be perceived on the site, as well as values for our personal brand and other areas of clarification, such as skills and strengths.

brainstorm_scan

My brainstorming session looked at this through how I wanted to be perceived, my skills, strengths and design style.

Following this research, I’ve decided that my audience for the website will be potential clients whom I could undertake design work for. This would be graphic design services, predominantly branding, poster and publication design for small-medium businesses and individuals (i.e. photography business, wedding event, cafe, etc.).

I want this audience to gain a sense of my creative style, as well as my design capabilities. I want them to take away that I am knowledgeable, passionate and hard-working; and that these are traits I can carry through into work created for their business.

Ideally, I want them to request a work estimate, most likely through a form on the website, and also connect with me via social media (Instagram, Behance, etc).