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.
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.
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.
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:
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:
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!
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 folio page:
The about page:
The contact page:
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:
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:
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
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:
Following this, I created a visual mockup of my home page, to use as a guide for creating the code.
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.
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:
And the CSS code:
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!
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.
The first concept:
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:
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:
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.
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.
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).