Its the little things that count

In the time between the days of Passover/Pesach, I have been fiddling on my website. I have been adding on some little things which have me very excited.Fistly, I am the most proud that by chance I found out how to put in a favicon (the little image for your site in the address bar). Its just like linking to an enternal style sheet, except instead you’re linking to an icon. Its funny how sometimes the smallest discoveries feel like huge achievements.

Another thing I added were social media icons. I have always loved looking at the cool different kinds you can find all over the internet. Its very easy to just search on sites like Smashing Magazine or Noupe Design Blog (two of my current favourite design resouce sites) for social media icons. And the vast variety is too exciting! You can find ones for any type of website style – sketchy illustrated ones, grunge, clean, quirky, wooden ones, stickers… Everyone knows the importance of linking yourself to all of your social media platforms (twitter, facebook and even LinkedIn) so why not do it in a fun way or in a way that fits in with your website? Personally I stuck with clean looking ones considering the clean layout of my site – but there is nothing stopping you from finding exactly what you need for yourself! Check out one such page which has a great variety 🙂

Now I’m busy working on the actual portfolio page of my portfolio site, and actually displaying work of my own as opposed to just the stuff we have done in class. I didnt feel there was enough from class, so stay tuned 🙂

When things get real…hello CSS

Designing a Photoshop mockup of a website you wish to create is a lot easier than actually coding it. For a beginning like myself, you sometime realise that you’re having difficulty coding certain things, or that other things practically work better i rearranged.

Here are thumbnails of my mockup vs. what i have currently coded:

Proposed layout for my new portfolio websiteCoded version of portfolio

So as you can see, they look a little different, while still the same. (For those who dont understand HTML or CSS, you can just gaze at the pretty pictures)

I made a few changes to my photoshop mockup. The main one was of the block holding my name which I moved from the center to the left. This was because I wanted to have the header in fixed positioning and figured if it stayed in the center it would always be in the way so in the left would be more discrete. Also I changed the pink of the header to blue to match the blue at the bottom swirl as well as matching the blue background.

Some difficulties I had were as follows:

  • It was proving difficult to do the header as I wanted it in Photoshop with the different chades & the block and was having difficulty doing them in the floated list, especially when I was trying to have the block with my name in the center. I tried filling the background colour to achieve the header, but trying with my name bigger vs. the smaller <li>s it all came as one solid block which isn’t what I wanted. In the end I opted for an image of the block.
  • I’m having difficulty positioning the tagline, but I might have to think of using a particular type of positioning, and work around the background of it.
  • I felt I needed the footer to also have fixed positioning, especially so that the swirl could be there are all times, without seeing it the page looked dull and static. The only thing is, that I then couldnt have a thick footer with information i.e services provided, or a long disclaimer because with the fixed positioning (and a fixed header) it would take up most of the page and not leave space for actual content. My issue I’m trying to work out is that having the footer & swirl with a fixed position hides the bottom of the information in my content div i.e my blog feed at the moment. I tried padding & margins & niether seemed to work.
  • Working on my computer at home I havent been able to see how elements look positioned on the bigger monitors. While in the lab I was struggling to get the swirls centered using margin left/right: auto like I usually do, so some things may need to have thei positions fiddled with.

But otherwise its looking good 🙂

A New Semester, A New Website.

You all saw first attempt at a website last year, when I posted a link to last semesters Web Design Project (link could be down. Thank you Mendi server), where I did it on UCT. We’re not quite starting from scratch this time, rather we are building on what we have already learned and doing our own portfolio page properly to showcase all our wonderful work.

This week I had to design a basic layout, which is here:

Proposed layout for my new portfolio websiteThis is more or less what I am going for. The design is very simple and minimalistic, which I’ve brightened up with happy colours. I’m quite happy with the colour choices; I’m kind of basing it off the sky and hence the blue, white and rainbow swirls at the bottom for some added colour and to break the stiffness.

There are some things which I am still considering:

Positioning: what to position absolutely, relatively etc? what do I want to remain when the page scrolls?

Fonts: I acknowledge that the fonts showcased here are boring (Hi Arial), I just havent been able to find one for the header (i.e my name) that gives off the style I want. I’m looking for a thicker sans-serif font, with a fun edge so thats a start knowing sort of where I’m going.

Nav(igation)bar: I could only think of 5 things to put on my navbar (home, about m, portoflio, blog, contact), but having my name in the center split the 5 into 3 and 2, and it didnt look right not being balanced. So I took out “home” intending on making my name a link to the initial home page. Another option to put up was “services” where one would get a list of the services I offer, but I wasnt sure of where to place them.

Columns: We’ve been encouraged to do a design using columns, to up our level of difficulty but I’m kind of struggling with what to put in a second column. Possibly a twitter feed or a feed to this blog but I’m not sure. Also I know I want to list the services I offer and am not sure if I should list them in a side-bar or in the footer.

I still have a couple days before I start coding, so I still have some time to make these decisions. What do you guys think? As people who surf the wed daily, does anyone have any comments/suggestions?

Web Layouts

So yet again I have had to begin blogging for class. This time it is for my Interactive Media Production class, & instead of starting a new blog I figured I’ll just continue with what I have: “why fix what isnt broken”. It’s also fitting considering what I originally was blogging about was things design oriented, so here I go again. (Bare with me, as these are for marks and hence need to be done)

A person comes into contact with so many websites a day (maybe not so much the average person, who’s most commonly visited site is, so if you’re trying to sell yourself, you need to stand out. Here is a rather “alternative” (in concept) portfolio page I’d like to share and explain the reasons why I like it.

The Great Bearded Reef:

The Great Bearded Reef

Yes, it is rather odd to a) have a website to gather votes in order to become caretaker of the Great Barrier Reef, and b) offering the job of Caretaker of the Great Barrier Reef in the first place!

Layout: I’m particularly fond of portfolio pages which in essence are actually just one page, and with the different information being set at intervals all the way down. In this one, we are made to feel like we are going deeper as we scroll aided by the colour of the sea as a background. I also like how because it is just one page you are scrolling down, the navigation is fixed so you can click and jump between places.

Humour: The concept of this site is funny, and it carries itself out throughout the page. I just love the cartoon version of Josh Willis which we see all the way down the page in different situations (like riding a sea horse or finding hidden treasure). Read his reasons for why he wants the job, you cannot help but crack a smile.

Feel: By “feel”, I mean I love the “look & feel” of this. I love cute pictures. I love the nautical/ocean-ness spreading through the layout, typography and illustration making it cohesive.

Have you come across any website whose layout you’ve really liked? Check out Vanity Claire‘s page which I also love! (pretty shapes, designs, and colours – she clearly doesnt lie when she says she makes pretty things for a living!)