Ivar Design - Web developement and design from the Silver lake / Echo Park neighborhood of Los Angeles by Ivar Johnson

Ivar DesignWeb Development + Design by Ivar Johnson

New: Web Hosting by Ivar!

Now you can have it all in one place: Ivar (as your support specialist and/or designer/developer) AND your website, sitting right next to Ivar so he can help you whenever you need it.

No need to go shuffling through your desk to find who your host is, what the login is or what their support number is, because it's all right here in one place for your convenience.

Simplify Your Life Today

ABOUTRESULTS

I am passionate about Web design and development. I code and design. I work with SEO, UX, IA... bottom to top and back to front, my work is always about learning and solving new puzzles.

I use my accumulated knowledge and wisdom, which is more than my fifteen years in Web design and Web development, to find solutions for the puzzles of putting your best face on your Web presence, at a price within your budget.

I work well with others, in and out of the Web design office, meaning I can work with your team of developers and designers, or I can work with the mom & pop pizza place on the corner, and we will understand each other!

Call me today if you're in search of someone to work with.

"Ivar is a very talented Web designer with many top-notch skills. His creative approach is clean, thoughtful and distinguished; his attention to User Experience is well-informed, logical and customer-oriented; and his technical abilities are very impressive. He is utterly dependable, attentive to detail, and knows how to get work done quickly, effectively, and with high quality. He is also a pleasure to work with, and knows how to balance customer requests with best-practices and best value. I would recommend Ivar for anyone who wants a distinguished Web site." —Angelo Funicelli - Senior Manager, Creative Services at Capital Group

"Ivar has been designing and managing my personal web site for several years. He has excellent design, implementation and problem-solving skills, as well as a superlative work ethic. I recommend him without hesitation." —Stuart Bender - Senior Applications Engineer at CCC Information Services Inc

RECENT WORK

Client: McIntyre House - WordPress

Design by Ivar Johnson - IvarDesign.com

Description

This is a translation of a static site I had previously produced for McIntyreHouse.org into a WordPress environment/template.

To keep development time and cost minimal, I used a pro version of a free template offered through the WP site and created a child theme to customize the functions, header and style sheet for McIntyre's needs. The template is a completely different infrastructure from what I'd previously developed, now based on Bootstrap.

The link above will take you to what will be the default page of the site, once the site as been officially launched.

Scope

  • WordPress child theme development
  • Client-supplied visual and text assets

Tools

  • Wordpress
  • Atom
  • Filezilla

Client: McIntyre House

Design by Ivar Johnson - IvarDesign.com

Description

This is a re-design of the McIntyre House website. Responsive and simple.

This design is currently only live on my site as a sample submitted to their Board for approval. To view this, click the title above the image. Also, you can see their current site at http://www.mcintyrehouse.org/.

Scope

  • New Web site development
  • Responsive design
  • Client-supplied visual and text assets

Tools

  • Dreamweaver
  • Photoshop

Client: Eugene Castillo

Design by Ivar Johnson - IvarDesign.com

Description

Eugene Castillo has benefited from this adaptive and responsive, one-page Web design which was developed to emulate a pre-existing printed brochure and to further publicize his talent and career as a professional conductor.

The content for the "About" section was quite extensive, so I put each category of the content in expandable (initially hidden) collapsible divisions to ensure that the viewer knew the sections of About before possibly getting lost in the content. This also aided with keeping the main navigation minimal because it wasn't necessary to add links for these sections to it.

Scope

  • New Web site development
  • One-page, responsive design
  • Client-supplied audio, visual and text assets
  • Ongoing maintenance and support

Tools

  • Dreamweaver
  • Photoshop
  • Audacity

Client: Tim Krol

Design by Ivar Johnson - IvarDesign.com

Description

Tim Krol needed to replace his old Web site with an updated, mobile-friendly design.

This new design is responsive and adaptive, loading differently optimized images depending on the internet connection speed. My work replaced the old frames-based site with this single-page, portfolio-style design, adding mobile friendliness and at the same time providing an improved desktop user experience. The average US page-speed clocked at 541ms.

Scope

  • New Web site development
  • One-page, adaptive/responsive design
  • Client-supplied audio, visual and text assets

Tools

  • Dreamweaver
  • Photoshop

Client: INTI Creative Design

Design by Ivar Johnson - IvarDesign.com

Description

INTI Creative Design needed a portfolio Web site for Jennifer Aspinall to showcase images of some of her make-up artistry.

I developed a site for Jennifer over ten years ago, when the mobile audience didn't really exist yet. It was some of my early work and needless to say, things have dramatically changed, between my skill-set and tech evolution, it was clear that Jenn really needed an update. I created a new site that is responsive with one main breakpoint. All new infrastructure using HTML5/CSS3, jQuery and Fotorama helped to make what I felt was some good work. Alas, Jenn wanted to stay with her old site so this design never flew, but I saved enough of it here on my server for the purpose of demonstration.

