Web Designer / Front end developer

My mood board

Just like a detective would look for a motive and evidence when looking for the correct suspect, wouldn’t you agree that you should investigate what inspires and drives a designer before you engage them to work on your project?

About me

Art, design and all creative activities were always a significant part of my life, but I also loved STEM subjects, which seems to be a bit of a contradiction right?

As a teenager I hoped to study fine arts, interior design or architecture (which is a more technical speciality) and took over a year of painting courses to prepare me for my exams. Before that I was improving my skills at an art workshop led by a local artist, who used to say:

“Think and observe for 15 minutes, express what you see for 5.”

This taught me how important preparation and planning is for any project, and actually saved me a lot of unnecessary amendments in my work later on.

My first profession wasn't wasn't my first choice.

coming soon...
“If life gives you lemons, make lemonade.”

I finished studying Landscape Architecture in my beloved city Wroclaw and followed that by working as a Landscaping/Gardening Project Manager and Designer for 6 years. This demanding job gave me a lot of satisfaction as I had a chance to learn how to manage what sometimes seemed to be unmanageable. This experience tempered me for methodical, arduous work, whilst problem solving and out of the box thinking was required at same time... but at some point I felt like I needed a change, and here I am.

I already knew graphic programs pretty well, so why not use my design skills in a different way?

“It’s better to erode than corrode.”