Scope

  • New Web site development
  • Client-supplied visual and text assets

Tools

  • Dreamweaver
  • Photoshop

Client: Stuart Bender

Design by Ivar Johnson - IvarDesign.com

Description

Stuart Bender is an artist in Los Angeles for whom I have been designing Web sites for 13 years.

His new site is run using Koken, allowing him the ability to update his content himself.

This design is responsive and adaptive and served entirely in HTML5. The design is meant to be minimal; a structure to emphasize the work in an elegant and functional manner, not unlike an actual gallery.

This is my first use of Koken for a client, though I've been playing with it for a few months behind the scenes to check it out. It looks like Stuart is catching on quickly to its relatively intuitive interface, with minimal guidance from me to get him rolling.

Koken uses templates and provides a few free and a few paid templates with their free CMS. I used one of the free ones in this instance, though I did apply a couple hundred lines of styles via Kokens 'custom css' area, which allows the user to make pretty much any changes to the layout they want.

Scope

  • Web site re-design with "less is more" approach
  • Responsive infrastructure
  • Simple information architecture
  • User friendly CMS
  • Client-supplied audio, visual and text assets
  • Ongoing maintenance and support

Tools

  • Koken CMS (koken.me)
  • Dreamweaver
  • Photoshop

Client: Mark Olmsted

Design by Ivar Johnson - IvarDesign.com

Description

Mark Olmsted is a well read writer and artist who writes on several different venues. Mark wanted to establish some unity on the Web, something that would function as a portfolio but also serve as a point for access to several of his online pursuits.

I developed this site with the mobile-first approach and added responsive and jQuery features for a portfolio-style Web site that includes an interactive version of Mark's resume and aggregates from his work at Blogspot, Twitter, Huffington Post and Tumbler. This project resulted in a site with a very dynamic feel.

Scope

  • New Web site development
  • One-page, responsive design
  • Client-supplied image and text assets

Tools

  • Dreamweaver
  • Photoshop
  • Illustrator

Client: Anna Homler

Design by Ivar Johnson - IvarDesign.com

Description

Pharmacia Poetica, by Anna Homler is an artistic expression that has been exhibited all over the globe. The old website needed an update to make it responsive. The budget for the development and design was extremely tight. My approach was to keep things as simple as possible.

Scope

  • Web site re-development, responsive, mobile-first and 'design-on-a-dime' approach.
  • Client supplied assets

Tools

  • Photoshop
  • Illustrator
  • Dreamweaver

Academic Project: CS/IS 263: Database Driven Websites (XML)

Design by Ivar Johnson - IvarDesign.com

Description

This was a site I made to keep a list of exercises assigned in class as well as results of work on test projects and findings from research. This was an introductory class for database driven websites with a focus on the use of XML, taught by Rory Schleuter at Glendale Community College.

I decided to use a responsive Bootsrap template to keep things simple, keeping the focus on the subject: learning XML, XSD and XSL.

Scope

  • New Web site development
  • List all tutorial exercises, research and final project(s)
  • Add some 'links' to favorite sites

Tools

  • Turnkey Linux
  • Bootstrap
  • Atom
  • Filezilla
  • Photoshop

Academic Project: CS/IS 261

Design by Ivar Johnson - IvarDesign.com

Description

This class focused on PHP5 though the title was PHP6 [but then, PHP6 never happened ;)]. This was my product for the Final assignment. It's nothing fancy in appearance, but the class was a nice return to basics for PHP. --Got an "A"

Scope

  • New Web site development
  • Write a php page which displays your data in a table form. Each record might occupy one or two lines. Within one of the cells, create a link to delete that record. Repeat this for all other records displayed.
  • Write a php page which displays your data in a table form. Each record might occupy one or two lines. Within one of the cells, create a link to edit that record. The link, when pressed will call yet another php program which will display an HTML data entry screen with all the fields populated with values from the table. When the submit button is pressed, the data will be passed to yet another program which will update the record with the current data. You can combine the edit and delete tables and just include two links, one for edit, one for delete.
  • Provide three sorted reporting options based upon key fields within your data. You decide what makes sense for your data.Do all the above correctly and get a "B" (85%)
  • For the full 100%:Provide a menu or dashboard which will allow the user complete control over the database table. So link/button to Add a record, edit a record, delete a record and write a report.
  • Add security to the program using a PHP based login.

Tools

  • Sublime Text
  • FileZilla
  • Photoshop
  • Linux
  • MySQL
  • SQL

Academic Project: CS/IS 260

Design by Ivar Johnson - IvarDesign.com

Description

The course Web site project for this basic HTML5/CSS3 class at Glendale Community College was assigned at the beginning of the Fall semester of 2014. We were each supposed to customize to our hearts content, what was a bare-bones front page that contained specific content which we had to develop and supply a set of links to all the other in-class pages we worked on from this front page.

I took this a little beyond the instructions and made sure to match the in-class pages to the design of the front page, where ever possible. I re-wrote almost all of the code in this and all the other assignments to be as responsive as possible. What should have been an easy "A" class ended up being a lot more work than it needed to be, all because I wanted it to look and function better than the standards set for the assignment.

I got an "A" and when the teacher reviewed this project and my Final assignment with me at the end of the semester, he asked why it was that I wasn't teaching the class (that felt good, but I'm no teacher)!

Scope

  • Provide a navigation with links to all in-class exercises
  • Use a gradient background
  • Tell about your history and future plans
  • Provide a sidebar with favorite links
  • Place a picture or cartoon of yourself at the top center of the page
  • Create a QRCode that links to your page and place it in the top left corner
  • Put the title and your name to the right of the QRCode
  • Create a footer with a sitemap

Tools

  • Sublime Text
  • Filezilla
  • Photoshop
  • Illustrator

Academic Project: CS/IS 260

Design by Ivar Johnson - IvarDesign.com

Description

The Final assignment for the basic HTML5/CSS3 class for Fall 2014 was a 5 page project, each page focusing on specific functionality including providing links and a form with usability in mind.

This was a simple assignment but I tried to do something that I wouldn't mind looking at while meeting the tight timeline requirement. --I got an "A"

Scope

  • Front page (index) must have title of assignment and navigation to entire five page site
  • Front page (index) must demontrate box model
  • Second page (media) must demonstrate use of embedding video (YouTube OK) or sound
  • Third page (contact) must be a contact form, implementing usability guidlines
  • Fourth page (about) must contain your name, address, phone and business hours and have an embedded map
  • Fifth page (privacy policy): Write a privacy policy

Tools

  • Sublime Text
  • Filezilla
  • Illustrator

Academic Project: Art 251 Final

Design by Ivar Johnson - IvarDesign.com

Description

Our final for this class was our last project: Design a simple WordPress site with information directed toward students and counselors to aid them in planning their scholastic schedule when enrolling for the Graphic Design Certificate or the Graphic Design Associate of Arts degree.

We were restricted to limited WordPress environments on the school server and had only a few templates to choose from and no access to adding new themes, plugins or altering any server-side code in any way. It took a good deal of hacking through the various themes available to find something that was responsive and that I could work with. The one I chose allowed for custom CSS.

I created all the graphics you see and grabbed most of the text content from existing pages, though most of it has been completely reformatted and pieced together differently in some spots to make better sense.

Scope

  • New Web site development
  • Client-supplied color direction and text assets

Tools

  • Dreamweaver
  • Photoshop
  • Illustrator
  • WordPress

Academic Project: Art 251 MidTerm

Design by Ivar Johnson - IvarDesign.com

Description

The mid-term assignment was to redesign the LACC website. We also had to include a gif advertising GCC. Wow! Got an A.

Scope

  • Web site re-design
  • Client-supplied color direction and text assets

Tools

  • Dreamweaver
  • Photoshop
  • Illustrator
  • Bootstrap framework

Academic Project: Art 251

Design by Ivar Johnson - IvarDesign.com

Description

This site contains all of the tangible work that was assigned for the Web design with Dreamweaver class I just finished for Fall 2015. We worked with the new Bootstrap integration. This teacher never failed to keep things busy! A challenge is always nice. All A's again in this class. --I hope I can do this well in math!

Scope

  • New Web site development

Tools

  • Dreamweaver
  • Photoshop
  • Illustrator

Academic Project: Art 250

Design by Ivar Johnson - IvarDesign.com

Description

This is my Final project for a basic Web design class that focused on designing Web graphics using hand-sketches, Illustrator and Photoshop.

The majority of the work involved producing "icons" to represent specific areas of the Web site, starting by drawing them by hand, then transferring these drawings to Illustrator. The assignment included using a "Roux Academy" template and replacing the graphics with our own as well as modifying all the content to meet our specific schools requirements.

The first things I noticed about the Roux Academy template was that it was messy and written in XHTML. I rewrote much of the code while upgrading to HTML5 and added some responsiveness to accomodate tablet sized devices. I had to stop there to accommodate the rest of the work involved in the project.

The original Roux Academy design was very dark with an artist-oriented feel, but my icons were bright and had a cartoon feel that didn't work with the original design, so I brightened everything up by incorporating the official Glendale Community College colors. --I got an "A"

Scope

  • Use Roux Academy template
  • Replace all Roux Academy content with GCC related assets
  • Replace all Roux Academy icons with your own
  • Your icons must be created from sketch and Illustrator

Tools

  • Dreamweaver
  • Illustrator
  • Photoshop

CONTACT

Ivar Johnson is Ivar Design

Ivar Design

Let's make something!

email: ivar@ivardesign.com

phone: +1 323 351 8687