My adventure with web design started around 4-5 years ago when I came to UK and, encouraged by my partner, I opened the browser, went to the codeacademy website and just dove into my first lessons (I presume that a 2 hour HTML/CSS course in high school, 16 years ago doesn't count!)

I took my first steps as a web designer in New World Digital Media, but I didn't stop there. I'm regularly working on freelance projects, what gives me an opportunity to get more experience, widen my knowledge about UX, UI design and webdev.

Currently I'm a member of In Touch Networks' dev team, where we build and maintain a recruitment portal for professionals and directors as well as custom made applications for our internal use.

My name is Martyna Machowiak, a Manchester (at least for now) based front-end developer/website designer, who is always looking for something new.

I like both sides of the job - the artistic side and the technical one. I enjoy the creative, design stage just as much as bringing each project alive with every line of code.

Works



coming soon...

Baker Ruff Hannon

design + front end

KickStart

design + front end

coming soon...
coming soon...

MMG Homes

design + front end

coming soon...

Michael Karpinski

design

coming soon...

Many Autos

design + front end

coming soon...

Lavelle School for the Blind

design + front end

coming soon...

Apache Log Generator

design + front end

coming soon...

The Franchise Facts

design + front end

coming soon...

Nottingham Lodge

design + front end

coming soon...

Momentum Communications Group

design + front end

Skills

HTML 5

coming soon...

CSS 3

coming soon...

SASS

coming soon...

JS

coming soon...

React

coming soon...

jQuery

coming soon...

Bootstrap 3 & 4

coming soon...

Foundation Zurb 5 & 6

coming soon...

GIT

coming soon...

PatternLab

coming soon...

Adobe Illustrator

coming soon...

Adobe Photoshop

coming soon...

Corel Draw

coming soon...

Typography

coming soon...

User journeys

coming soon...

Wireframing

coming soon...

Responsive design

coming soon...

A r c h i t e c t u r e

“Form ever follows function.” – Louis Sullivan

II don't remember when I fell in love with architecture, even if this wasn't my first love. I always liked to plan, organise things in an order, to make them more accessible and useful. I do believe that this is the core of good architecture, the simple principle that functionality should play the main role, and form will simply express the purpose and intentions of the designer.

You can't think about architecture as a separate province from economy. It can't or shouldn't waste any resources on elements which are not functional or have no purpose, at least with good architecture. It can't have an unnecessary wall or an ornamental facade when it's not needed. Someone could say: “What about all those old churches or castles with their ornamental details?”, but I believe these questions still prove my point. These astonishing decorations shows the prestige (or ambitions) of our ancestors, it can tell the story about the relationship between humans and divine power. In fact a brilliant architect can turn ordinary construction elements into a piece of art.

P l a n t s

At first glance plants and the whole of nature looks messy and unorganized. Nothing could be further from the truth.

It requires a curious eye and a little bit more knowledge about the biosphere to see that these organisms are highly organised, specialised and balanced with each other and with animals, at least as long as we're not interfering too much.

Take a magnifying glass and check a single leaf and you will find patterns, but compare two straws of grass and they seems to be alike, but indeed these are different species or even genus. This world is far more complex and cohesive you might think. Like architecture, or perhaps even more, it cannot stand when resources are wasted. Every part of them, every characteristic has a function, no matter if we're thinking about colour, smell, toughness or life span, balanced and meaningful.

Y o g a

Perfect for me: a physical activity without a rush; calming and sending me away from prosaic matters.

ype yoga into google, you will find a hundred of reasons why you should practise it. Ask yogis and they will give you even more. There is no point in me trying to convince anyone to start and that's not my intention, it just works for me :) Why? What do I like about it the most? It's all about working on yourself (even if it's only a workout for you), but with acceptance of where you are now. Knowing your current limits, but not being defined by them.

E C L E C T I C I S M

I was always into interior design and for me this field of art has huge potential for combining different styles into one cohesive creation. It's not obvious, not always easy and leaves many opportunities to play with form, patterns, textures, and colours.

Of course other arts have this style in their history, but I found eclecticism in interior designs the most justified one: it helps recycle old, but beautiful furniture and places them in a contrasting yet complimentary environment. It re-defines usage of item, gives freedom in expressing ourselves, adjusting our surroundings to us, not the over way around.

A r t

I couldn't name my one favorite painter. There were too many of them over the years. Always one at the time. I admire each of them for completely different aspects of their creativeness.

Alfons Mucha - for his input in poster design and etherealness.
Gustav Klimt - for his aesthetics and mythological references.
Picasso - for showing that art is a peculiar journey, which can be ended only by the artist's death, not stagnation, nonetheless will be alive in our minds even after that.
Edvard Munch - for melancholy mixed with breaking boundaries.
Stanisław Ignacy Witkiewicz (“Witkacy”) - for creating his own rules, not following others.
Tamara Lempicka - for proving that clear lines and strongly defined forms still can express gentleness and movement.

All of them had huge impact on my own creations, although my favorite techniques were always pencil and watercolor.

L A N D
S C A P E
A r c h i t e c t u r e

It wasn’t my first choice when I was about to decide what to study, but it turned out to be more suitable at the time than interior design. Landscape Architecture being a multidisciplinary specialty helped me to develop my skills in many different fields, from art to science.

My time at University also taught me how precision and preparation are important, how different science domains can beautifully complement each other and help to create something that will simply work.

In the middle of my 5 years major I had a chance to start work in this field and that gave me a great comparison between theory and practice. Later, when I graduated and started working full time as Landscape Architect/Project Manager I learned how important is to understand and cooperate with other specialists from different branches.

Studying and practicing Landscape Architecture gave me some tools, which I believe can be useful in any creative job and when a project needs good teamwork. Plus it was great prioritising and time planning training.

E C O  T E C H N O
L O G Y

I was thinking quite a lot about how to name this category. Innovations? Ecology? Eco technology? Sustainability? They are all too narrow.

The easiest way to achieve a goal seems to be the best one, but sometimes shortcuts we’re taking can cause some damage behind our backs. A more complicated, yet sophisticated solution can get us to the point we want with minimal to no negative side effects and save us some trouble in the future.

This philosophy stands behind smart technology, that allows us to achieve our goals not by stealing resources, but by learning how nature does that.

C L I M B I N G

A good way to learn how to pass the same path many times can make you and things you’re doing better.

Something I used to do in the past, just a little bit.

coming soon...

Baker Ruff Hannon

design + front end

A website created for a quantity surveyor and project management company in the building trade.

The building industry has strong traditions, yet it is constantly developing and chasing new technologies. It represents modern design on durable foundations. My aim was to keep that feeling of solid, but crisp design on a website.

This practice was established as a union of three independent partners, experienced in different aspects of project managing, so my intention was to express this partnership by some form on the website, like 3 boxes defining the most important aspects of services they provide on a home page.


* - the original website was taken down in due to expiry of the agreement between agency and client

Brief

  • 10 pages website
  • Business, modern look
  • Blue colour scheme
  • Should present quality and scale of completed projects
  • Responsive design
  • 3 concept designs to choose from
  • Design need to meet the condition of internal agency CMS

Wireframing

Each page on this website has a structure and key features:

  • Navigation
  • Main slider
  • Business description
  • Boxes with short description of selected services (only on home page)
  • Main content
  • Small slider
  • Footer
coming soon...

Colours

  • #51a4bd
  • #3f7187
  • #eeeeee
  • #fafafa
  • #1e3c59

Typography

Roboto Condensed basic font-weight: 700
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Roboto basic font-weight: 300
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 6
  • FontAwesome
  • Google Fonts
  • Slick Slider
  • jQuery
  • Shadowbox
coming soon...

KickStart

design + front end

A website created for a motorbike training school in Gosport.

Riding on a motorbike is not only about moving from point A to point B. There are many safer and more comfortable ways to travel. Riding on motorbike is about experience, dynamics and freedom.

I didn't want to build only a website that would pass on some dry information about how this school teaches, and where their headquarters are.

This was the perfect occasion for me to play a little bit with form and content, and show future bikers at least some part of the fun they can have during their training and riding after passing the exam. Unfortunately it's not possible (yet) to implement wind impression to website design...



Brief

  • Sections for subjects: About Us, CBT, Test, Testimonials, Enquiry and Contact
  • Dynamic, sport look
  • Blue colour scheme
  • Should refer to riding a motorbike experience
  • Responsive design
  • Design need to meet the condition of internal agency CMS

Wireframing

As this website was designed as a One Scroll Page, it was immensely important to make navigation accessible at all times. Therefore main navigation is placed at the top of the viewport. Additionally navigating buttons are placed in different places across the website sections.

Sections structure:

  • Start (welcome)
  • About Us
  • CBT
  • Motorcycle Test
  • Success Stories
  • Enquiry
  • Contact
coming soon...

Colours

  • #232323
  • #225a72
  • #bcbec0
  • #ff9016
  • #fafafa

Typography

Roboto Condensed basic font-weight: 700
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Roboto Condensed basic font-weight: 300
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 5
  • FontAwesome
  • Google Fonts
  • jQuery
coming soon...

MMG Homes

design + front end

MMG Homes is a London based company specialising in designing and manufacturing bespoke furniture.

Same as MMG's products represent attention to detail, and a sleek modern look; the same should be applied to their website. Simple, light, but classic fonts, refined colours and a clean, airy background seemed to be the right recipe for this website.


* - the original website was taken down in due to expiry of the agreement between agency and client



Brief

  • 10 pages website
  • Modern, crisp look
  • Steel Grey colour scheme
  • Should present quality and variety of completed projects
  • Responsive design
  • Design need to meet the condition of internal agency CMS

Wireframing

Each page on this website has a structure and key features:

  • Navigation
  • Main slider
  • Boxes leads to main services provided by MMG Homes
  • Main content
  • Small slider
  • Footer
coming soon...

Colours

  • #58595b
  • #fafafa
  • #a2b1ba
  • #819cb1

Typography

Playfair Display basic font-weight: 400
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Roboto Condensed basic font-weight: 300
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 5
  • FontAwesome
  • Google Fonts
  • jQuery
coming soon...

Michael Karpinski

design

Michael Karpiński is a backend developer and sysadmin. This website was designed to present his professional profile, mainly for job recruitment purposes.

I know Michael pretty well, so I know how much he is into astronomy. He was thinking about this as a main motive for his website, but he hadn't an idea how to use it. I knew that was it! So many possibilities to use all space-related phenomenons in a creative way! The design process was hassle-free as I had one idea after another for each section. Pure pleasure and a lot of fun :)

Michael asked me to leave the whole front end part for himself as he wanted to avoid the situation that he has no clue how some bits were done when someone asks him about it. The website is not finished, it needs some wording to be added and small amendments to be done, but it's still worth a view.



Brief

  • Space theme
  • Presentational style
  • Simple, clean layout
  • Clear apportionment on thematic sections

Wireframing

Each page on this website has a structure and key features:

  • Welcome viewport
  • Webdev skills and projects
  • Sys admin skills
  • Work experience
  • Interests (About Me)
  • Contact info

Colours

  • #404042
  • #f1f2f2
  • #1c75bc
  • #fafafa
  • #6d6e71

Typography

Quicksand basic font-weight: 400
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Raleway basic font-weight: 100
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Raleway basic font-weight: 700
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Cooperation

2016

coming soon...

Many Autos

design + front end

A website created for an automobile workshop that provides a nationwide collective service and a net of garages throughout the country.

Fast, flexible and friendly service is what the workshop's owner is aiming for. He wanted the website to express their approach; modern, dynamic and easy to navigate.

Important for him was also the booking and price estimation system, which back-end part is still in production phase.


* - the original website was taken down in due to expiry of the agreement between agency and client



Brief

  • Dynamic, modern look
  • Black and red colour scheme
  • Should present variety of services
  • Responsive design
  • Design need to meet the condition of internal agency CMS

Wireframing

Each page on this website has a structure and key features:

  • Welcome viewport - video and navigation and price estimation widget (only on home page)
  • Main content for each page enriched by slider with services
  • COntact form - only on home page
  • Map - static map on home page (graphic only) and interactive map on the rest
  • Footer
coming soon...

Colours

  • #b9121b
  • #010101
  • #ffd58a
  • #fafafa

Typography

Poppins basic font-weight: 700
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Poppins basic font-weight: 400
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 6
  • FontAwesome
  • IonIcons
  • Google Fonts
  • jQuery
coming soon...

Lavelle School for the Blind

design + front end

Lavelle School, located in NY Bronx helps blind and visually impaired students to learn how to deal with every day life challenges and supports their families in this special situation.

Website re-build was a part of PR campaign emphasizing Lavelle's leader position and experience in their missin to help children and teens with multiple disabilities, coming from different parts of the world.

Two important requirements for the website were to give visually impaired visitors a tool adjusting UI to overcome their disabilities and to create a place where their parent and guardians can get information directly from the school (including educational materials and upcoming events schedule).

The Leitmotif for the chosen design is the tactile paving, located in different places across the site highlighting important stops and guiding user the same way as the school shows the path to the students.

Brief

  • Organized refreshed content into clear categories
  • Build Ease-of-Access tool
  • Apply the original Lavelle's colour identification to website colour scheme
  • WordPress Website
  • Responsive design
  • 3 concept designs to choose from

Wireframing an user journey

The key issue for planing the website structure, both visually and functionally was to make navigating thought hte website as easy and intuitive as possible. Therefore we've established following principals to achieve this goal:

  • Navigation should be visible at any point.
  • For user navigating with keyboard only - header should contain not only a navigation, but also ease of access panel.
  • The very first button reached by keyboard after loading the page should always open ease of access, but also user should be able to skipped it and jump straight to the navigation.
  • Closing ease of access panel should happen when user reaches the last button availble on it with the keyboard.
  • All button should have aria attributes.
coming soon...

Colours

  • #a91e22
  • #e3ac49
  • #fafafa
  • #f7f9f9
  • #b8d7e4

Typography

Lato basic font-weight: 900
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Lato basic font-weight: 400
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • WordPress CMS
  • Bootstrap 3
  • FontAwesome
  • Google Fonts
  • Masonry
  • Slick Slider
  • jQuery
  • Shadowbox

Created in cooperation with:

2017

coming soon...

Apache Log Generator

logo design + web design + front end

The idea of creating an Apache Log Generator came from Mike Karpinski, as he couldn't find a useful and easy tool to quickly generate syntax needed in a server administrators daily routine.

He created a tool for this application, that works smoothly and provide admins a structured request, but he needed my help to create the user interface.

The whole project was a weekend of fun to both of us.

Brief

  • Simple and user friendly layout;
  • The most of the viewport should contains an app tool;
  • Some tips should be available for user;
  • Website should give opportunity for user to appreciate our work in more tangible way like coffee ;)

Wireframing

  • Info panel - left hand side, with basic information about an app, authors, and PayPal button
  • Tips - below info panel (revealed on click on "How to use" button
  • Available elements collection - top section
  • Sandbox - middle section, where user can create needed combination
  • Syntax - bottom section, with output of user's selection

Colours

  • #231F20
  • #E6E7E8
  • #D1D3D4
  • #00A79D
  • #008e85

Typography

Roboto Condensed basic font-weight: 700
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Roboto Condensed basic font-weight: 300
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 5
  • FontAwesome
  • Google Fonts
  • jQuery

Created in cooperation with:

2015

coming soon...

The Franchise facts

design + front end

"The Franchise Facts" is a website created for Dr. Gabriel E. Feldman, a New York businessman and public advocate for ethical practices in business. He had revealed in 1990 some unfair and shocking franchisers practices, that had lead thousands of US citizens into debt.

Franchise was a common business model for many years and is still quite popular among people who wants to start their own business. Therefore this is not the most independent form of entrepreneurship. As a matter of fact it has nothing to do with freedom and being your own boss. Most of the times it is a rocky road and a hard lesson for people who are lured by a franchisor with false promises and deceptive contracts.



Brief

  • Website content should be divided into parts: Franchisee Preparedness Quiz, Franchisee Personality Quiz, The Path to Franchising Due Diligence, Franchising Vows, Resources, Bio, Press Release;
  • Design appealing to common people;
  • Should present risks in starting franchise business in accessible;
  • Responsive design;
  • 3 concept designs to choose from;

Wireframing

"The Franchise Facts" is a part of a more complex campaign, which the main goal was to make people realise what stands behind this kind of business. The website is one of the mediums that have been used in the campaign (along with newspaper publications, interviews and a facebook page) and was meant to be a serious guideline with a pinch of fun. Dr Feldman's intention was to take his audience journey through a very winding path. This was the reason why navigation appears just at some points, but not from the beginning and a certain part of it, like the quizzes for instance, leads to the right section.

A quite strong impact was laid on the clear and consistent code of navigation. Even if each quiz has its own specific, navigation controls and function buttons stay in the same place.

Sections final structure:

  • Welcome viewport
  • Navigation section
  • Franchisee preparedness quiz
  • Franchising Vows
  • Franchisee personality quiz
  • The Path to Franchising Due Diligence
  • Resources
  • About Dr. Gabriel E. Feldman
  • Press Release
  • Contact Us
coming soon...

Colours

  • #333333
  • #88a6d3
  • #E7E7E7
  • #ebe6e2
  • #fafafa

Typography

Lato basic font-weight: 900
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Lato basic font-weight: 400
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 6
  • FontAwesome
  • Google Fonts
  • Slick Slider
  • jQuery

Created in cooperation with:

2016

coming soon...

Nottingham Lodge

design + front end

Nottingham Lodge is a well established hotel situated in a conservation area off of Sherwood in Nottingham. The owner's wish was to create a modern, yet elegant website for such a historical place.

No matter for what reason we are traveling for, we always look for a comfortable, secluded place. But every place has its own history and character, some sort of vibrations that you can see or feel. Nottingham Lodge keeps a time-honoured look with all modern facilities mixed together. Therefore the website should give its nature and distinctive soul, show a beauty and welcoming atmosphere. Classical fonts, light forms and gentle colours combined together can balance richly decorated interiors presented on pictures. Layout of the website, especially home page, in my intention should attract us to it's airy, but organized structure in exactly the same way in how the hotel invites its guests.



Brief

  • 10 pages website
  • Business, modern look
  • Gold and grey colour scheme with green accents
  • Should present quality and scale of completed projects
  • Responsive design
  • Design need to meet the condition of internal agency CMS

Wireframing

Each page on this website has a structure and key features:

  • Navigation
  • Main slider
  • Business description
  • Boxes with short description of selected services (only on home page)
  • Main content
  • Small slider
  • Footer
coming soon...

Colours

  • #f9c73d
  • #1a600b
  • #fafafa
  • #efefef
  • #231f20

Typography

Playfair Display basic font-weight: 300
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Yanone Kaffeesatz basic font-weight: 200
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • Foundation 6
  • FontAwesome
  • IonIcons
  • Google Fonts
  • jQuery
coming soon...

Momentum Communications Group

design + front end

Momentum is a PR agency operating in New York and specialising in communication campaigns for educational and nonprofit organizations, as well as commercial clients.

Mike Karpinski and I started working with Momentum CG a few months before on a website "The Franchise Facts". After this project was successfully launched, they had asked us to design a new website for them, as the old one was quite a bit out of date and didn't resemble their philosophy and way of operating.

Momentum's president, Jim was very specific regarding his expectations: modern layout showing Momentum as story tellers, with WordPress functionality as it's essential for the agency to maintain their voice in the net.



Brief

  • Website should show Momentum's story, their passion as a non-network agency, doing big things for the ones who want to make a difference;
  • Website can make a viewer smiling but not be too cartoonish;
  • Pictures and video clips should be a big part of story they tell;
  • Website should contain both, regular content describing agency and blog/news section regularly updated by Momentum's employees and interns;
  • WordPress CMS;
  • 3 concept designs to choose from;
  • Website content should be divided into parts: Franchisee Preparedness Quiz, Franchisee Personality Quiz, The Path to Franchising Due Diligence, Franchising Vows, Resources, Bio, Press Release;
  • Responsive design;
coming soon...

Wireframing

It's hard to present only one, universal wireframe for all pages. As a matter of fact, only a few different wireframes were created, depend on page's character and topic.




Home page structure

Home page is only one divided into few, completely different section:

  • Welcome viewport - with video
  • Agency story - "Gaining Momentum"
  • Latest News
  • What we do
  • Who we are
  • How we build Momentum
  • Awards
  • Footer (common for each page)
coming soon...
Meet Momentum

This page, devoted for Momentum's team is also divided into sections, except the main banner picture and footer, all the other ones have the same structure: team member picture and her/his profile below.

The way of changing pictures had been requested by Jim and he was really fond of our, complementary idea of showing each person on the same piece of furniture - a yellow chair that they actually have in agency. They organised a photo session specially for that purpose.

coming soon...
All other pages with regular content

...like Services, Work, Clients, Partnerships and Workshops have a common structure: navigation, main banner picture, content and footer.

Nonetheless the layout inside the content part is different on each of them.

coming soon...
Blog and Latest News lists

These two pages have the same layout, but it's easy to distinguish them by accent colour (gold yellow for Blog, red for Latest News).

Posts abstract on these lists resemble the analogues section on the Home page.

coming soon...
Blog and Latest News post

Same as posts lists, both Latest News and Blog posts have the same wireframe.

Except main posts wording, specific areas were design for two types of galleries, which can be used according to the agency’s needs, but will not interfere with the wording layout, which was a huge problem on their old website.

Some regular and vital parts of posts were also planned ahead: author profile, tags and other posts published in a similar time.

coming soon...

Colours

  • #dbb75b
  • #d33a20
  • #fafafa
  • #efefef
  • #4d4d4d

Typography

Merriweather basic font-weight: 900
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9
Poppins basic font-weight: 300
Aa a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9

Used frameworks and plugins

  • WordPress CMS
  • Foundation 6
  • FontAwesome
  • IonIcons
  • Google Fonts
  • Slick Slider
  • jQuery

Created in cooperation with:

2016